In this article, we will look at the similarities and differences between the two versions of Bootstrap. Bootstrap is the most powerful HTML, CSS and JS framework in the world for building responsive, mobile first projects on the web.
Now, we will look at some components and compare the functionality of those components by looking at both versions of Bootstrap.
Figure 1. Comparison of Global Components
Source CSS Files - Both versions of Bootstrap has different Source CSS files, Bootstrap 3 comes with LESS and the new version comes with SCSS.
Primary CSS Unit - In version 3, the primary unit is pixels and in the latest version pixels has been replaced with “rem”. rem means the font size will be only relative to the html (root) font-size.
Media Queries Unit - Pixels is also the unit in older version. In the new version, it has been replaced with “em”. em here means that the size will be relative to its direct or nearest parent block.
Global Font Size - The font size in the older version by default is 14px and in the latest version it has been changed to 16px.
Figure 2.Comparison of Grid Component
Bootstrap 3 comes with a 4 grid system which means that a web page can be horizontally divided into equal parts of 4 different sizes. This becomes handy during coding a responsive website. These four different grids are extra small, small, medium and large. Bootstrap 4 comes with an additional grid which makes the latest version more responsive friendly for different devices. The additional grid which has been added is called extra large and can be used for computers with a large screen.
Figure 3. 4 Tier System
Figure 4. 5 Tier System
Figure 5. Comparison of Tables
Inverse Tables - Bootstrap 4 comes with an additional feature of Inverse tables. You can do this by simply adding a class called “.table-inverse”. Let’s see them in action in the snapshots.
Figure 6. Simple Table
Figure 7. An Inverse Table in Bootstrap 4
There was no support of table head styles in Bootstrap 3 but now the new version has been launched in the alpha version which contains classes for table head styles. These classes are “.thead-default” and “.thead-inverse”.
Both versions come with the feature of small tables and in the earlier version it can be done by “.table-condensed” whereas in the latest version the class has been changed to “.table-sm” . All the functionality regarding the table size is the same in both versions. We can also create responsive tables in both versions and the only difference is that in BootStrap 3 the parent div element class must contain “.responsive-table” but in the later version this class can be directly added to the table element. There is no need of creating a parent div in the latest version. The feature of reflow tables is allowed in the 4th version and it can be achieved by the class “.table-reflow”.
Tables come with 5 different contextual classes - active, success, info, warning and danger. Bootstrap 4 additionally uses a prefix “.table” before all the above contextual classes and in the earlier version there was no need of that.
Figure 8. Comparison of Form Components
Both versions of Bootstrap come with a class which was responsible for horizontal forms. But some changes have been done, which has made creating horizontal forms a lot easier in Bootstrap 4. In the earlier version, we were required to enclose it in a div with a class of row but now there is no need of an additional div. We can simply create a horizontal form by adding a class “.row” inside the form tag and it will make your whole form horizontal.
Form Control Size means the size of the value that is displayed inside the forms on a webpage. Both versions come with the feature to change this size from small to large and vice versa. But they both use a different class to do so. The earlier version uses a class “.input-lg” and “.input-sm” whereas this has been changed to “.form-control-lg” and “.form-control-sm” in the new version. Now let’s talk about Validation and Feedback Icons in Bootstrap. Bootstrap 3 didn’t have the classes form-control-* . It has now been added to the new version and in the previous version to present icons on the input field you had to use something called Glyphicons.
Bootstrap 4 comes with a new feature which supports custom forms. Now, we will look at some features that are provided within custom forms.
Checkboxes - When using checkboxes, wrap them in a <label> element with the Bootstrap 4 .c-input and .c-checkbox classes applied.
Also use a <span> element with the .c-indicator class applied.
Listing 1. Checkboxes in Bootstrap 4
<label class="c-input c-checkbox"> <input type="checkbox"> <span class="c-indicator"></span> Boots </label>
Figure 9. Custom Checkbox in Bootstrap 4
Radio Buttons - Custom radio buttons are configured the same as checkboxes. The only difference is that you need to use .c-radio instead of .c-checkbox
Listing 2. Radio Buttons
<label class="c-input c-radio"> <input id="boots" name="radio" type="radio"> <span class="c-indicator"></span> Boots </label> <label class="c-input c-radio"> <input id="shoes" name="radio" type="radio"> <span class="c-indicator"></span> Shoes </label>
Figure 10. Custom Radio Buttons in Bootstrap 4
Select Controls - To make a custom select control, add the Bootstrap 4 .c-select class to the <select> tag.
Listing 3. Select Controls in Bootstrap 4
<select class="c-select"> <option selected>Choose One...</option> <option value="1">Boots</option> <option value="2">Shoes</option> <option value="3">Feet</option> </select>
Figure 11. Custom Select Control in Bootstrap 4
Also use a <span> element with the .file-custom class applied.
Listing 4. File Upload in Bootstrap 4
<label class="file"> <input type="file" id="file"> <span class="file-custom"></span> </label>
Figure 12. Custom File Upload in Bootstrap 4
Figure 13. Comparing Button Components
Now, we will look at some button classes that are available in both versions but some changes have been made so as to style the button easily. “.btn-default” and “.btn-info” classes has been removed and replaced with a single new class called “.btn-secondary”. This class provides the functionality of both the previous classes that were available in Bootstrap 3. There was no support for outlining the buttons in the earlier version, but now you can do the same by simply adding some classes to the button tag. These classes are of the form “.btn-*-outline”. These classes are capable of styling buttons with colorful outlines.
There were 2 different button sizes in Bootstrap 3. But now you can have 3, one is the default and the other two sizes are small and large and they can be used by two classes “.btn-sm” and ‘.btn-lg”. Default button size requires no use of class.
Figure 14. Comparing Dropdown Components
The structure of dropdowns in the new version has been made quite simpler. You only need to create a div with a class “.dropdown-menu” and then inside that div you can add buttons or links with a class of “.dropdown-item” and your dropdown menu will be ready. Earlier, it was quite hard where you have to create unordered lists and then use <li> tags to do the same. Menu headers are similar in both versions. Only one thing has changed, which is now you have to use header inside a header tag because Bootstrap 4 no longer uses <li> tags for dropdowns. The divider class has been changed to dropdown-divider class and the functionality has remained the same. Same is the case with the disabled dropdown items. The class is the same but you need to add it inside <a> tag instead of <li> tag.
Navbars and Pagination
Figure 15. Comparing Navbar Components
Figure 16. Comparing Pagination Components
In the previous version of Bootstrap there were limited preset color options for navigation bars and only a single inverse class was supported. But now in the latest version there are more preset color options for navigation bars and many different classes has been added which can make the navigation bar look bright and dark in colors. These classes are “.navbar-light” , “.navbar-dark” and “.bg-*”.
Pagination is same in both versions of Bootstrap and only the names of the classes have changed. “.previous” class has been replaced with “.pager-prev” and the “.next” class has been replaced with “.pager-next”.
Labels and Jumbotron
Figure 17. Comparing Labels
Figure 18. Comparing Jumbotron
Badges were available in the earlier version and now the same work is done with the help of a single class “.label-pill”. Now, we will see how badges were used to modify corners.
Listing 5. Badges in Bootstrap 4
<a href="#">Messages <span class="badge">23</span></a>
Figure 19. Badges in Bootstrap 4
Listing 6. Badges with Buttons
<button class="btn btn-primary" type="button"> Inbox <span class="badge">14</span> </button>
Figure 20. Badges with buttons
Listing 7. Badges with Navigation Bars
<ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#">Inbox <span class="badge">14</span></a></li> <li role="presentation"><a href="#">Trash <span class="badge">328</span></a></li> <li role="presentation"><a href="#">Spam <span class="badge">94327</span></a></li> </ul>
Figure 21. Badges with Navigation
Progress Bars, Glyphicons and Typography
Figure 22. Comparing Progress bars, Glyphicons and Typography
Inversion 3 of Bootstrap there was no use of <progress> tags. Instead you had to use different progress bar classes inside the div. But now in the new version, it uses the HTML5 tag <progress> to implement the progress bar. Glyphicons were supported in the earlier version, but now it has been removed and you can use some classes of Bootstrap form to do the same.
When using page headers and Description lists the class “.page-header” was supported earlier, but now it is no longer used. It is discarded in the latest version. Blockquotes styles were applied automatically inside the <blockquote> element, but now you have a choice to opt in for this class. You can add a class “.blockquote” to use the styling for the blockquotes.
Some Other Components
Figure 23. Some other components
Now, let’s look at some other components and compare their functionality looking at both versions of Bootstrap. Earlier, you had a choice to make your website responsive or not. But now if you’re using the new version, then you don’t have the choice. Your website will be responsive, which is a pretty good step as modern websites have to be responsive to look awesome on different devices.
Panels, Wells and Thumbnails were supported in the Bootstrap 3. But now all of them have been removed. A new component has been added which is called “Cards” and it provides the functionality of Panels, Wells and Thumbnails that were available in the earlier version. Now you only have to use cards to access all of the three components in Bootstrap 4. Carousel item class has been renamed to “.carousel-item” from “.item”.
Bootstrap 4 Examples
If you go to the official Bootstrap 4 website, then you will find something called Examples, and if you scroll down you will have a section which contains different components. This is a very awesome feature available with Bootstrap 4. They have many different templates available for free and you can use any of them to make your website. They have already made a custom website which ranges from different domain and you can choose any domain and download its source code. After downloading the source code, you only have to make changes according to your need and your website will be ready within minutes. Here are some important domains that are available on the Bootstrap official website as examples: Album, Cover, Carousel, Blog, Dashboard, Sign In Page, Justified Nav, Sticky Footer and Sticky Footer with NavBar. There are also many additional examples you can find at the website. Here is the link - https://v4-alpha.getbootstrap.com/examples/ .
In this article, we saw what are the major differences and similarities between the two versions of Bootstrap, i.e. Bootstrap 3 and Bootstrap 4. We compared many different components such as global components, grids, tables, forms, buttons, dropdowns, navbars, pagination, labels, jumbotron, progress bars, glyphicons, typography, responsive usage and cards. Bootstrap 4 is very easy to use as compared to the earlier version and provides us with much additional functionality which makes our website look more beautiful and amazing.