Bootstrap 4 Reference

This article is in fact a quick reference to Bootstrap 4. It covers most, if not all of the major components of Bootstrap 4, and borrows extensively from w3schools.com, where you can find many "Try it Yourself" examples, that are well worth a look.

To quickly see how each component is achieved, select the text and right click. Then on Chrome, chooose Inspect, and on Firefox choose either, View Selection Source or Inspect Element

Column 1

This is column 1 of a three column row

Styled using the col-sm-4 class.

Column 2

This is column 2 of a three column row

Resize the page to see how the columns collapse.

Column 3

This is column 3 of a three column row

A row can have up to 12 columns, and each column can hav further rows and columns nested within it, leading to infinite possibilities.

.col
.col
.col
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-4
.col-sm-8

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)

Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):

Display 1

Display 2

Display 3

Display 4


Lighter, Secondary Text

The small element is used to create a lighter, secondary text in any heading:

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text

Highlight Text

Use the mark element to highlight text.


Abbreviations

The abbr element is used to mark up an abbreviation or acronym:

The EU is a political and economic union of 28 member states that are located primarily in Europe.


Blockquotes

The blockquote element is used to present content from another source:

The EU values are common to the member countries in a society in which inclusion, tolerance, justice, solidarity and non-discrimination prevail. These values are an integral part of our European way of life:

From EU's website

Description Lists

The dl element indicates a description list:

Coffee
- black hot drink
Milk
- white cold drink

Code Snippets

Inline snippets of code should be embedded in the code element:

The following HTML elements: span, section, and div defines a section in a document.


Keyboard Inputs

To indicate input that is typically entered via the keyboard, use the kbd element:

Use ctrl + p on Windows, or cmd + p on Mac to open the Print dialog box.


Multiple Code Lines

For multiple lines of code, use the pre element:

      Text in a pre element
      is displayed in a fixed-width
      font, and it preserves
      both      spaces and
      line breaks.
      

Typography

The class .list-unstyled removes the default list-style and left margin on list items (immediate children only):


Typography

The class .list-inline places all list items on a single line, when used together with the .list-inline-item:


Contextual Colours

Use the contextual classes to provide "meaning through colors":

.text-muted This text is muted.

.text-primary This text is important.

.text-success This text indicates success.

.text-info This text represents some information.

.text-warning This text represents a warning.

.text-danger This text represents danger.

.text-secondary Secondary text.

.text-dark This text is dark grey.

.text-light This text is light grey.

.text-white This text is white.


Contextual Link Colours

Hover over the links.

Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary link. Dark grey link. Light grey link.

Contextual Backgrounds

Use the contextual background classes to provide "meaning through colours".

Note that you can also add a .text-* class if you want a different text colour:

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.


Rounded Corners

The .rounded class adds rounded corners to an image:

Laptop

Circle

The .rounded-circle class shapes the image to a circle:

Laptop

Thumbnail

The .img-thumbnail class creates a thumbnail of the image:

Laptop

Image

The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):

Mobile Phone

Bootstrap 4 Available Now

A .jumbotron indicates a big grey box for calling extra attention to some special content or information.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.


Bootstrap 4 Available Now

A full width jumbotron (jumbotron jumbotron-fluid) indicates a big grey box for calling extra attention to some special content or information.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.


Alerts

Alerts are created with the .alert class, followed by a contextual color classes:

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.

Alerts

The button with class="close" and data-dismiss="alert" is used to close the alert box.

The alert-dismissible class adds some extra padding to the close button.

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.

Animated Alerts

The .fade and .show classes adds a fading effect when closing the alert message.

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.

Button Styles


Button Elements

Link Button


Block Level Buttons

Large Block Level Buttons

Small Block Level Buttons


Button States

Disabled Link

Button Group

The .btn-group class creates a button group:


Button Groups Sizes

Add class .btn-group-* to size all buttons in a button group.

Large Buttons:

Default Buttons:

Small Buttons:


Vertical Button Group

Use the .btn-group-vertical class to create a vertical button group:


Nesting Button Groups

Nest button groups to create dropdown menus:


Split Buttons


Vertical Button Group with Dropdown


Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Contextual Badges

Primary Secondary Success Danger Warning Info Light Dark

Pill Badges

Primary Secondary Success Danger Warning Info Light Dark

Badge inside a Button


Basic Progress Bar

To create a default progress bar, add a .progress class to a container element and add the progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:


Striped Progress Bars

The .progress-bar-striped class adds stripes to the progress bars:






Animated Progress Bar

Add the .progress-bar-animated class to animate the progress bar:


Multiple Progress Bars

Create a stacked progress bar by placing multiple bars into the same div with class="progress":

Free Space
Warning
Danger

Pagination

To create a basic pagination, add the .pagination class to an ul element. Then add the .page-item to each li element and a .page-link class to each link inside li:


Pagination - Active State

Add class .active to let the user know which page he/she is on:


Pagination - Disabled State

Add class .disabled if a page for some reason is disabled:


Pagination - Sizing

Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.

Large:

Default:

Small:


Breadcrumbs

The .breadcrumb class indicates the current page's location within a navigational hierarchy:


Basic List Group

To create a basic list group, use an ul element with class .list-group, and li elements with class .list-group-item:

Active Item in a List Group

Use the .active class to highlight the current item:


List Group With a Disabled Item

To disable an item, add the .disabled class:


List Group With Linked Items

To create a list group with linked items, use div instead of ul and a instead of li. Also add the .list-group-item-action class if you want a grey background colour on hover:


