Edit on Codeply

Bootstrap 4 Dashboard

Plus off-canvas sidebar, based on Bootstrap v4









Generic placeholder thumbnail


Device agnostic
Generic placeholder thumbnail


UI / UX oriented
Generic placeholder thumbnail


Generic placeholder thumbnail


CSS and JavaScript

Are you ready for Bootstap 4? It's the 4th generation of this popular responsive framework. Bootstrap 4 will include some interesting new features such as flexbox, 5 grid sizes (now including xl), cards, `em` sizing, CSS normalization (reboot) and larger font sizes.

Card image cap


Flexbox provides simpler, more flexible layout options like vertical centering.



Flexbox is now the default, and Bootstrap 4 supports SASS out of the box.

# Label Header Column Data
1,001 responsive bootstrap cards grid
1,002 rwd web designers theme responsive
1,003 free open-source download template
1,003 frontend developer coding card panel
1,004 migration bootstrap 4 mobile-first design
1,005 navbar sticky jumbtron header
1,006 collapse affix submenu flexbox
1,007 layout examples themes grid
1,008 migration bootstrap 4 flexbox design

Use card decks for equal height rows of cards

It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.

Makes flexible layouts Faster

The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".

All of this makes more Sense

There are also some interesting new text classes for uppercase and capitalize.

These handy utilities make it Easy

If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.

The Glyphicons are not Included

Masonry-style grid columns

with Bootstrap 4 flexbox
Card image cap

New XL Grid Tier

With screens getting smaller, Bootstrap 4 introduces a new grid breakpoint with the col-xl-* classes. This extra tier extends the media query range all the way down to 576 px. Eventhough the new XL tier would make one think it’s been added to support extra large screens, it’s actually the opposite.

Bootstrap 4 will be lighter and easier to customize.

Someone famous like Mark Otto
Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Create masonry or Pinterest-style card layouts in Bootstrap 4.

Someone famous in Bootstrap

Clever heading

This card has supporting text below as a natural lead-in to additional content.

Last updated 5 mins ago

Card image

There are also some interesting new text classes to uppercase or capitalize.

Someone famous in Bootstrap


This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

  • text-capitalize Capitalize each word
  • text-uppercase Uppercase text
  • text-success Contextual colors for text
  • text-muted Lighten with muted
  • text-info Info text color
  • text-danger Danger text color
  • text-warning Warning text color
  • text-primary Primary text color


So now that you've seen some of what Bootstrap 4 has to offer, are you going to give it a try?

Last updated 12 mins ago

Interesting layouts and elements

Bye .well, .panel & .thumbnail

Replaced with .card

All of these Bootstrap 3.x components have been dropped entirely for the new card component.


1. These Bootstrap 4 Tabs work basically the same as the Bootstrap 3.x tabs.


2. Tabs are helpful to hide or collapse some addtional content.


3. You can really put whatever you want into the tab pane.


4. Some of the Bootstrap 3.x components like well and panel have been dropped for the new card component.

This is a Bootstrap 4 accordion that uses the .card classes instead of .panel. The single-open section aspect is not working because the parent option (dependent on .panel) has not yet been finalized in BS 4 alpha.

Just like it's predecesor, Bootstrap 4 is mobile-first so that you start by designing for smaller devices such as smartphones and tablets, then proceed to laptop and desktop layouts.

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles.

Get this Bootstrap 4 admin dashboard at Codeply