I don’t know if it’s just me and the way I was raised, but I had the wacky idea that Bootstrap was supposed to make things easier for building websites. It turns out it doesn’t. At least not if you’re new to it.
The thing with Bootstrap is that it uses too many classes for everything, so if you are not used to them, everything becomes overwhelming and tough to handle.
But truth be told, once you start to get familiarized with the way Bootstrap works, it does make your life easier. So don’t you worry, sir (or lady), because in this text I will try to explain a few basic things about Bootstrap the way I wish someone had explained them to me before diving into it, so hopefully, you won’t have to struggle that hard when using it for the first time.
Being at the right place at the right time
The first thing you need to know might sound silly as hell. You might even think everyone should be aware of this and there’s no need for an explanation, but I’m telling you now that I’m the living counterexample of this statement.
I also know I’m not the only one who had a hard time with this so that’s why I’m not leaving it to chance. That silly little thing we are talking about is how to override Bootstrap classes in order to personalize your HTML with your own styling in CSS.
Remember that the way a browser reads your HTML file is from top to bottom, so when your browser finds referenced links inside the <head> tag or a piece of javascript code inside a <script> tag, the place these items occupy inside your document does matter and it might be the clue for things to work the way you're expecting.
That’s the reason why placing the reference to your CSS styling sheet after the bootstrap library reference link inside the <head> tag does matter. If you place your styling sheet link before Bootstrap’s link, you’ll find yourself inside a maze thinking that life is frustrating and nothing works the way it’s supposed to.
But everything it’s actually working the way you are telling the browser (or life) it should be working.
So here's an example of how you should be placing that style sheet of yours.
So don’t you forget about placing your styling file link after the Bootstrap link, it could save you a lot of time in trying to figure out why your styling is not doing anything but tickles to your file.
Pay attention to class
The second thing I will talk about is classes. Everything in Bootstrap works by defining classes inside your HTML elements, so the quicker you get used to them, the quicker you'll have that website paycheck landed.
There are classes for flexbox, classes for containers, classes for buttons, classes for images, classes for tables, classes for figures, classes for navs, classes for sizing, classes for colors...
You get the idea.
And the way you make use of those classes is just by setting them inside your element's tags in your HTML file. For example, like this:
<div class = "d-flex">
//some beautiful code in here
</div>This class name is telling the browser to display flex for the elements inside this div.
Now, this means there are some words you won't be able to use to name your classes because they're reserved words for different behaviors in Bootstrap. But it also means you'll only have to use some classes names and not your usual huge styling CSS page for everything to work nicely .
Check out the WW3 school's list of Bootstrap classes.
Lucky number 12
The third thing I wish somebody had explained to me in a more simple way (because this is actually explained inside the Bootstrap documentation) is that the way things are housed inside Bootstrap layouts it’s based in the 12 column grid system.
When building websites you’ll find that a lot of designers make use of the 12 grid system to achieve a nice neat layout for elements. This one is quite easy to understand.
Just imagine that you divide your page into 12 columns (all of them having the same width and being evenly spaced) and everything you fit inside those columns will follow a proportional clean spacing.
Here’s an example for how those columns can be used.
Every time you set a row element in Bootstrap (class= ”row”), which is one of the main elements for laying out, it will give you 12 imaginary (they’re there but you don’t actually see them) columns inside that row, and you should set the number of columns you want an element to use.
Just remember the total number of columns should always add up to 12. For example, if you set an image to use 4 columns on the left side of your row element, then you still have 8 columns to fill with something else for the right side.
Seize the size
The fourth and last thing is about the display sizes your page should be working with. Which means, we’re talking about responsiveness. Bootstrap makes your pages responsive just by adding some classes into your HTML and with no need for media queries (at least not for the whole thing).
The tricky part here is that you have 5 main keywords for displaying things into different screen sizes. Those are:
- sm for small screens (≥576px),
- m for medium screens (≥768px),
- lg for large screens (≥992px),
- xl for extra-large screens (≥1200px),
- and nothing for extra small screens (<576px).
Allow me to explain myself a little further into this. Remember I just told you about the 12 columns you use for fitting elements inside a page? Well, turns out you’ll be using them everywhere with Bootstrap, and they’ll help you a lot when your time comes for creating responsive websites.
Keep in mind that every time you create a row, this will give you 12 columns to fill in. For fitting an element inside those columns think of this cool hack: col-{size-keyword}-{number of columns}.
For example, if you set an image with the class “col-lg-4”, this will tell the browser you want that image to use 4 of the 12 columns you have available and just for a large screen device.
Remember that you should be always specifying the number of columns your element is using according to the size of the screen you are working with.
For example, if you want that same image to be using the whole width of the screen for mobile size instead of using the four columns you had for the desktop size, you just have to go with the code 'class = "col-sm-12"'.
This will make your image use the whole twelve columns inside the row element. But remember, sm stands only for small screen devices , so other screen sizes may show things differently.
Hey! But wait! I did say 5 keywords, didn't I? So where's the last one? Thanks for paying attention, my friend. So the last thing you should keep in mind about this topic is that for extra-small screens there’s not a keyword like xs in clothing.
You just use the code col-{number of columns}. For example, col-3 will tell the browser your element will be using three columns inside your row element for extra-small screens.
Check this wonderful Scrimba's Video Tutorial for learning more about Responsive Grid Systems in Bootstrap and off you go. :)
Working with Bootstrap can be tough when you don’t know what you’re dealing with, but hopefully you find these little tips useful. And most of all, I hope I made myself clear.
I consider these tips important for understanding the basic functionality of Bootstrap, although I strongly recommend you to read the documentation before diving into building a website with it.