List Group With Contextual Classes

The classes for colouring list-items are: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark and list-group-item-light


Linked Items With Contextual Classes

Move the mouse over the linked items to see the hover effect:


Cards

A card in Bootstrap 4 is a bordered box with some padding around its content. It includes options for headers, footers, content, colours, etc.

A basic card is created with the .card class, and content inside the card has a .card-body class:

Basic Card

Basic card

Card Header and Footer

Header
Content

Panels with Contextual Classes

Basic card

Primary card

Success card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card

Card titles, text, and links

Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a p element if it is the last child in the card-body. The .card-link class adds a blue colour to any link, and a hover effect.

Card title

Some example text. Some example text.

Card link Another link

Card Image

Image at the top (card-img-top):

Card image

John Doe

Some example text some example text.

See Profile

Image at the bottom (card-img-bottom):

Jane Doe

Some example text some example text.

See Profile
Card image

Card Image Overlay

Turn an image into a card background and use .card-img-overlay to overlay the card's text:

Card image

John Doe

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile

Dropdowns

The .dropdown class is used to indicate a dropdown menu.

Use the .dropdown-menu class to actually build the dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".


Dropdown Divider

The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal line:


Dropdown Header

The .dropdown-header class is used to add headers inside the dropdown menu:


Dropdown Active / Disabled

The .active class adds a blue background color to the active link.

The .disabled class disables a dropdown item (grey text colour and a no-parking-sign on hover).


Dropdown Menu Right

Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu:


Dropdown - Up

The .dropup class makes the dropdown menu expand upwards instead of downwards:


Dropdown Split Buttons With Contextual Classes


Collapsibles

Collapsibles are useful when you want to hide and show large amount of content:

Simple Collapsible

Click on the button to toggle between showing and hiding content.

To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an a or a button element. Then add the data-target="#id" (e.g data-target="#demo") attribute to connect the button with the collapsible content (<div id="demo"> some content </div>).

Simple Collapsible Using Anchor Tag

Simple collapsible
For a elements, you can use the href attribute instead of the data-target attribute:

Simple Collapsible To Hide

By default, the collapsible content is hidden. However, you can add the .show class to show the content by default:

Click on the button to toggle between hiding the content and showing it again.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion Example

Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.


Nav Menus

If you want to create a simple horizontal menu, add the .nav class to a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links:

Nav

Basic horizontal menu:


Aligned Nav

Add the .justify-content-center class to center the nav, and the .justify-content-end class to right-align the nav.

Centered nav:

Right-aligned nav:


Vertical Nav

Use the .flex-column class to create a vertical nav:


Tabs

Navigation tabs: Use the .nav-tabs class to create a tabbed navbar. Also add the .active class to the active/current link.


Pills

Navigation pills: Take that same HTML, but use .nav-pills instead.


Justified Tabs/ills

Justify the tabs/pills with the .nav-justified class.

Justified Pills


Justified Tabs


Pills with Dropdown


Tabs with Dropdown


Toggleable Tabs/Pills



HOME

To make the tabs toggleable, add the data-toggle="tab" attribute to each link.Then add a .tab-pane class with a unique ID for every tab and wrap them inside a<div> element with class .tab-content.


Navigation Bars

A navigation bar is a navigation header that is placed at the top of the page:

Basic Navbar


The navbar-expand-xl | lg | md | sm class determines when the navbar should stack vertically (on extra large, large, medium or small screens).


Vertical Navbar

To create a vertical navbar, in this case just remove the .navbar-expand-sm


Coloured Navbars

Use any of the .bg-color classes to change the background colour of the navbar, (.bg-primary, .bg-success, .bg-info), etc, etc. To Add a white text colour to all links in the navbar with the .navbar-dark class, or use the .navbar-light class to add a black text colour.


Brand / Logo

The .navbar-brand class is used to highlight the brand/logo/project name of your page.


Collapsing Navigation Bar

To create a collapsible navigation bar, use a button with class="navbar-toggle", data-toggle="collapse" and data-target="#collapsibleNavbar". Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse", followed by an id that matches the data-target of the button, in this case:- "collapsibleNavbar".



You can add a <form> element with class="form-inline" to group inputs and buttons side-by-side:


You can also use other input classes, such as .input-group-addon to attach an icon or help text next to the input field. You will learn more about these classes in the Bootstrap Inputs chapter.


Navbar Text

Navbars may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text.


Navbar Placement


Forms

Stacked Forms

We'll never share your email with anyone else.

Inline Forms


Form controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

For file inputs, swap the .form-control for .form-control-file.


Sizing

Set heights using classes like .form-control-lg and .form-control-sm.


Readonly plain text

If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.


Checkboxes and Radios

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.

Inline Checkboxes and Radios

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.


Carousel

The carousel is a slideshow for cycling through a series of content. They are built using CSS 3D transforms and JavaScript.


Modals

The Modal component is a dialog box/popup window that is displayed on top of the current page:


Tooltips

Tooltips are opt-in for performance reasons, so you must initialize them yourself using jQuery. One way to initialize all tooltips on a page would be to select them by their data-toggle attribute: using the following script

      <script>

        $(function () {
          $('[data-toggle="tooltip"]').tooltip();
        });

      </script>
      

Popover

The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content. again popovers are opt-in for performance reasons, so you must initialize them yourself using jQuery. One way to initialize all popovers on a page would be to select them by their data-toggle attribute: using the following script

      <script>

        $(function () {
          $('[data-toggle="popover"]').popover();
        });

      </script>