Bootstrap Guide – As you know, the world of the internet is progressively changing. User needs are increasing, and more and more devices are connecting to the network. Consequently, websites around the world have had to adapt and evolve.
In 2011, Mark Otto and Jacob Thornton of Twitter developed an in-house solution toolkit for their own company and named it Blueprint. Over time, Blueprint was released as an Open Source project on GitHub and evolved into what we know today as Bootstrap.
Bootstrap allows you to shape your website and adapt it to the current needs of your users. It is a tool that every web developer should know, and, therefore, in this article, I will explain what Bootstrap is, what its latest versions have contributed, and its advantages.
What is Bootstrap?
Bootstrap is an exceptional tool that allows you to build clean user interfaces that are fully flexible to all types of devices and screens. For just over a year, on January 18, 2018, you can enjoy its new version: Bootstrap 4. Let’s go to see what new features are added to it.
Update: On May 5, 2021, Bootstrap got its latest version, “Bootstrap 5 Stable”. You can see new features on the Bootstrap 5. This article will focus only on Bootstrap 4.5.2; some things may change with another version.
Bootstrap 4: All its news
As one of its creators said, this is one of the most significant updates to the framework. Among the novelties of Bootstrap 4, you will find both new functionalities and components that have been eliminated. Next, I’m going to tell you about the most critical changes in this version.
- Glyphicons icons are removed: In Bootstrap 3, the developers separated the Glyphicons library within the project, although they could continue to be used. Now with Bootstrap 4, the icons disappear entirely. If you go to the official website of the framework, you will see that the documentation on Glyphicons no longer exists. They recommend (and that I also personally recommend) to use icon libraries that implement SVG, such as Iconic and Octicons. As a choice, you can also use the famous Font Awesome icon library.
- CSS preprocessor change: Bootstrap 4 stops using Less to use SaSS.
- XSS vulnerabilities have been corrected: That is why it is always essential to keep your libraries updated.
- New components: Starting with Bootstrap version 4.2.0, more features have been added. Yes, even more Improvements have been made to elements that the library already included.
- Flexbox by default: It is one of the significant advantages. Flexbox is a powerful CSS feature that allows you to create responsive layouts in a much simpler way.
- REM: Bootstrap now uses this relative unit measure instead of px. This favours the scalability of the fonts by adapting the design to different devices.
Conclusion: Is it easy to learn? Yes. But you have a minimum knowledge of the web. At least you should know how to work with HTML and a little bit of CSS.
Is Bootstrap 4 compatible with all browsers?
Bootstrap is compatible with most browsers on the market. I will give you a small summary:
- Google Chrome (on all platforms)
- Mozilla Firefox (on all platforms)
- Internet Explorer (Windows)
- Microsoft Edge (Windows, Android, iOS, Windows 10 mobile)
- Safari (Mac, iOS)
- Opera (Mac, Windows)
With Bootstrap, there are no limits when designing any page that you propose. It all depends on your imagination and ingenuity. If you can master the use of this framework, you will be able to do things like these:
How about these Bootstrap examples? As you can see, you can do amazing things quite easily. Do you want to do something like this? Keep reading!
How to download and install Bootstrap
When you create your website with Bootstrap, the first step will be to install the framework. If you still do not have a place to host your website, I recommend that you use XAMPP to create a virtual hosting environment; you can take the help of Youtube to know the complete process.
How to download compiled and minified CSS and JS
If you want, you can download the files that make up the framework and host them in your own project.
The first thing you have to do is access the official Bootstrap website. Once inside, click on the “Download” button. Again on the next screen, press the “Download” button under “Compiled CSS and JS”.
Here, you will see each file have its “.min” version, which is basically its minified version and, therefore, less heavy. In my opinion, in typical cases, it is these files that you should add to your project. The fact of being less bulky will optimize the loading times of your website.
You will also see that there is a “.map” version of each file. The .map files are used to connect the original file with its minified file when we are using a code preprocessor such as LESS or SASS.
Inside the js folder, you will see that there are two variants: bootstrap.js and bootstrap.bundle.js. The difference is that bootstrap.bundle.js already includes the popper.js script, while bootstrap.js does not, and you will have to include it manually.
In case you don’t know, popper.js is a script that uses Bootstrap for some elements, like pop-ups, tooltips, etc.
The bootstrap.js and bootstrap.bundle.js files do not include jQuery, so you will need to include them.
Inside the CSS folder, you will find the bootstrap.css file, which contains all the structure and components of the framework. In addition, you will also have the bootstrap.reboot.css and bootstrap.grid.css files.
The reboot file only contains the CSS that “resets” the default browser styles. This reset is done to ensure optimal compatibility with all of them.
The grid file gives you just the grid system Bootstrap is based on the famous rows and columns.
Bootstrap gives you these two files separately if you only want to use the functionalities that one of them provides. You wouldn’t be loading all the Bootstrap components that don’t interest you in your project this way.
Read more: These 10 Websites That Will Make You Smarter
In Bootstrap, you have a large number of components or elements ready to use. In this post, I will talk to you about the ones that I consider most essential for you to learn how to use this library. Let’s get in trouble!
Grid or grid system
One of the most exciting things Bootstrap brings is its grid system. With it, you will layout or structure the pages of your website. This system is fully responsive and is based on containers, rows, and columns. Since version 4, the Bootstrap grid is based on the CSS flexbox model.
The CSS classes that are used are:
- container for the container
- row for the rows
- colums for columns
But where do you have to use them? Inside the “class” attribute in HTML
Colors in Bootstrap
Using a series of classes, you can apply colours that Bootstrap has preset. For example, you can apply colours to texts by adding the following classes:
- text-body (text of the default colour of the “body”)
- text-black-50 (black text with 50% opacity)
- text-white-50 (white text with 50% opacity)
You can also apply background colors with the following classes: bg-primary, bg-success, bg-info, bg-warning, bg-danger, bg-secondary, bg-dark, and bg-light.
Some components support a suffix in their class to modify their size. For example, we can vary the size of a button with the btn-lg, btn-md, and btn-sm classes.
You can also modify the width of an element with the classes w-25, w-50, w-75, w-100, and w-auto. With them, you will establish a width of 25%, 50%, 75%, 100%, or auto, respectively. To change the height, simply replace the w with an h.
You can insert a maximum width or height of 100% with the mw-100 and mh-100 classes.
Circle and square-shaped elements are the flexible part that allows them to be formed into any shape. It is handy for creating avatars, media objects, circle indexes, personal profiles, etc. The main advantage is that it can hold an image at any angle, and it still maintains the same height and width and maintains an aspect ratio to that image.
If you want to know how to draw a rectangle or different shapes in Bootstrap; Please click here.
One of the things I like the most about Bootstrap is how easy it is to apply spacing (margin and padding) to any element. To explain how the classes that you can use for this work, I start with the following format:
In “property” you can use:
m for margin and p for padding.
In “sides” you can use:
- t = upper side (top)
- b = bottom side
- l = left side
- r = right side
- x = left and right side (x-axis)
- y = up and down side (y-axis)
- 0 = to remove the margin and padding
- From 1 to 5 = set margin or padding of different sizes (from smallest to largest)
- auto = apply an automatic margin (margin: auto;
Values from 1 to 5 of the sizes correspond to 0.25rem, 0.5rem, 1rem, 1.5rem, and 3rem, respectively.
To add borders to an element with Bootstrap, you can use the border class. If you only want to add a border to one side of the element, use border-top, border-right, border-bottom, or border-left.
You can also apply Bootstrap contextual colors to borders with the border-primary, border-secondary, border-success, border-danger, border-warning, border-info, border-light, border-dark, and border-white classes.
Making rounded edges is very easy with Bootstrap. Add the rounded class to apply them to the entire element. If you only want them on one side, use the rounded-top, rounded-right, rounded-bottom, rounded-left classes. If you want a perfect circle or a pill or button-shaped element, use the rounded-circle or rounded-pill classes. Finally, if you want to remove the rounded edges of an element that already has them, use the rounded-0 class.
The CSS display property is very easy to apply with Bootstrap classes. And not only that, but we can also apply it to certain cut-off points. This is especially useful when designing a 100% responsive website. Let’s see how it works:
- d- (value) = for xs onwards
- d- (cut point) – (value) = for sm, md, lg, xl
The values you can use are:
Positioning elements in Bootstrap
We go with another very important utility: position in Bootstrap. The positioning helps us to place the block in the part of the screen where we need it. To do this, you have to use the ‘position’ property of CSS through the Bootstrap classes that you will see below:
You can also fix an element to the top or bottom of the window with the fixed-top and fixed-bottom classes.
But the one that for me is the most interesting class is sticky-top. With it, you can set an element to the top of the window once you have scrolled to it.
When designing a website, you will always need to align blocks of text. In Bootstrap, it is very easy to do this since there are specific classes for it. I’m going to show you the ones you can use for each case:
- text-left = left-aligned text
- text-center = centered text
- text-right = right-aligned text
- text-justify = justified text
If, on the other hand, you need something more exclusive, don’t worry. If you want to apply an alignment only to a specific cut point, what you have to do is add after ‘text-‘ the cut point in question. For example: text-sm-center
Alerts and Badges
Bootstrap alerts are like the classic alerts you have seen so often on the internet: a window that suddenly appears in the browser with some type of information for the user. For example: alert-primary.
But you can use other classes instead of “alert-primary” to change the color of the alert. Remember the color suffixes that I explained to you in the “Colors” section. In this case, the ones you can use are: * -primary, * -secondary, * -success, * -danger, * -warning, * -info, * -light, * -dark.
Another element that Bootstrap includes is the “badges.” They are a kind of label that highlights an element, shows a count, or simply highlights some extra information.
The color suffixes that you can apply to a Bootstrap badge element are: * -primary, * -secondary, * -success, * -danger, * -warning, * -info, * -light, * -dark.
You can also use the badge-pill class to give the label a rounded-edged look.
Buttons and Buttons Group
Buttons are widely used elements on any website. Thanks to them, you can guide the user to take action, visit a link, etc. Although it may seem obvious, it is important that they look what they are, buttons, so that the user identifies them as such. Bootstrap buttons come with default styles and can be used with the ‘btn’ class.
As you may have already guessed, you can use Bootstrap’s color modifiers via the btn- [color modifier] class. For example, ‘btn-success.’
You can also use the size modifiers to change the button’s dimensions. For example, ‘btn-lg.’
Sometimes you may need to group a series of buttons to give it a more menu or keypad look. You can group a set of Bootstrap buttons into a single block with the .btn-group class. To do this, you have to include all the buttons in a
that carries the class mentioned above.
Another option to create your website is to use a template for Bootstrap. A Bootstrap template is basically a web structure already created and with its own styles that the creator has established. It is ready to use, except that they usually come with provisional images and texts that you have to change. Bootstrap is usually fully customizable for the rest, so they are an excellent way to start creating your website.
Many times, the themes are oriented to a type of business or a type of website. You can find Bootstrap templates for e-commerce, booking sites, creating administration panels, and even multipurpose templates.
When choosing where to download a Bootstrap template from, you have several options. On the one hand, there is the official template library itself: https://themes.getbootstrap.com/ They are paid, but you are sure that they have been developed by the same people who created the framework stability entails.
On the other hand, if you want free Bootstrap templates, you can also find them. Of course, they are usually not as complete templates as the paid ones. They are usually more basic templates, you will have to work a little more to adapt them to your idea.
You can find free Bootstrap 4 templates on sites like:
I consider Bootstrap one of the best tools you can use to design a website. Obviously, you can always create everything from scratch, but Bootstrap is going to save you a lot of time with certain tasks. In addition, it is a framework that continues to grow, providing great news and with a large community around it.
And, do you already use Bootstrap? Have you been wanting to know something more? Leave a comment!