Miracle Ogunleye's Blog
CSS vs Bootstrap

CSS vs Bootstrap

Miracle Ogunleye's photo
Miracle Ogunleye
·

5 min read

Cascading Style Sheet (CSS) is a stylesheet language used to describe how a document written in a markup language such as HTML is displayed. It delineates the presentation of HTML elements in the browser on different screen sizes.

Bootstrap is a CSS framework that aims at responsive, mobile-first designs and contains both CSS and JavaScript-based design templates. It makes styling easy and faster.

As good as these two are, they have their pros and cons outlined in this writeup.

Advantages of Bootstrap over CSS

  • Bootstrap is a cross-browser friendly framework; it supports many browsers and CSS compatibility fixes. Compared to CSS that requires adding -WebKit and setting styles for individual browsers; Bootstrap has it in-built and needs no extra effort.
  • Bootstrap is lightweight and can be customized.
  • It has a responsive structure and style. Media Queries are not always necessary for site responsiveness of different screen sizes with Bootstrap.
  • You can embed Bootstrap codes in the HTML code instead of styling from scratch with CSS.
  • Bootstrap uses JS plugins with jQuery and has a quality grid system.

Disadvantages of using Bootstrap

  • Bootstrap has a standard set of grids, selectors and codes which restrict your design in so many ways.
  • You need to put more creative efforts when you do not have a UI you are implementing; otherwise, almost all websites will look the same.
  • Bootstrap styles are verbose. It can lead to loss of outputs in HTML.
  • The JS part of Bootstrap is tied to jQuery, which leaves most of the plugins unused.
  • Bootstrap coding structure can make a file twenty (20) times the original file size. It could lead to slow site loading and reduced site performance rating.

Advantages of CSS over Bootstrap

  • CSS gives you this feeling of originality that the style and styling are yours.
  • CSS is flexible and can be tweaked, whereas, if you do the same with Bootstrap, the entire style can get distorted.
  • CSS files can be compressed using preprocessors like LESS and SASS. It makes it more preferable to having more HTML elements than necessary in Bootstrap (see example below).

Here’s an example:

Using CSS.

<html>
    <head>
        <style>
            .board{
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
        </style>
    </head>
    <body>
        <div class="board">
            <div>Column One</div>
            <div>Column Two</div>
            <div>Column Three</div>
        </div>
    </body>
</html>

Using Bootstrap

<html>
    <head>
        <!-- Bootstrap CDN link -->
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm">
                    Column One
                </div>
                <div class="col-sm">
                    Column Two
                </div>
                <div class="col-sm">
                    Column Three
                </div>
            </div>
        </div>
    </body>
</html>

These two snippets of code above do the same thing; you can try it out.

CSS cannot be said to have any disadvantages. Using CSS, you cannot build technical and advanced stuff unless you learn and know how to, but Bootstrap provides you with codes that you only have to edit to suit your design.

Even with Bootstrap, CSS is still very needed. What do we do then? I think we should not have to choose between CSS and Bootstrap. Bootstrap is great but should not be on the pedestal as the 'do-all'. Frankly, Front-End Web Developers are not as good as they think they are without a good knowledge of CSS.

I hope you enjoyed reading this and have learnt a thing or two from it. Thanks.

CSSCSS3CSS FrameworksBootstrap