Bootstrap 4 Dashboard
Plus off-canvas sidebar, based on Bootstrap v4
Users
134
Posts
87
Tweets
125
Shares
36
Responsive
Device agnosticFrontend
UI / UX orientedHTML5
Standards-basedFramework
CSS and JavaScriptAre 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.
| # | 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.
The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".
There are also some interesting new text classes for uppercase and capitalize.
If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.
Masonry-style grid columns
with Bootstrap 4 flexbox
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.
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.
Clever heading
This card has supporting text below as a natural lead-in to additional content.
Last updated 5 mins ago
There are also some interesting new text classes to uppercase or capitalize.
Responsive
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-capitalizeCapitalize each wordtext-uppercaseUppercase texttext-successContextual colors for texttext-mutedLighten with mutedtext-infoInfo text colortext-dangerDanger text colortext-warningWarning text colortext-primaryPrimary text color
Heading
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
Replaced with .card
All of these Bootstrap 3.x components have been dropped entirely for the new card component.
Home
1. These Bootstrap 4 Tabs work basically the same as the Bootstrap 3.x tabs.
Pro
2. Tabs are helpful to hide or collapse some addtional content.
Messages
3. You can really put whatever you want into the tab pane.
Settings
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.