Why am I having so much trouble with Bootstrap?

Lets be honest, I’m not very good at CSS. I usually have to go back and forth moving and trying different ways to align and position things on the page. Let’s just say CSS would be my weakest point, but I do eventually get there and coupled with the fact that I am a horrible designer, I have trouble building front ends. That said I’ve gotten much better at it and I need to learn how to build ground up websites even if my end goal is to be a back end engineer. So I’ve been messing around with projects from FCC, Lynda, Udemy, and some of my own and my general feeling as of late is that I enjoy Sass over CSS and vanilla JS over JQuery (with the exception of AJAX calls although fetch is awesome). Today though I started building a 4 - 5 static page website for a relative’s business and I thought it wouldn’t hurt to have a full website with Bootstrap and JQuery in my portfolio. I wire framed index.html in a couple hours with Bootstrap and it looked like Bootstrap. When I started adding CSS to make it look not so Bootstrap things started flying all over the page. I was breaking things left and right with a single line in the CSS and I had no clue how to fix them. I didn’t even know what as causing the issues a lot of the time. I thought I would track it down in dev tools, then I would change it in the CSS and some OTHER Bootstrap class would then over write my CSS. I’ve worked through the bootstrap section here, taken courses on Lynda and Udemy in Bootstrap and feel confident using Bootstrap. Nothing has taught me how to modify Bootstrap and I’m ready to kick it to the curb and write plain CSS. I see plenty of Envato themes though that are “Bootstrap Enabled” and look nothing like stock Bootstrap. Where am I going wrong?? I am a full day into this website and literally can’t get the header, nav, and one section working correctly with Bootstrap and my own styling.

TIP: Put Bootstrap first, and then your own custom CSS file after Bootstrap.

That way, you can overwrite BS classes (or properties) and have your own style take effect.

This makes it predictable… whatever styling you do will always override BS.

For example, I can override the border-color of the BS navbar-default, navbar-toggle classes by having in my custom CSS code this line.

.navbar-default .navbar-toggle {
    border-color: #4A6599;
}

All the other BS navbar-toggle properties are still in effect, I just want a different border-color.

2 Likes

Please take what I have to say with a grain of salt because I haven’t tried modifying Bootstrap much, but perhaps it may help you pinpoint the cause for all of the issues.

The first thing that I can think of is whether or not you have read through the How it Works section in the documentation carefully, noting all the dos and don’ts—the grid components, in particular, are really not meant to have their paddings and margins changed.

I vaguely remember an advice for creating additional CSS classes to change the styles of Bootstrap components instead of modifying Bootstrap classes directly (waaaah, what @owel said), for example:

<div class="btn btn-primary better-blue"></div>
.better-blue {
  color: royalblue;
  border-color: royalblue;
  background: white;

  &:hover {
    color: white;
    background: royalblue;
  }
}

My opinion is that the more you find yourself modifying the styles, the more likely that you will actually benefit from writing your own CSS; if there are certain styles and spacing that you prefer using for your clients, you probably should maintain your own mini framework.

Good luck. :slight_smile:

Actually, in this case just get rid of btn-primary class and just do

<div class="btn better-blue">SUBMIT</div>

and do all the styling on the ‘better-blue’ class.

If one looks at the Dev Tools, you can see that btn-primary all does is

.btn-primary {
    color: #ffffff;
    background-color: #428bca;
    border-color: #357ebd;
}

Thanks owel and honmanyau, I guess I’m having trouble understanding how to drill down better. My style.css is after the bootstrap link, I’m being overwritten by specificity. Here is an example of something that took me an hour to figure out. I wanted to change the hover color on a link on the nav bar and what I put as

nav li a:hover {
  color: red;
}

I had to finally make

.navbar-default .navbar-nav>li>a:hover {
  color: red;
}

to make it work.

from my very limited experience when i had to modify bootstrap i had to drop !important left and right to avoid bootstrap stuff silently taking it up under the hood

Whoa. You are absolutely right. I didn’t realise that I’ve actually covered all of the styles in the .btn-primary class. :stuck_out_tongue:

CSS specificity is a scary thing. If for any reason you need to modify a class directly, try to locate the element that you want in Dev Tools, highlight it, and just below the HTML (in Firefox and Chrome at least) you should see its direct(?)/exact(?) ancestry. :slight_smile: I’m not sure if there are plugins for getting other relationships (such as siblings) but hopefully you may find that helpful if the need arises!

Yeah, as @honmanyau said, Dev tools inspector is your friend here… make changes in the Dev tools and see how it affects the page. Play with it right over there.

Once you get it right, you can copy/paste the code from Devtools and use it in your own CSS.

Sometimes, you may have to make changes in several classes or html elements to achieve the effect you want to. – but this only comes through experience and lots of practice.

ANOTHER TIP: This may be a good time to use LESS when constructing your CSS, as it may lessen errors and help in targetting only the element that you want, only when you want and saves you from writing long CSS rules.

#maincontent{
    li {
      a {
        color: #FFF;
        &:hover{
         color: #00F;
         }
      }
    }
    h1{
     // other stuff 
    }
}

#sidebar{
   // can have it's own li colors
   li { 
     // whatever... 
   }
}

In this example, the styling of li elements will be different depending on whether it’s in your #maincontent div or in the #sidebar div.

That way, you can freely stylize your li elements for use in one div section, without it affecting other instances located in other div sections.

1 Like

I used to hate working with Bootstrap. I finally did the obvious thing: download Bootstrap on my machine and look into the files. When I want to modify a class, I do a Find in bootstrap.css to see what it does. When I want to go deeper I look in the scss files (I’m using Bootstrap 4). Knowing how it’s implemented makes it easier to make good decisions.

You can also create your own version of Bootstrap and supply that to your pages. For Bootstrap 4, it’s explained in Getting Started > Theming. You can also do it for Bootstrap 3 but it’s different (LESS files instead of SCSS).

Thanks sfiquet. I haven’t really messed with Bootstrap 4 because it’s still in beta. I like the idea of SCSS and I’ll definitely look at the Theming docs.

Sadly I can’t advise you on Bootstrap as I’ve yet to tackle it myself, BUT if you’re interested in other framework options either now or for future projects, I’ve heard good things about Foundation. As far as frameworks go it’s considered “light weight” in terms of stuff that’s baked in. Giving you a lot more wiggle room to style on your own without having to overwrite things. And it works with the same sort of column/grid idea.

And just in time Bootstrap 4 comes off beta. Let the fun begin. Thanks dlyons. I will look into foundation as well. I’ve heard good things about it.