Bootstrap 4, 5 steps to completely learn how it works!
When it is time to style your front-end page, it’s not possible you haven’t at least heard about Bootstrap, this framework simplifies or at least creates a pattern that allows you easily implement CSS styles into your front-end page.
One of the must-haves, when you think of using a framework, is that he already encapsulates the “complexity” of handling different browsers, different screen sizes, and you definitely can find it here.
You always can do it by yourself, as behind the framework you are handling with CSS anyway, but, it is not exactly the same, it’s about simplicity. As you have a well-documented website, encapsulation, you have a defined way of doing it, this improves your code as also an aggregation of functionalities, responsible layout, and many other things that you would need to think it’s already there.
If getting started with Bootstrap it’s what you are looking for, besides making comparisons, this is the tutorial for you!
We will use 5 steps that will provide a complete understanding of how this system works, after these steps you will be able to completely understand this library and improve as much you can!
1 — Understand how to build blocks, working with layouts!
2 — Adding borders to our layout.
3 — Adding colors.
4 — Adding our body content and adding space.
5 — Our bottom content.
Extra — Improving and using other components.
Starting with Bootstrap!
Besides your background, you will be working using an HTML file, the goal here is to be able to implement a layout for your page, just using styles.
You do need to have an understanding of HTML tags, and you will add the style that you want to use using Bootstrap to setup your layout.
Imagine Bootstrap as documentation, and this documentation has many parts, that, you can choose one or multiple “parts” and style the piece of HTML code that you want.
Besides this, we can start thinking about a basic layout that we will add new things. As I said, it’s a basic tutorial, I will not cover the reasons why Bootstrap will work or not in a specific format, but I will show how it should be used.
We will use the layout that we see above. Let’s start with the basics, first create a file with the “.html” extension, any name.
I will name my file as “index.html”, and to start we will add the requirement to Bootstrap start.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css>" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="<https://code.jquery.com/jquery-3.2.1.slim.min.js>" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js>" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="<https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js>" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>First, we need to add Bootstrap to our HTML, and this can be done in two ways:
1 — Download the .css file and use in your file;
2 — Use the CDN, using this format you don’t need to have the file itself when the page load will load for you.
We have the optional Javascript at the end, this is there if you want to use some animation and features that demand animation that Bootstrap already has embedded, I will not cover that here, but I want you to know about this.
And usually, this kind of Javascript is always done in the end, as they are “not essential” to the load of the page, HTML loads in the order that you add the code in your file, them if it’s the last one will be the last one to load, you will have everything visual that can be shown ready before these not essentials one.
1 — Understand how to build blocks, working with layouts!
Ok following our design, we have a 3 blocks layout, that is 1, 2, and 3 in our design, essential these are “div” tags.
We are building now our layouts, and you can read more about them here: https://getbootstrap.com/docs/4.4/layout/overview/
Bootstrap works, too it’s an advantage, with a grid system, and if you see this is indeed what we want, so, in order to have this in place we need to have our “container”, this is where our content will be,
You just need to add this code inside our body tag:
<div class="container">
<!-- Content here -->
</div>Learning about Bootstrap is all about “styles”, and we have more types of container styles, could be “container-fluid" or "container-md" this will tell how our content layout should behave when the size of the view changes, remember, it's all about the layout being responsive.
In the link that I provided above you can see the difference for each one, now our code it’s like this.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css>" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Hello, world!</title>
</head>
<body>
<div class="container">
<!-- Content here -->
</div> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="<https://code.jquery.com/jquery-3.2.1.slim.min.js>" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js>" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="<https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js>" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>Now we have our “container”, let’s add our 3 layout’s that we want.
What we want, we want 1 row and 3 columns right? Let’s do it!
<div class="container">
<div class="row">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>This is how it’s done, you see that are basically components, that we just build as blocks, very descriptive.
Save our file and open in a browser this is what we see.
Ok, we now know that we use the “class” to set our layout, and we have a class for column and row. But, now I want to adjust it, because, I don’t want my content completely attached to the top, and also, I want to have a border and background color so I know the difference.
Would we not just add another “component” to them?! Yes, it’s just this, let’s add padding to the top first!
What we want is just to have space from the top, that is, our “row” to be a little bit far from the top of the page, for this we have.
Do this, in our row, we will add another CSS style (component) for the margin and the size.
<div class="row mt-4">And now this is what we have:
When we want to add another style, we just need to have a space between styles, and understand how we set the space to break the style.
This is the style mt-4:
1 — m is a shortcut for “margin”.
2 — t is the shortcut for “top”.
3 — 4 is the shortcut for “size”.
Do you see how simple it’s? You can easily set it to other parts like the bottom that would be “b”, or the left that would be “l”.
For more references of possibilities check this link: https://getbootstrap.com/docs/4.4/utilities/spacing/
2 — Adding borders to our layout.
Ok just as an easy step, let’s add borders to our layout, this is how our code will look:
<div class="row mt-4 border">
<div class="col">
One of three columns
</div>
<div class="col border-left">
One of three columns
</div>
<div class="col border-left">
One of three columns
</div>
</div>This is how it will look:
Again, you can notice that we build and improve just by adding a new component, a new style.
This is the main thing to learn from here, you can go to the documentation, see which style you want, and just add.
To add these borders you can take a look at this link: https://getbootstrap.com/docs/4.4/utilities/borders/
3 — Adding colors.
This is easy now that we understand that basically we can choose what is “ready” from Bootstrap and just set it, let’s change our “container” div to have a background color and text color.
<div class="container bg-primary text-white">This is pretty simple, we have:
1 — bg that is for the background.
2 — text that is for the text’s inside this container.
For all these colors that I set you can find the reference here in this link and choose another one by yourself.
Link: https://getbootstrap.com/docs/4.4/utilities/colors/
4 — Adding our body content and adding space.
We understand how we can get “anything” and use it, we understand how we create and split our content, now let’s add the body to our content.
First thing, we need to add inside our container, so would be another row right after our first row:
<!-- Main content -->
<div class="row mt-2 justify-content-center">
Body content
</div>Reloading our code this is what we have.
Our code it’s almost the same, but, as you see we don’t have any border, as we don’t want one now, and also it’s in the center now!
We just introduced one more “component”, that is justify-content-center , this center all the content, but, it's important to know that it is about our "grid system" and not the content "string" itself.
If you add the same code to the code above this, which has 3 columns, nothing will change! And the reason is simple, Bootstrap already split and added everything to the center.
If you want the text inside the columns to change their alignment, you need to change/add the string alignment, let’s do it like this, just add this style/component to the row where we have the 3 columns: text-center.
This is how the code will look:
<div class="row mt-4 border text-center">And now this is the result.
You see how important it is to understand the levels, understand what each piece is doing, and where. It’s very important so you know that when you need to change something, what and where it should be changed.
About the text alignment, you can find more info here: https://getbootstrap.com/docs/4.4/utilities/text/#text-alignment
5 — Our bottom content.
Now it’s time to add our bottom. We understand already the concept, even more, how to look at the components that we want, now we just need to add the bottom that we created on our first page and aligned according.
We just need one more row to be set as the bottom:
<!-- Bottom content -->
<div class="row mt-5 border-top">
<div class="col text-left">
Copyright Bottom content
</div>
<div class="col text-right">
All Right reserved
</div>
</div>There’s nothing new from what we learned already, now we just used all the previous concepts that we learned to adjust according to our needs.
1 — We set up to have borders only on top.
2 — Alignment for text is different, we have one row to the left and another one to the right.
This is the result:
Easy right?!
This way you can create any layout that you want, and, very importantly, you have a completely responsible layout, this is what would looks like for smaller sizes:
Very good no!?
Improving and using other components.
Ok, we have our layout how we wanted, but it’s not quite clear what our page will look like, let’s use our knowledge to improve what we have.
First, we want on the top, a navigation bar, let’s replace our code with the navigation bar component from Bootstrap.
<!-- Navigation bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
</div>
</nav>Let’s understand some pieces of code from here.
1 — We have the navbar navbar-expand-lg this is mandatory, we need to say, we want to use the component navbar and we need to say the size, that we use the component navbar-expand-lg
2 — As we are used to having the advantages of the be responsive, we need to add the button menu that when becoming too “small” show our options, this is done by navbar-toggler.
3- We have our “items” from the menu that we use the component collapse navbar-collapse to let the layout know that those are the items that we want to be used by our menu.
And we have this as a result:
And if we want to be responsive, this is what will look like.
Without adding that much code, CSS configurations, we have a full workable navigation bar!
Conclusion
I hope you enjoyed reading this. If you’d like to support me as a writer, consider signing up for my newsletter.
Linkedin: https://www.linkedin.com/in/felipeflorenciodev/?locale=en_US