Question 165921 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How do I apply changes to the bootstrap.min.css file in WordPress?

I am building a WordPress website and I am using bootswatch theme. This is driving me insane right now, what I want to do is to set my navbar burger menu to show on 1100px not on 992px as it is set in the bootstrap.min.css file. The insane part is that when I change the @media property in style editor (dev console) it works, when I change it in the actual file it still shows 992px. For that matter, any change I make in the actual file is not being applied. I tried clearing the cache and all that stuff but no luck. Is there something I am missing to change a simple property value?

Tags:

3

Answers


  1. 0

    You can simply override the bootstrap styles by simply defining styles in your own CSS file by giving an extra custom class to your container. First, you have to create your own CSS file and import that file properly in your HTML, then give a custom class to your container and define the width in your own CSS file. Here is a little code snippet that may help you:

    HTML code

    <div class='container custom-class'>//your container goes here</div>

    CSS code

    .custom-class{
width: 1100px
}
    Login or Signup to reply.
  2. 0

    If you want to change in bootstrap file then do not edit in minified version first make changes in unminified version if it works. Then minify your updated file and use that file because it is not recommended to make changes in minified files.

    Login or Signup to reply.
  3. 0

    From the Bootstrap documentation it looks like they define the breakpoints in the scss file:
    https://getbootstrap.com/docs/5.0/layout/breakpoints/#between-breakpoints

    Has this been replaced by something from Bootswatch? I would guess that bootswatch is still using the scss from Bootstrap, you may need to change it in that file also (_variables.scss)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search