Figure 1: The awaited announcement
The notice has been on the site for what seems like ages, and yes, like many people who use Bootstrap on a regular basis, I too have been wondering what’s going on. I’ve tried to get an answer from the team, and been met with silence. Rather than waiting any longer, it seems like a good time to cover the things stuck in perpetual alpha now!
What’s All the Fuss About?
Bootstrap 4 is a re-write of the library. Based on the comments, the team behind the update is determined to use as many new HTML5 and Web features as possible. That alone could explain the delay, because of how fast things change in Web technology.
Bootstrap 4 is a complete “out with the old and in with the new” build that sees much of the original CSS classes and base mark-up completely removed. This means that upgrading existing applications from Bootstrap 3 to Bootstrap 4 is not going to be simple. The team is also focusing almost entirely on Mobile first with displays for desktop and large format being the “poor cousin.” This doesn’t mean that their abandoning large format displays, but when the funky juice gets dished out, mobile first features will be given higher priority than non-mobile.
One of the biggest changes is to the grid system. Most of us know (and love) Bootstrap’s responsive grids. With Bootstrap’s responsive grids, it is just so easy to lay out things for your Web app screen in a way that looks clean and is automatically responsive.
The grid system now uses “Flexbox” display technology, which, if you’re not aware, is the best thing since sliced bread or floats (whichever floats your boat… yes, there was a pun intended there. Okay, I’ll give up on the comedy career). With Bootstrap 4, the Bootstraps grid basically received super powers, as Figure 2 from the Bootstrap 4 blog shows.
Figure 2: The Boostrap 4 Flex Grid
The alignment possibilities in the updated grid are worth their weight in gold, but they come at an expense. That expense is the loss of IE9 compatibility. Bootstrap 4 is now only compatible with Internet Explorer 10 or later. Of course, the latest versions of Chrome and Firefox have no problems with any of this.
There are still many corporate environments that still use lesser versions of IE, so the update might cause a few problems. The official advice, thus, is simple, if you need to support IE9 or earlier, then stick with Bootstrap 3. Speaking of which….
What’s the Deal with Bootstrap 3?
Going forward, the Bootstrap team is now focusing ALL of its energy on Bootstrap 4. There will be no more new functionality or updates to version 3.
Major and security bugs will still be fixed, but there will be no new Bootstrap 3 versions. All new functionality will be added to the V4 branch instead. Bootstrap 3 is not going anywhere. It, along with the docs, will be available, so those using it won’t be left high and dry. Bootstrap 3 is basically going to be the current “Stable Long Term” version and V4 the latest and greatest cutting edge version.
What’s New in Bootstrap 4?
There are a number of new things in Bootstrap 4. One of the simple new things is buttons. To get a look, fire up your text editor and chuck in the following HTML;
<!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-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/
AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/
a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/
js/tether.min.js"
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk
5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+
02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
</body>
</html>
This is the official Bootstrap 4 base page template that you should use to get the most from the new version. The required scripts are loaded from a CDN, and the device zooming and sizing capabilities are specified.
Remove the <h1> tag containing ‘hello world’ and replace it with the following:
<div class="container-fluid">
<div class="row" style="padding: 10px;">
<div class="col-md-3">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>
<div class="col-md-3">
<p class="lead">To the left of me we have some buttons</p>
<p>Nothing amazing, but buttons never the less</p>
<p>This text is in the middle column of 3</p>
</div>
<div class="col-md-3" style="border: 1px solid black; padding: 4px;">
<p>This text is in the third column of three</p>
</div>
</div>
</div>
You should get something like this:
Figure 3: Adding the buttons
You also might want to add the following to get a bit of spacing around the buttons:
<style>
.btn
{
margin: 6px;
}
</style>
You’ll notice that nothing much has changed. The .col classes you’re used to are still the same, the button classes are also still the same, but there are some minor changes under the hood. First off, you’ll notice the nesting.
Doing the following is no longer an option as it was in Bootstrap 3:
Class= 'container-fluid'=>'row'=>'col-md-3'
If you don’t nest your div tags correctly, and just try to use the classes randomly, your layout won’t work as expected. This is largely due to the change to Flexbox. For Flexbox to work, you need to have a parent/child relationship.
Although I don’t show it, on a related note, anything using the ‘-xs’ (extra small prefix) has been removed. There is no longer ‘x,’ ‘sm,’ ‘md,’ and ‘lg’ sizes. Instead, the ‘sm,’ ‘md,’ and ‘lg’ sizes have remained, and there is now an ‘xl’ (extra large) column size, as well as a ‘Non prefixed’ version, which basically means “too small to be covered by anything else.” The sizing is as follows:
|
Extra Small <576px |
Small >=576px |
Medium >=768px |
Large >=992px |
Extra Large >=1200px |
|
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| Default number of columns | 12 | ||||
| Gutter width | 30px (15px on each side) | ||||
| Nestable | Yes | ||||
| Offsets | Yes | ||||
| Column Ordering | Yes | ||||
The interesting part comes in if you use unitless columns; that is, if you use ‘col-md-2’ or even just ‘col-4’ (in the case of extra small), and specify just ‘col’ on its own, the columns will use Flexbox to auto size and fill the available space. For example:
| Col-md-2 | Col-md-2 with offset 2 | ||
| Col-md-3 | Col-md-2 with offset 1 | ||
| Col | Col | ||
| Col | Col | Col | |
The grey columns use the traditional fixed size classes, allowing you to specifically set up spaces. The blue columns use the ‘col’ class name with no sizing, and, as you can see, the columns automatically share out the available space equally. If you want to see more examples of Flexbox grids in action, there’s plenty to wow you in the documentation.
Other Buttons in Bootstrap 4
Keeping with the theme, the buttons don’t appear very different either because, for at least the base buttons, they are not very different! There is, however, a entire new extra set of buttons, called ‘Outline buttons.’
Add the following, with your other buttons:
<button type="button" class="btn btn-outline-primary"> Primary </button> <button type="button" class="btn btn-outline-secondary"> Secondary </button> <button type="button" class="btn btn-outline-success"> Success </button> <button type="button" class="btn btn-outline-info"> Info </button> <button type="button" class="btn btn-outline-warning"> Warning </button> <button type="button" class="btn btn-outline-danger"> Danger </button>
Your buttons should now look like:
Figure 4: The new set of buttons
There also are now only two alternate button sizes—’btn-sm’ and ‘btn-lg’—but ‘btn-block’ still exists so you can size and fill a container with a button, using column classes.
Introducing Bootstrap 4 Cards
One of items I made a lot of use of in Bootstrap 4 is one that you might have also used. This is panels. In Bootstrap, panels, along with wells and thumbnails, have all been replaced by a new component called a ‘card.’ Cards are designed to be the new general purpose container for producing sectioned off areas of a document, and are now used exclusively by things like the media list classes and accordions, amongst others.
A simple basic card looks like the following:
Figure 5: A primordial card
And that’s produced by using the following code:
<div class="card" style="width: 20rem;">
<img class="card-img-top"
src="https://placehold.it/318x180"
alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text
to build on the card title and make up the bulk
of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Just like panels, you can specify title bars, footer bars, and add context colouring, as well as many other things.
You can easily mix and match internal content types:
Figure 6: A more complex card
You can do this with very little code:
<div class="card" style="width: 20rem;">
<img class="card-img-top"
src="https://placehold.it/318x180"
alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build
on the card title and make up the bulk of the card's
content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-block">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
You can create fancy centered text cards with headers and footers:
Figure 7: A fancy, intricate card
Again, this is done using a remarkably small amount of mark-up:
<div class="card text-center">
<div class="card-header">
Featured
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a
natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
Although some might mourn the loss of panels, and their associated brethren, cards are actually way more powerful and flexible. You can use cards with the Flexbox grid systems, allowing you to create layouts where all card items are of identically equal height, and have horizontal and vertical centering with ease that Web developers have never had before.
Even More in Bootstrap 4
For this article, we’ve covered quite a bit; however, there’s simply not enough room in one article to explore everything that the card component has to offer, let alone all of Bootstrap 4. In fact, there is so much new stuff that you really need to start playing with Bootstrap 4 right now. The team is currently on the verge of releasing their first Beta version!
About the Author
There is enough coming with Bootstrap 4, that you could write a book about it. In fact, Peter Shaw is writing a book that (when published) will be published in the succinctly eBook collection from Syncfusion. You can find Peter at @shawty_ds on Twitter, or just search for ‘shawty_ds’ in Google.
