What you notice first in Bootstrap 4 is that
.well have been replaced by the
.card. This makes a lot of sense as "cards" are one of the more well known trends in responsive design.
The Bootstrap 4 Cards can be singular, grouped together (as shown) or equal height. There are many different layout and content options.
Cards are a good way to display content composed of different types of objects. They’re well-suited for presenting similar objects whose size or supported actions vary, like headings and photos with captions.
Use card groups to render equal height cards without gutters between the cards. Use
.card-deck for cards that aren’t attached to each another.
A frequent problem occurs when you have multiple items in a row with content of varying height. Thanks to flexbox (and display:table) we now have equal height cards!
To accomodate a variety of devices and screen widths
Text is larger in Bootstrap 4. The default font size is now 16px. There are also new "Display headings" that really stand out. The new `em` based sizing is cool too.
The new Bootstrap 4
.navbar code is lighter. You can make it responsive using the Collapse component and
.navbar-toggleable-* classes that enable you to control the breakpoint.
Some components have been removed from Bootstrap 4. The Glyphicons icon fonts are no longer included, but it's easy to utilize another font like FontAwesome, Octicons or Ionicons. The Affix jQuery plugin has also been dropped. The new recommendation is to use HTML5 position: sticky or a sticky polyfill instead.
text-capitalizeCapitalize each word
text-lowercaseThere is lowercase too
text-truncatesome longer text that won't wrap and will truncate with ellipsis at the end.
list-inline > li=
nav-itemto nav navbar > li
nav-linkto nav navbar > li > a
activeclass is added to
carousel-inner > item=
We love feedback. Fill out the form below and we'll get back to you as soon as possible.