(Bootstrap) Am I missing something here...?

#beginners #html #css

As many of you will know, I've been learning to use bootstrap and am creating a dummy project to learn html better as well as these invaluable framework skills. What I have noticed so far, particularly as I have now completed the homepage and am moving onto a linked page, is that there seems to be a lot more manual repetition in bootstrap than in vanilla CSS.

It is of course entirely possible that I have missed the point here, or that my creations have been too basic to notice a difference...
Let's use my creation of a newpage.html as an example. When you create a page, you would usually have either a style.css sheet to link it to or a section of <style></style> at the top, in the <head> as I have here:

  <style>
        h1,
        h2 {

            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

        }

        h1 {
            background-color: #326273;
            color: rgb(255, 253, 253);

        }

        h2 {
            background-color: #5C9EAD;
            color: rgb(0, 0, 0);

        }
        </style>

Of course, you'd expect there to be more CSS than that - but as I am using bootstrap, I've used classes. Also, the page is quite simple. Normally you'd copy that little style section, or link your style sheet, into the top of each page you create. Consistency throughout your website is key!
Usually, I'd have defined the margins and padding of these, but I've used bootstrap classes to do that:

<h1 class="rounded py-4">Node CMS</h1>



            <h2 class="rounded py-4">Who are the developers?</h2>

This means, that instead of setting the padding (top and bottom) in the CSS and typing it once, I need to put in that class every time I create a new <h1> element in order to maintain consistency...
It's not really a hardship, but it seems to me that the time you need to put into CSS in the first place isn't really saved by bootstrap?

Am I missing something here or is this just what we need to do for the convenience of frameworks...?

Update

So it seems that I'm not missing anything - and this is just the way it is. That's fine, I'm still enjoying learning bootstrap as a framework, and it's good to know that it does just add that little bit more customisation opportunity if you need it. For example you may not want every <p> to look the same, and rather than fiddle about with !important in CSS, you can manipulate this with bootstrap.

I suppose the little bit of extra work needed does have it's benefits!

Top comments (5)

Darius Kruythoff • Aug 11 '20

The point is that Bootstrap offers both utilities and predefined compositions so you don't have to write them. Combining these utilities will give you long, combined classnames.
You might be able to create your own classes with the combinations you need, but that would add even another level to this system which is meant to:

Make styles easy to apply
Save you the trouble of writing CSS yourself

The lightest way is of course to write your own CSS and classes, which makes stuff like Bootstrap redundant, and the learning curve steeper.

JavaScript➕Coffee🚀 • Aug 11 '20

Ha it's quite a confusion!!

Mastacheata • Aug 11 '20

The benefit of classes over applying a style to every element type is that you're now able to have different looking things that use the same HTML elements.

For example you might want to use a list for a left-hand menu and another one for a top or bottom menu, but they're obviously not supposed to look the same.

Bootstrap takes a very expressive approach by pretty much skipping inheritance completely and assigning a class to every element.
Other CSS Frameworks will have classes that apply a certain style to all nested elements.
For example UIKit (the CSS Framework, not the Apple UI one), provides you with a uk-child-width-1-3 class that makes all directly nested elements take up one third of their parent's width unless they have their own class or styling.