Comprehensive overview of Bootstrap 4 features for user interface customizations
Bootstrap 4 is the latest version of Bootstrap at the time of writing. This version makes Bootstrap more powerful and easy to customize and use. In this article, you will learn about the new features of Bootstrap 4 with examples. I will assume that you already have some knowledge of Bootstrap and know how to create responsive websites using it. We will use Bootstrap 4 to design all the projects we will be building from this article onwards.
In this article, we’ll cover the following topics:
-
-
- Various ways to download Bootstrap 4
- The compatibility of Bootstrap 4
- Support for Flexbox
- Customizing Bootstrap 4
- Responsive CSS units
-
Downloading Bootstrap 4
To download Bootstrap 4, first visit http://v4-alpha.getbootstrap.com/getting-started/download/. Here, you will find various ways to download Bootstrap 4, depending on the package manager you use. You can also directly download the compiled version if the package manager you use is not listed or if you don’t use a package manager at all. This page also provides you with a link to download the source files.
It also provides custom builds, which are just parts of Bootstrap 4 that can be used when you just need a few features of Bootstrap 4 but not the whole library.
All major CDN services also support Bootstrap 4, so in case you want to queue it
from a CDN, you can easily find CDN URLs.
For this article, directly download the compiled version and place it in a new directory named bs4. In the same directory, create a file named index.html, and place the following code in it:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial- scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/ jquery/2.1.4/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
Browser and device support
Bootstrap 4 supports the latest stable releases of all major browsers and platforms.
In terms of compatibility, the only change Bootstrap 4 has brought in is that it drops support for Internet Explorer 8. Everything else remains the same as in Bootstrap 3.
Understanding the rem and em CSS units
Bootstrap 4 has switched from px to rem and em wherever possible. This is the main reason why Bootstrap 4 is not supported in IE 8 as IE 8 doesn’t support the em and rem units. Bootstrap 4 switched to rem and em because they make responsive typography and component sizing easier.
If you are not familiar with the rem and em CSS units, then it’s the right time to learn it.
The em unit is relative to the font size of the parent element. 1em is equal to the current font size of the parent element. 2em means two times the size of the current font. For example, if an element is displayed with a font size of 10 px, then 2em is
20 px. We can achieve responsive typography and components by just changing the parent element’s font size using CSS media queries for different viewport or device width sizes.
As em sizing is nested (it depends on parent element), if you have elements with 1.5em sizing and then nest some HTML with elements that also have an em declaration, their sizing multiplies.
The rem unit is similar to em but is relative to the font size of the HTML tag (root element). Therefore, it’s not nested.
The grid system
The only change made in the Bootstrap 4 grid system is that a new extra-large breakpoint has been added. The class prefix for this breakpoint is .col-xl-. Here are the Bootstrap 4 grid breakpoints after this new addition:
The .col-xl- breakpoint targets screen sizes of 1200px or larger, which was targeted by .col-lg- in Bootstrap 3. Therefore, this makes other breakpoints compress to target smaller screen sizes than they used to in Bootstrap 3. Here, you can see that
.col-xs- now targets a screen width of less than 544px instead of the 768px it did in Bootstrap 3, making it easier to target mobile devices and have different layouts for tablets and mobile devices, which was lacking in Bootstrap 3.
While Bootstrap uses em or rem for defining most sizes, px is used for grid breakpoints and container widths. This is because viewport width is in pixels and does not change with font size.
Here is an example of the new grid system. Place this code in the <body> tag of the index.html file:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu nunc, lobortis et lacinia ut, pellentesque quis lacus. Aliquam non dapibus erat
</p>
</div>
<div class=”col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2″>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu nunc, lobortis et lacinia ut, pellentesque quis lacus. Aliquam non dapibus erat
</p>
</div>
<div class=”col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2″>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu nunc, lobortis et lacinia ut, pellentesque quis lacus. Aliquam non dapibus erat
</p>
</div>
<div class=”col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2″>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu nunc, lobortis et lacinia ut, pellentesque quis lacus. Aliquam non dapibus erat
</p>
</div>
<div class=”col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2″>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu nunc, lobortis et lacinia ut, pellentesque quis lacus. Aliquam non dapibus erat
</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu nunc, lobortis et lacinia ut, pellentesque quis lacus. Aliquam non dapibus erat
</p>
</div>
</div>
</div>
A Bootstrap row can have 12 columns at the most. As here we have more than 12 columns in the row in some cases, the columns are wrapped, that is, columns are wrapped to a new line.
On mobile screens, the previous code will look like this:
On small tablets, it will look like this:
It will look like this on regular tablets:
Laptops users will see this:
Finally, on desktop monitors, it will look like this:
So, in Bootstrap 4, we are able to precisely target all types of device.
Global margin reset
For all elements, Bootstrap 4 resets margin-top to 0 while keeping a consistent
margin-bottom value on all elements.
For example, headings have margin-bottom: .5rem added, and paragraphs have
margin-bottom: 1rem for easy spacing.
Spacing utility classes
Bootstrap 4 adds a new set of utility classes called spacing utility classes. These classes allow you to quickly add spacing in any direction of an element via margin or padding.
The format of these classes is [margin or padding]-[direction]-[size].
For margin or padding, use the following:
- m for margin
- p for padding
For direction, you can use these:
- a for all
- t for top
- r for right
- l for left
- b for bottom
- x for left and right
- y for top and bottom You can use these for sizes:
- 0 for zero
- 1 for 1rem
- 2 for 1.5rem
- 3 for 3rem
Here is an example to demonstrate the spacing utility classes. Place this code at the end of the container element of index.html:
<hr>
<div class="row">
<div class="col-xs-12 m-t-2">
<p>
Lorem ipsum dolor sit amet, at suscipit sodales eget ante ultricies mauris. Etiam dolor felis morbi nibh, mollit porttitor tempor, dignissim magna pellentesque dictumst bibendum dictum integer. Justo mattis dapibus in diam. Quis arcu mauris mattis, orci est magna arcu scelerisque, integer gravida sit volutpat tellus, nulla enim quis. In non, in et, nec mauris in eu nec, nostra pellentesque nulla sodales, tempor neque ultrices lorem.
</p>
</div>
<div class=”col-xs-12 m-b-2″>
<p>
Lorem ipsum dolor sit amet, at suscipit sodales eget ante ultricies mauris. Etiam dolor felis morbi nibh, mollit porttitor tempor, dignissim magna pellentesque dictumst bibendum dictum integer. Justo mattis dapibus in diam. Quis arcu mauris mattis, orci est magna arcu scelerisque, integer gravida sit volutpat tellus, nulla enim quis. In non, in et, nec mauris in eu nec, nostra pellentesque nulla sodales, tempor neque ultrices lorem.
</p>
</div>
</div>
<hr>
Here is how the page looks now:
Here, you can see the top and bottom margin space created by the spacing utility classes.
Display headings
Traditional heading elements, namely h1, h2, and so on, are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style. Display heading classes can be applied to any element of a page.
Here is an example to demonstrate display heading. Place this code at the end of the container element of index.html:
<h1 class=”display-1″>Display-1</h1>
<h1 class=”display-2″>Display-2</h1>
<h1 class=”display-3″>Display-3</h1>
<h1 class=”display-4″>Display-4</h1>
<hr>
display-1, display-2, display-3, and display-4 are the display heading classes. Here is the output of the code:
Inverse tables
A new class for tables has been introduced, named table-inverse. This is just another variation of table in terms of looks.
Here is how to create an inverse table. Place this code at the end of the container element of index.html:
<table class=”table table-inverse”>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope=”row”>1</th>
<td>Ramesh</td>
<td>Kumar</td>
<td>@ramesh</td>
</tr>
<tr>
<th scope=”row”>2</th>
<td>Sudheep</td>
<td>Sahoo</td>
<td>@sudheep</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Abhinash</td>
<td>Singh</td>
<td>@abhi</td>
</tr>
</tbody>
</table>
<hr>
Here is how the table looks:
Outline buttons
Bootstrap 4 has added some new button styles with outline buttons. Outline buttons appear hollow or are simply inverses of regular buttons.
Here is example code to demonstrate outline buttons. Place this code at the end of the container element of index.html:
<hr>
<button type=”button” class=”btn btn-primary- outline”>Primary</button>
<button type=”button” class=”btn btn-secondary- outline”>Secondary</button>
<button type=”button” class=”btn btn-success- outline”>Success</button>
<button type=”button” class=”btn btn-warning- outline”>Warning</button>
<button type=”button” class=”btn btn-danger- outline”>Danger</button>
<hr>
Here is how the code looks:
Moving from Less to Sass
The Bootstrap 4 source is written in Sass instead of Less. Less was used until Bootstrap 3. This is great because Sass tends to be more favorable by frontend developers. It also compiles faster. Also, it doesn’t seem as if there are currently any plans for a Less version. You can find the source files at https://github.com/twbs/bootstrap/tree/v4-dev.
Text alignment and float utility classes
Utility classes for floats and text alignment now have responsive ranges. Bootstrap 4
has dropped nonresponsive text alignment and float classes.
Responsive text alignment classes are of the text-[xs/sm/md/lg/xl]-[left/ right/center] format. For example, the text-lg-left class left aligns text on viewports sized lg or wider.
Classes of the format pull-[xs/sm/md/lg/xl]-[left/right/none] float an element to the left or right or disable floating based on the current viewport size. For example, the pull-xs-left class floats the element left on all viewport sizes.
Here are related articles if you wish to learn more advance topics for web development:
Best practices for securing and scaling Node.JS applications
Comprehensive overview of Angular 2 architecture and features
How Bootstrap 4 extensible content containers or Cards work
Comprehensive guide for migration from monolithic to microservices architecture
Intro to functional reactive programming for advance js web development
Using advance js and webrtc for cross browser communications in real time
Intro to real-time bidirectional communications between browsers and webSocket servers
Junior or senior web developers can also explore career opportunities around blockchain development by reading below articles:
Blockchain Developer Guide- Comprehensive Blockchain Ethereum Developer Guide from Beginner to Advance Level
Blockchain Developer Guide- Comprehensive Blockchain Hyperledger Developer Guide from Beginner to Advance Level