WebDevGrad: CSS - Bootstrap

What is Bootstrap?

Bootstrap is one of the most popular CSS libraries out there. It's a toolkit full of ready-to-use styles and components that help you build websites faster and with less fuss. Instead of writing all your styles from scratch, Bootstrap gives you a solid foundation to work with: things like a responsive grid system, buttons, forms, navbars, modals, and more, all wrapped up in clean, mobile-friendly design.

Developers use libraries like Bootstrap because they save time, especially when you're building something quickly or don't want to reinvent the wheel for common UI elements. With Bootstrap, you can get a decent-looking site up and running in no time. That said, there are a few trade-offs. If you rely too heavily on the default styles, your site might end up looking a bit “samey,” and the library itself can add a bit of bloat to your code if you're not careful. Still, it's a great place to start, especially for beginners. There are lots of other CSS frameworks out there, but Bootstrap is one of the most well-known and beginner-friendly.

To get it to work, you essentially link your project to a collection of Bootstrap CSS rules and JavaScript scripts allowing you to link them by just adding the class names to your elements in HTML.

Whenever you want to add any feature, component, or functionality, just look at the examples listed in Bootstraps own documentation. On this page I will just go over some of the basics to get you started and explain some uses of the Bootstrap grid system. Including components such as navigation bars, dropdown menus, progress bars, and many others (and customising them) is explained very well in the documentation with excellent examples to suit almost all of your needs, so I will not waste our time by going over them in less detail here.

Bootstrap Setup

Bootstrap's quick start guide is great. It gives an example HTML file you can copy and paste and change to your requirements. The key parts you can't skip over are:

Include <meta name="viewport"> in your <head> element.
Link the CSS CDN in your <head> element.
Link the JS CDN in your <head> element or the bottom of your <body> element.

Bootstrap Grids

Bootstrap uses its own grid system for page layout and breaks down the page into 12 columns. For something that takes up the full width of the page, you would need the col-12 class. For two things to each take up half the width, you can have two elements with col-6 classes next to each other.

The syntax for this is that there needs to be an external container class element. This then contains row class elements. Inside these row class elements you can have your col class elements.

        
<div class=”container”>
	<div class=”row”>
		<div class=”col-12”></div>
	</div>
	<div class=”row”>
		<div class=”col-4”></div>
		<div class=”col-6”></div>
		<div class=”col-2”></div>
	</div>
</div>


    

If the col class elements inside your row class element does not add up to 12, Bootstrap will not complain and leave the remaining empty space on the right by default. If they add up to more than 12, Bootstrap will put them on the next line (row) down. For instance 2 col-4s and a col-6 will result in the col-4s on the same line with an empty col-4 space on the right and half of the next line taken up by the col-6.

If you want Bootstrap to handle sizing more fluidly, you can use .col without a number (like <div class="col">), and it will automatically divide the row evenly based on how many col class elements are in it.

Responsive Design

You can set col classes based on screen size so that your website responds dynamically to different screen sizes. Desktop screens may be large enough to have two sections next to each other, but this may look squashed up on a mobile screen so it would be better to have them on separate rows. To do this the syntax is to put a size between “col” and the number like:

<div class="col-sm-12 col-lg-6"></div>

These work on the “x and above” philosophy. So in the above example, the div will take up a whole width (12 columns) on small sizes and above. When the screen size gets to 992px (large), the div will then take up half of the width (6 columns).

The options for these sizes are:

Keyword	Size	Pixel Size
`col-`	Extra small (default)	<576px
`col-sm-`	Small	≥576px
`col-md-`	Medium	≥768px
`col-lg-`	Large	≥992px
`col-xl-`	Extra Large	≥1200px
`col-xxl-`	Extra Extra Large	≥1400px

The pixel sizes of these keywords is good know so that you can create media queries for other aspects of your website to change at the same break points.

Hidden Items

One aspect of responsive design you may want to include is to make some elements disappear on smaller or larger screens and only appear above or below a certain screen size. I have used this to change the order of elements when the screen size changes. For instance if I have thing A next to thing B on larger screens but on smaller screens I want thing A underneath thing B, my HTML will look like Thing A (hide small screens, show on big ,col-6), Thing B (col-12 col-lg-6), Thing A (show on small screens, hide on big, col-12). This is done by setting the display (d) to none.

Hiding on smaller screens, showing on large:

<div class="d-none d-lg-block"></div>

Showing on smaller screens, hiding on large:

<div class="d-block d-lg-none"></div>

For my full “Thing A, Thing B” example:

        
<!-- Thing A for large screens -->
<div class="col-6 d-none d-lg-block">Thing A</div>
<!-- Thing B (always visible, adjusts size) -->
<div class="col-12 col-lg-6">Thing B</div>
<!-- Thing A for small screens -->
<div class="col-12 d-block d-lg-none">Thing A</div>


    

Alternatives

There are plenty of CSS libraries out there, although I find Bootstrap to be the easiest to get to grips with and the most customisable. Another one I like is MaterializeCSS . I actually prefer the components provided by Materialize, however their library is not as extensive as Bootstrap yet. It is best practice not to use more than one Library, as some of their classes may be repeated across them resulting in some errors across your site. However you could copy and download each of the component classes separately and join them in one file, but this may be a bit extreme for simple websites.