While Bootstrap 4 has polished up on the features of the previous major release, Bootstrap 3, several new features have been introduced to keep Bootstrap a solid, modern front-end web framework.
There is a new column breakpoint introduced in Bootstrap 4, Extra Large! Currently the Bootstrap 4 columns are as follows:
|Extra Small (col-xs)||<576px|
|Extra Large (col-xl)||>1200px|
Compared to the previous breakpoints in Bootstrap 3:
|Extra Small (col-xs)||<768px|
Flexbox support for Bootstrap has landed in the new version 4. It offers some useful features such as auto-columns and vertical alignment. It is not enabled by default due to web developers who need to cater for legacy Internet Explorer users, where there is only partial support.
With bootstrap’s flexbox grid, you don’t need to specify the size of the column. Useful for dynamic content, for example:
<div class="container"> <div class="row"> <div class="col-xs"> 1 of 3 </div> <div class="col-xs"> 1 of 3 </div> <div class="col-xs"> 1 of 3 </div> </div> </div>
The code above will generate three columns of equal size. Developers can also specify a size for one column and the rest of the columns will fill their available space. See Bootstrap v4 docs regarding auto-layout columns for more information.
The cards component in Bootstrap 4 merges a lot of the Bootstrap 3 components together, which shared similar functionality. This has greatly reduced the file size of Bootstrap which is crucial for page performance when loading for end-users in rural areas or via slow mobile networks.
Bootstrap 4 Cards has replaced the following components from Bootstrap 3:
These all essentially work as a content container, therefore with cards, web developers can add card headings, footer and even embed list groups.
In Bootstrap 3, LESS was the pre-processor of choice. This has now been switched to SASS/SCSS.
rem is now the unit size of choice, which was
px in Bootstrap 3.
rem is used where the size of an element will be affected by the sizing of the typography.
Ghost buttons (referred to as Outline Buttons) are a common trend on websites, in recent years. These are usually used as call-to-action buttons in Jumbotrons.
Do you require a new Bootstrap 4 powered website, or have an existing site that needs to be migrated over to Bootstrap 4? Contact us on our website or give us a call on: 01785 250 222