Tag name

Description

Example

alert-primary

<div class="alert alert-primary" role="alert">
Text message to be displayed
</div>

Text message to be displayed. 

alert-secondary

<div class="alert alert-secondary" role="alert">
Text message to be displayed
</div>

Text message to be displayed. 

alert-success

<div class="alert alert-success" role="alert">
Success text to be displayed
</div>

Success message to be displayed.

alert-info

<div class="alert alert-info" role="alert">
Info message to be displayed
</div>

Info message to be displayed

alert-warning

<div class="alert alert-warning" role="alert">
Warning message to be displayed
</div>

Warning message to be displayed

alert-danger

<div class="alert alert-danger" role="alert">
Error message to be displayed, something really went wrong
</div>

Error message to be displayed, something really went wrong

alert-light

<div class="alert alert-light" role="alert">
Light font and style to display alert</div>

Light font and style to display alert

alert-dark

<div class="alert alert-dark" role="alert">
Dark font and style to display alert message
</div>

Dark font and style to display alert message

alert-link

Add a link in the alert class

<div class="alert alert-dark" role="alert">
  <a href="#!" class="alert-link">I am an alert link</a>
</div>

I am an alert link

alert-dismissible

<div class="alert alert-info alert-dismissible">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    Alert message with dismissible (closing) link
  </div>

can be used with any other alert class like info, success, danger etc for styling

Alert message with dismissible (closing) link             × 

alert-heading

<h4 class="alert-heading">Alert success with heading</h4>

can be used with any other alert class like info, success, danger etc for styling

Alert success with heading

badge 

Add badge, the same size of the previous (immediate) parent element by using em units and similar font size

<h1>Heading text <span class="badge badge-secondary">Badge same size as heading text</span></h1>

badge-pill

used to make badges more rounded

<span class="badge badge-pill badge-primary">Primary</span>

badge-primary

apply css styling corresponding to the primary badge

<span class="badge badge-primary">Primary badge text variation</span>

Primary badge text variation

badge-secondary

apply css styling corresponding to the secondary badge

<span class="badge badge-primary">Secondary badge text variation</span>

Secondary badge text variation

badge-success

styling to display badge indicating success

Success badge

badge-info

styling to display badge indicating info

Info badge

badge-warning

styling to display badge indicating warning

Warning badge

badge-danger

styling to display badge indicating danger

Danger badge

badge-light

styling to display badge indicating light background

Light badge

badge-dark

styling to display badge indicating dark background

Dark badge

breadcrumb

indicate location of current page along with its navigation hierarchy separated through CSS separators using ::before and content

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Root</a></li>
    <li class="breadcrumb-item active" aria-current="page">packages</li>
  </ol>
</nav>

Root / packages

btn

basic button feature

<button type="button" class="btn">Basic</button>

btn-primary

display buttons with particular style for each class, for example, primary displays button with blue background

<button type="button" class="btn-primary">Primary</button>

btn-secondary

displays button with grey background

<button type="button" class="btn-secondary">secondary button</button>

btn-success

displays button with green background

<button type="button" class="btn-success">Success</button>

btn-info

button with background for info – light blue

<button type="button" class="btn-info">Info button</button>

btn-warning

yellow background for warning button

<button type="button" class="btn-warning">Warning button</button>

btn-danger

red background for danger button

<button type="button" class="btn-danger">Danger</button>

btn-light

light colored button

<button type="button" class="btn-light">light button</button>

btn-dark

dark colored button (black)

<button type="button" class="btn-dark">Dark button </button>

btn-link

button with link 

<button type="button" class="btn-link">link in button</button>

btn-outline-primary

Button with outline and text color same as the primary (blue)

<button type="button" class="btn-outline-primary">Primary outline</button>

btn-outline-secondary

Button with outline and text color same as the secondary (grey)

<button type="button" class="btn-outline-secondary">secondary outline</button>

btn-outline-success

Button with outline and text color same as the success (green)

<button type="button" class="btn-outline- success "> success outline</button>

btn-outline-info

Button with outline and text color same as the info (light blue)

<button type="button" class="btn-outline- info "> info outline</button>

btn-outline-warning

Button with outline and text color same as the warning (yellow)

<button type="button" class="btn-outline- warning "> warning outline</button>

btn-outline-danger

Button with outline and text color same as the danger (red)

<button type="button" class="btn-outline- danger "> danger outline</button>

btn-outline-light

Button with outline and text color same as the light (white)

<button type="button" class="btn-outline-light">light outline and text</button>

btn-outline-dark

Button with outline and text color same as the secondary (black)

<button type="button" class="btn-outline-dark">Dark outline</button>

btn-group

used to group series of buttons together

<div class="btn-group">
--individual button items
</div>

btn-group-lg

to create group of large buttons

<div class="btn-group btn-group-lg">--individual button items</div>

btn-group-sm

to create group of small buttons

<div class="btn-group btn-group-sm">--individual button items</div>

btn-group-vertical

to create group of vertically arranged buttons

<div class="btn-group- vertical ">--individual button items</div>

btn-group (nested)

used to create dropdown menus. Use class dropdown-toggle, with data-toggle option as dropdown

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       ButtonGroupItem
    </button>
    <div class="dropdown-menu">
     --add dropdown menu items
    </div>
 </div>

btn-toolbar

to create multiple button groups side by side

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group" aria-label="grp1">
    --group one button types
  </div>
  <div class="btn-group" role="group" aria-label="grp2">
    --group two button types
  </div>
</div>

btn-lg 

to create button of larger size than the default size

<button type="button" class="btn-primary btn-lg">Large</button>

btn-sm 

to create button of size smaller than the default size

<button type="button" class="btn-primary btn-sm">Small</button>

btn-block 

To create full width buttons that occupy the entire horizontal row

<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>

active button 

makes a button look like it is pressed

<button type="button" class="btn btn-primary active">Active button with style of primary</button>

disabled button 

button that cannot be clicked (is disabled)

<button type="button" class="btn btn-warning" disabled>Disabled button</button>

for a link (<a>), disabled has to be used in the class - class="btn btn-warning disabled”

checkbox as button 

display checkboxes as buttons, same can be done with radio using the input type as radio.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> checkbox1
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> checkbox2
  </label>
</div>

spinner buttons

add spinner (the loading circle component) to a button

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

card 

card is like a business card having padding around the content. There are options for header, content, footer etc..

<div class="card">

card-body 

holds the content of the card

  <div class="card-body">Contents of the card</div>

card-title 

The title of card that is displayed on top

<h2 class="card-title">Title of card in h2</h2>

card-subtitle 

Adds subtitle or quick small text

<h6 class="card-subtitle">Card subtitle</h6>

card-text 

Add lot of text and paragraphs to the card

<p class="card-text">text.text.text</p>

card-link 

To add a link to a card; multiple links can be added

<a href="#!" class="card-link">link in the card</a>

card-img-top 

the main card image shown on the top

<img class="card-img-top" src="myimpimage.png">

middle image 

To display an image in the middle, no need to specify card image class as top or bottom, just add the image tag.

<img src="myimpimage.png">

card-img-bottom 

display image after the card content

<img class="card-img-bottom" src="myimpimage.png">

card-img-overlay 

To display image in the background. Can contain text over it.

<div class="card-img-overlay">
    <p class="card-text">See the image at background</p>
  </div>

list-group 

list of items in a card

 <ul class="list-group">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
  </ul>

card-header 

add header for a card

<div class="card-header">
    This is text for card header
  </div>

h*.card-header 

card header with particular heading size, h1-h6

  <h3 class="card-header">Card header in h3</h3>

card-footer 

footer for the card

<div class="card-footer">
    footer content
  </div>

card-group 

contains multiple cards side by side without any margins

<div class="card-group"> …card 1 div tags
…card 2 div tags
</div>

card-deck 

creates cards side by side with margins. All cards are of equal size (height and width)

<div class="card-deck"> …card 1 div tags
…card 2 div tags
</div>

card-columns 

cards are displayed as a grid with rows and columns that adjust automatically as cards are added or removed

<div class="card-columns"> …card 1 div tags
…card 2 div tags
</div>

card bg-... text-...

used to style the cards by formatting with different colors for text and background

<div class = "card text-<color> bg-<color>">
</div>

carousel slide 

adds animation and CSS transition effect while moving from one slide to next. 

<div class="carousel slide" data-ride="carousel">

carousel-fade 

adds a fading effect when slide changes from one to next

<div class="carousel slide carousel-fade" data-ride="carousel">

carousel-inner

contains individual slides to the carousel

<div class="carousel-inner">

carousel-item

Add an individual item (slide) to the carousel. The current (first) item is marked as active

<div class="carousel-item">
<div class="carousel-item active">

carousel-indicators 

indicates the number of slides, current slide being shown as dots/bars at the bottom of the carousel

<ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
</ul>

carousel-caption

Adds caption for individual slides (carousel-item)

<div class="carousel-caption">

carousel-control-prev

left control

  <a class="carousel-control-prev" href="#demo" data-slide="prev"></a>

carousel-control-next

right control

  <a class="carousel-control-next" href="#demo" data-slide="prev"></a>

collapse 

provides basic expand/collapse functionality

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#expandcollapse" aria-expanded="false" aria-controls="expandcollapse">
    Click to expand/collapse
  </a>
</p>
<div class="collapse" id="expandcollapse">
  <div class="card card-body">
    lot of text
  </div>
</div>

accordion

accordion collapsible format using the card component

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" href="#item1">
        Item #1
      </a>
    </div>
    <div id="item1" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        text for expand/collapse
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#item2">
       Item #2
      </a>
    </div>
    <div id="item2" class="collapse" data-parent="#accordion">
      <div class="card-body">
        text for expand/collapse
      </div>
    </div>
  </div>
</div>

dropdown 

Allows users to choose one value out of the many options. Dropdown can be a button or link. To add a down-arrow, use the caret class –

<span class="caret">

<div class="dropdown">

and then in the button or link definition, add

data-toggle="dropdown" attribute

dropdown (split) 

To show the dropdown menu with proper spacing around the caret. The caret is centred between the button (or link) and the dropdown menu when expanded.

Use “dropdown-toggle dropdown-toggle-split” along with the button or link class.

dropup 

Same functionality as dropdown except the caret is pointed up and menu is shown above the button or link. 

Use the div class as ‘dropup’ and data-toggle = “dropdown”

dropup (split) 

Same as dropdown (split) but with menus shown above. The caret is centred between the button/link and the menu items shown when expanded.

dropright 

to display the dropdown menu on the right side. Add 

<div class="dropdown dropright">

and then in the menu list element, x-placement="right-start"

dropleft 

Display the dropdown menu on the left side. 

<div class="dropdown dropleft">

dropdown-header 

To add headers inside the menu list. This is useful when we divide the dropdowns in categories. Add header as another list element –

<li class="dropdown-header">Dropdown header A</li>

dropdown-item-text 

Add plain text to a dropdown item; can be used as text on links too by adding href

<span class="dropdown-item-text">Plain Text</span>

dropdown-divider 

creates a thin horizontal border between links to separate them. Just add the class wherever the divider is required on the list.

<div class="dropdown-divider"></div>

dropdown-item disabled 

To disable any action on a particular dropdown item; use the class “dropdown-item disabled” on the particular item

dropdown-item-active

To make the particular dropdown item active by making the background blue. Add the class “dropdown-item active” to the particular item

dropdown-menu-right

right align the drop-down menu

<div class="dropdown-menu dropdown-menu-right">

form-group 

creates a stacked form with proper margins when added as a wrapper around each input type or form control

  <div class="form-group">

form-inline 

all elements are inline and left-aligned

<form class="form-inline" action="someactionpage.jsp">

form using the grid 

use rows and columns inside form

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" id="login id" placeholder="Enter login id" name="login">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Enter password" name="pwd">
    </div>
  </div>
</form>

form-control 

default class for styling <input>, <select> and <textarea> elements

<input type="password" class="form-control" ….

form-control-lg 

large size form area

<input type="password" class="form-control-lg" ….

form-control-sm 

small size form area

<input type="password" class="form-control-sm" ….

form-control-file 

form control to upload file

<input type="file" class="form-control-file" id="formcontrolfileupload">

form-control-plaintext 

to have read only contents in the form without losing the styling 

<input type="text" readonly class="form-control-plaintext" id="defaulttext" value="someexample@gmail.com">

form-control-range 

to include range element

<input type="range" class="form-control-range">

form-check 

to create a checkbox input

<div class="form-group form-check">
<input class="form-check-input" type="checkbox" name = "Agree">

form-check-inline 

to create checkboxes side by side

<div class="form-check form-check-inline">

disabled items 

Add items that cannot be clicked; are disabled (greyed out)

<fieldset disabled>
  <div class="form-group">
       <label for="disabledTextInput">Disabled text box</label>
       <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input box">
    </div>
 </fieldset>

readonly

adds read only text

<input class="form-control" type="text" placeholder="I am a read only text" readonly>

input-group 

container that enhances an input field by adding button, text or icon before or after the field to help the user.

  <div class="input-group">

input-group-prepend 

add a help text before the input field

   <div class="input-group-prepend">
      <span class="input-group-text">+91</span>
    </div>

input-group-append 

add a help text after the input field

   <div class="input-group-append">
      <span class="input-group-text">@gmail.com</span>
    </div>

input-group-sm 

for small input groups

<div class="input-group input-group-sm">

input-group-lg 

for large input groups

<div class="input-group input-group-lg">

checkbox 

add check box before or after input field

<div class="input-group">
  <div class="input-group-*">
    <div class="input-group-text">
      <input type="checkbox">
    </div>
  </div>
  <input type="text" class="form-control">
</div>

radio 

add radio button before or after input field

<div class="input-group">
  <div class="input-group-*">
    <div class="input-group-text">
      <input type="radio">
    </div>
  </div>
  <input type="text" class="form-control">
</div>

dropdown 

add dropdown before or after input field

<div class="input-group">
  <div class="input-group-*">
    ...code to add dropdown (check dropdown section)
  </div>
  <input type="text" class="form-control" label="Text input with dropdown button">
</div>

custom-checkbox 

create custom checkboxes

<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheckBox" name="chkboxexample">
    <label class="custom-control-label" for="customCheckBox">Custom checkbox</label>
  </div>
</form>

custom-radio 

create custom radio buttons

<form>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio" name="radioexample">
    <label class="custom-control-label" for="customRadio">Custom Radio button</label>
  </div>
</form>

custom-switch 

create custom toggle switch

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch">
  <label class="custom-control-label" for="customSwitch">Toggle switch element</label>
</div>

custom-select 

create custom select options

<select class="custom-select">
  <option selected>Custom select menu</option>
  <option value="1">Val1</option>
  <option value="2">Val2</option>
  <option value="3">Val3</option>
</select>

custom-file 

display custom file upload option

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose your file</label>
</div>

custom-range

create a custom range menu with rectangle pointer and bar

<form>
  <label for="customRange">Custom range</label>
  <input type="range" class="custom-range" id="customRange">
</form>

container 

container for the grid

<div class="container">content</div>

container-fluid 

fluid container for full-width

<div class="container-fluid">full-width container</div>

row 

row elements of the grid

 <div class="row">
   ... column elements for the row
  </div>

col-# ( <576px) 

column with specified width

<div class="col-2">
<div class="col-4">
<div class="col-8">

...

col-sm-# ( ≥576px) 

small columns with specified width

   <div class="col-sm-2">
    <div class="col-sm-4">
    <div class="col-sm-8">

col-md-# ( ≥768px) 

medium column

   <div class="col-md-2">
    <div class="col-md-4">
    <div class="col-md-8">

col-lg-# ( ≥992px) 

large column

   <div class="col-lg-2">
    <div class="col-lg-4">
    <div class="col-lg-8">

col-xl-# ( ≥1200px) 

extra large column

   <div class="col-xl-2">
    <div class="col-xl-4">
    <div class="col-xl-8">

col 

equal size column

<div class="col">

col-* 

equal width columns – col-sm, col-md, col-lg, col-xl

<div class="col-xl">

no-gutters 

remove horizontal padding between columns and margins between rows

<div class="row no-gutters">… column definitions</div>

offset-*-# 

small, medium, large or extra large offsets with size

<div class="col-3 offset-6">
<div class="col-md-3 offset-md-6">

order-# 

order in which the column should appear

<div class="col order-md-2">Ordered column</div>
<div class="col order-1">

nested columns

columns inside column

<div class="row">
  <div class="col-sm-10">
    Level 1: small column with 10
    <div class="row">
      <div class="col-8 col-sm-3">
        Nested column 1
      </div>
      <div class="col-4 col-sm-3">
        Nested column 2
      </div>
    </div>
  </div>
</div>

img-fluid 

display image and adjust size automatically

<img src="/images/drawing.png" class="img-fluid" alt="Your dynamic image">

img-thumbnail

represents thumbnail image

<img class="img-thumbnail" src="/images/drawing.png" alt="Thumbnail image">

jumbotron 

big box created to give extra focus on some special information or text. you can put any valid HTML elements inside jumbotron

<div class="jumbotron">
  <h1>heading</h1> 
  <p>Everything will be displayed inside a big grey box</p> 
</div>

jumbotron-fluid

full-width jumbotron occupying the whole horizontal space without displaying the rounded borders

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>I am fluid jumbotron</h1> 
    <p>I occupy the whole horizontal grey area</p> 
  </div>
</div>

list-group 

display an unordered list with items

<ul class="list-group">
  <li class="list-group-item">one</li>
  <li class="list-group-item">three</li>
  <li class="list-group-item">two</li>
</ul>

list-group-item active 

highlight the active item

  <li class="list-group-item active">Active item</li>

list-group-item disabled 

highlight the disabled item

  <li class="list-group-item disabled">disabled list item</li>

list-group-item-action 

create list of linked items using the <div> class and <a> in place of <ul> and <li>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">One</a>
  <a href="#" class="list-group-item list-group-item-action">Two</a>
</div>

list-group-item-primary 

color list items using the color code of the contextual class primary

<li class="list-group-item list-group-item-primary">Primary color </li>

list-group-item-secondary 

color list items using the color code of the contextual class secondary

<li class="list-group-item list-group-item-secondary">secondary color </li>

list-group-item-success 

color list items using the color code of the contextual class success

<li class="list-group-item list-group-item-success">success color </li>

list-group-item-info 

color list items using the color code of the contextual class info

<li class="list-group-item list-group-item-info">Info color </li>

list-group-item-warning 

color list items using the color code of the contextual class warning

<li class="list-group-item list-group-item-warning">Warning color </li>

list-group-item-danger 

color list items using the color code of the contextual class danger

<li class="list-group-item list-group-item-danger">Danger color </li>

list-group-item-light 

colour list items using the color code of the contextual class light

<li class="list-group-item list-group-item-light">Light color </li>

list-group-item-dark 

colour list items using the color code of the contextual class dark

<li class="list-group-item list-group-item-dark">Dark color </li>

list-group with badges 

Add badge to list item

<li class="list-group-item">
      Starred
<span class="badge badge-success badge-pill">30</span>

list-group with d-flex 

full-width box for list items

<li class="list-group-item d-flex justify-content-between align-items-center">

list-group-horizontal

create horizontal list items

<ul class="list-group list-group-horizontal">

list-group-flush

remove borders and rounded corners

<ul class="list-group list-group-flush">

media 

provides easy way to align media objects along with content. Used for social media objects like tweets, blog post comments etc…

<div class="media">
  <img src="img_1.png" alt="Action hero" class="mr-3 square" style="width:60px;">
  <div class="media-body">
    -- some content adjacent to the media object
  </div>
</div>

nested media 

achieved by placing a new media container inside the .media-body container

<div class="media">
  <img src="img_1.png" alt="Action hero" class="mr-3 square" style="width:60px;">
  <div class="media-body">
    -- some content adjacent to the media object
    <div class="media">
      <img src="img_2.png" alt="Characteristics" class="mr-3 square" style="width:60px;">
      <div class="media-body">
        -- some content adjacent to the nested media object
      </div>
    </div>
  </div>
</div>

d-flex align-self-start 

top alignment

<img src="img_1.png" class="align-self-start mr-3" style="width:60px">

d-flex align-self-center 

middle alignment

<img src="img_1.png" class="align-self-center mr-3" style="width:60px">

d-flex align-self-end 

bottom alignment

<img src="img_1.png" class="align-self-end mr-3" style="width:60px">

right aligned media

right alignment of media object i.e. text on left and image on right side – just move the img tag after the div tag

<div class="media">
  <img src="img_1.png" alt="Action hero" class="mr-3 square" style="width:60px;">
  <div class="media-body">
    -- some content adjacent to the media object
  </div>
<img src="img_1.png" alt="Action hero" class="mr-3 square" style="width:60px;">
</div>

modal 

to open a modal dialog window on the current page based on user event

-- open the modal dialog on button click
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalname">
  Open modal dialog </button>
-- modal creation
<div class="modal" id="modalname">
-- inside content
</div>

modal-dialog-centered 

open modal dialog in the center of page

<div class="modal-dialog modal-dialog-centered">

modal-dialog-scrollable 

to add a scroll bar to the modal window

<div class="modal-dialog modal-dialog-scrollable">

modal fade 

add fading effect while opening or closing the modal box

<div class="modal fade"></div>

modal-lg 

large size modal

<div class="modal-dialog modal-lg">

modal-sm 

small sized modal

<div class="modal-dialog modal-sm">

modal-xl

extra-large size modal box

<div class="modal-dialog modal-xl">

ul.nav 

create horizontal menus by adding .nav class to the ul element and then add .nav-item for individual li items. Add links using .nav-link

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">navigation link</a>

… other nav links

nav.nav 

create horizontal menus in the nav element itself

<nav class="nav">
    <a class="nav-link" href="#">navigation link</a>

nav justify-content-* 

justify navigation content to the end (right) or center

<ul class="nav justify-content-center">
<ul class="nav justify-content-end">

nav flex-column 

create vertical navigation 

<ul class="nav flex-column">

nav-tabs 

make the active nav as a tab

<ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active/Current</a>
    </li>

nav-pills 

shows the navigation menu as navigation pills. You can toggle the pills using data-toggle = “pills” option

<ul class="nav nav-pills">

nav-fill 

use .nav-fill to fill the available space proportionately. Can be used on pills or tabs

<ul class="nav nav-pills nav-fill">

nav-justified 

justify the pills or tabs using this option (all equal width tabs or pills)

<ul class="nav nav-pills nav-justified">
<ul class="nav nav-tabs nav-justified">

nav-tabs with dropdown 

Creates tabs with dropdown menu alongside other navigation items

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Current nav</a>
  </li>

  <li class="nav-item dropdown">

  ... code for dropdown

nav-pills with dropdown

Creates pills with dropdown menu alongside other navigation items

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Current nav</a>
  </li>

  <li class="nav-item dropdown">

  ... code for dropdown

navbar 

navigation header placed at the top of a webpage

<ul class="navbar-nav">

navbar-brand 

used to highlight a brand, main project or logo of the page

<a class="navbar-brand" href="#">Brand</a>

navbar with form 

add form controls in a navigation bar

<nav class="navbar navbar-expand-md bg-primary navbar-dark">
  <form class="form-inline">

navbar-text 

to add navbar text

  <span class="navbar-text">

navbar-dark bg-dark 

add navigation bar with dark background; other possibilities are primary, secondary, success, light, warning, danger, info

<nav class="navbar navbar-dark bg-dark">

navbar-light 

navigation bar with light background

<nav class="navbar navbar-light"></nav>

navbar fixed-top 

nav bar that is fixed on top of the page

<nav class="navbar fixed-top navbar-dark">

navbar fixed-bottom 

nav bar that is fixed on bottom of the page

<nav class="navbar fixed-bottom navbar-light">

navbar sticky-top 

sticks to the top of the page when scrolled over

<nav class="navbar sticky-top navbar-light">

collapse navbar-collapse 

collapse navigation bars and display only when clicked. Useful for small screens like mobile devices

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <div class="collapse navbar-collapse" id="collapsibleNavbar">

navbar-toggler 

used to add expand/collapse functionality to navbar

<button class="navbar-toggler" type="button"

navbar-expand-*

responsive collapsing class – to stack the navbar vertically as per size (* - sm, md, lg, xl)

<nav class="navbar navbar-expand-sm bg-dark">

pagination 

add basic pagination to display only certain records on one page

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Prev</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

page-item disabled 

to disable a particular page number or item from being clicked

<li class="page-item disabled">
      <a class="page-link" href="#!" tabindex="-1">Previous</a> </li>

page-item active 

to indicate the currently active page item

<li class="page-item active"><a class="page-link" href="#">3</a></li>

pagination-lg 

display larger size pagination blocks

<ul class="pagination pagination-lg">

pagination-sm

display smaller size pagination blocks

<ul class="pagination pagination-sm">

popovers 

display popover text on click (similar to tooltip). Popover position can be set using the data-placement attribute,

data-placement = top/bottom/left/right

Text is closed when the box is clicked again

<a href="#" title="mypopoverdata" data-toggle="popover" data-placement="top" data-content="Content">click me to see details</a>

dismissible popover

to close the popover text when user clicks outside the element anywhere in the document

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere to close the popover">Click</a>

hover popover

display popover when user moves the mouse pointer over the element

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="content">Hover over me to see popover content</a>

progress 

class to add a progress element to the container

<div class="progress">

progress-bar 

the main element for progress bar

<div class="progress-bar" role="progressbar" style="width: 41%"</div>

progress-bar with label 

to show a visible percentage (or some text) in the progress bar

<div class="progress-bar" style="width:70%">progress details</div>

progress-bar with height 

to change the default value, add the css property height. Default value is 16px

<div class="progress-bar" style="width:60%;height:12px"></div>

progress-bar bg-* 

color for the progress bar. Can be primary, secondary, dark, light, info, success, warning, danger

<div class="progress"> <div class="progress-bar bg-secondary" role="progressbar" style="width: 30%" aria-valuenow="25"</div> </div>

multiple progress-bar 

progress bars can be stacked one after other horizontally inside the same “progress” class.

<div class="progress">
  <div class="progress-bar bg-danger" style="width:20%">no charge</div>
  <div class="progress-bar bg-warning" style="width:20%">charge 40%</div>
  <div class="progress-bar bg-success" style="width:30%">charge 70%</div>
</div>

progress-bar-striped 

add a striped progress bar

<div class="progress-bar progress-bar-striped" style="width:30%"></div>

progress-bar-striped bg-* 

striped progress bar with background color

<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%"</div>

progress-bar-animated

animated progress bar

<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 20%"></div>

data-spy

Used to automatically update the links of a navigation list depending on the scroll position

data-spy="scroll" should be added to the element, usually <body> that needs to be used as a scrollable area.

spinner-border 

create a spinner (loader)

<div class="spinner-border" role="status">

spinner-border text-* 

spinner with specific styling. * can be primary, secondary, info, success, warning, danger, dark, light

<div class="spinner-border text-primary" role="status">
  <span class="sr-only"></span>
</div>

spinner-border-sm 

small size spinner

<div class="spinner-border spinner-border-sm" role="status">

spinner-grow 

spinner that grows and shrinks alternately

<div class="spinner-grow" role="status">

spinner-grow text-* 

growing spinners in different colors – primary, secondary etc…

<div class="spinner-grow text-primary" role="status">

spinner-grow-sm

small sized growing spinners

<div class="spinner-grow spinner-grow-sm" role="status">

table 

to add basic table

<table class="table">…table contents</table>

thead-light 

light header background for the table header (<th>)

<thead class="thead-light">

thead-dark 

dark header background for the table header (<th>)

  <thead class="thead-dark">

table-striped 

striped table background with alternate dark and light (zebra)

<table class="table table-striped">

table-bordered 

bordered (ruled) table

<table class="table table-bordered">

table-borderless 

table without any borders

<table class="table table-borderless">

table-hover 

adds hover effect (dark background on mouse hover)

<table class="table table-hover">

table-sm 

small size table

<table class="table table-sm">

table-*-responsive 

responsive tables; a horizontal scrollbar is added for small screens (<992px) if required

can be sm,md,lg or xl

<table class="table table-sm-responsive"><!-- ... table content --></table>

table-reflow 

table-active 

contextual class active indicates active row in grey

<tr class="table-active">

table-primary 

contextual class primary adds blue background to table

<tr class="table-primary">

table-secondary 

contextual class secondary adds specific color background to table

<tr class="table-secondary">

table-success 

contextual class success adds green color background to table

<tr class="table-success">

table-info 

contextual class info adds specific blue background to table

<tr class="table-info">

table-warning 

contextual class warning adds yellow color background to table

<tr class="table-warning">

table-danger 

contextual class danger adds specific red/pink background to table

<tr class="table-danger">

table-light 

contextual class secondary adds light (white) background to table

<tr class="table-light">

table-dark

contextual class secondary adds dark (grey/black) background to table

<tr class="table-dark">

toast

a quick alert box that appears only for a few seconds when any user event happens (button click, form submit etc…). contains of two parts – header and body

<div class="toast">
  <div class="toast-header">
    The Header
  </div>

  <div class="toast-body">
    The text for toast body
  </div>
</div>

tooltip

small popup box that appears when user hovers the mouse over an element (moves the mouse lightly without clicking)

<a href="#" data-toggle="tooltip" data-placement="auto" title="Good day!">Thanks for hovering</a>

display-# (1-4) 

display heading of different sizes from 1-4, with larger font size and crispier font weight than the normal headings

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

lead 

make a paragraph to stand out from others

<p class="lead">This paragraph stands out amongst others</p>

Result - 

This paragraph stands out amongst others

blockquote 

used to quote blocks of text from a different source

<blockquote class="blockquote">
  <p>Lot of content</p>
</blockquote>

blockquote-footer 

footer for the blockquote text

<footer class="blockquote-footer">Footer text</footer>

list-unstyled 

removes default list style and the left margin from the immediate child list items

<ul class="list-unstyled">

list-inline 

place all the list items in a single line

<ul class="list-inline">

dl-horizontal

definition list. Contains <dt> and <dd> elements. dl-horizontal makes terms and descriptions stand side-by-side

<dl class = "dl-horizontal">
    <dt>Description</dt>
    <dd>Item</dd>
</dl>

mark

highlight a text with yellow background and some padding using mark element

<mark>highlight text</mark>

abbr

style the element with dotted border bottom

<abbr>ABC</abbr>

code

the code snippets are embedded in the code element. 

<code>span</code>

kbd

display keyboard inputs with black background (with specific styling)

<kbd>ctrl + c</kbd>

border 

to add border to a text

<span class="border border-dark">Hi there</span>

border-*-0 

border-0 represents no border. Variations – border-top-0 represents no border on top, same way bottom, right and left are possible

<span class="p-1 border border-primary border-0">I have no border</span>

<span class="p-1 border border-primary border-right-0">I have border on all sides except right</span>

border-* 

coloured border based on contextual classes. Possible values – primary, secondary, success, danger, warning, info, light, dark, white

<span class="border border-primary">I have blue border</span>

<span class="border border-success">I have green border</span>

rounded 

refers to rounded image border

<img class="rounded" src="/images/myimg.png">

rounded-sm 

small rounded edges

<img class="rounded-sm" src="/images/myimg.png">

rounded-lg 

large rounded edges

<img class="rounded-lg" src="/images/myimg.png">

rounded-circle 

rounded circular image

<img class="rounded-circle" src="/images/myimg.png">

rounded-0  

no rounding (sharp edges)

<img class="rounded-0" src="/images/myimg.png">

rounded-*

rounded from 2 sides on left, right, top or bottom

<img class="rounded-top" src="/images/myimg.png">

bg-primary 

use blue background

<div class="bg-primary text-white">text is white and background is blue</div>

bg-secondary 

use grey background

<div class="bg-secondary"> background is grey</div>

bg-success 

use green background

<div class="bg-success"> background is green</div>

bg-info 

use light blue background

<div class="bg-info"> background is light blue</div>

bg-warning 

use yellow background

<div class="bg-warning"> background is yellow</div>

bg-danger 

use red background

<div class="bg-danger"> background is red</div>

bg-light 

use light (white or light grey) background

<div class="bg-light"> background is white/light grey</div>

bg-dark 

use black (dark) background

<div class="bg-dark"> background is black</div>

bg-white 

use white background

<div class="bg-white"> background is white</div>

text-* 

use specific colors for the text. Values can be primary, secondary, success, info, warning, danger, light, dark, white

<p class="text-primary">Text color is blue</p>

<p class="text-success">Text color is greeen</p>

...and so on

d-*-block 

display block with specific styling

<span class="d-block bg-primary">display block</span>

<span class="d-sm-block bg-success">display small block</span>

d-*-flex 

display flex items with specific styling

<div class="d-flex bg-secondary">...</div>

<span class="d-md-flex bg-info">...</span>

d-*-inline 

inline display with specific styling

<div class="d-inline bg-secondary">...</div>

<div class="d-md-inline bg-info">...</div>

d-*-inline-block 

display inline block

<div class="d-inline-block bg-secondary">...</div>

<div class="d-lg-inline-block bg-info">...</div>

d-*-inline-flex 

styling for inline flex

<div class="d-inline-flex bg-secondary">...</div>

<div class="d-lg-inline-flex bg-info">...</div>

d-*-none 

hide display for certain element (same as display: none)

<div class="d-none">...</div>

<div class="d-lg-none">...</div>

d-*-table 

display styling for table

<div class="d-table">...</div>

<div class="d-lg-table">...</div>

d-*-table-cell 

styling for table cell

<div class="d-table-cell">...</div>

<div class="d-lg-table-cell">...</div>

d-print-...

controls how elements have to be displayed while printing. Value can be none, block, inline, inline-block, table, table-row,table-cell, flex, inline-flex

<div class="d-print-block">Display content as block on print</div>

flex-*-column 

flex column to display content vertically (top to bottom). Responsive variations are sm,md,lg,xl

<div class="d-flex flex-column"> <!--default size-->

<div class="d-flex flex-sm-column">...</div>

flex-*-column-reverse 

reverse the order of display of columns

<div class="d-flex flex-column-reverse">

flex-*-row 

display content horizontally one after the other (side-by-side). Responsive variations are sm,md,lg,xl

<div class="d-flex flex-row">

<div class="d-flex flex-md-row">...</div>

flex-*-row-reverse 

reverse the order of display of rows

<div class="d-flex flex-row-reverse">

<div class="d-flex flex-lg-row-reverse">...</div>

flex-*-nowrap 

default setting to display text in the flex container

<div class="d-flex flex-nowrap">..</div>

flex-*-wrap 

add wrap functionality. Responsive variations – sm, ml, lg, xl

<div class="d-flex flex-wrap"> ... </div>

<div class="d-flex flex-xl-wrap"> ... </div>

flex-*-wrap-reverse 

reverse order display.

<div class="d-flex flex-wrap-reverse"> ... </div>

<div class="d-flex flex-xl-wrap-reverse"> ... </div>

flex-fill 

fill the background with different colors – primary, secondary, info etc…

<div class="p-2 flex-fill bg-*">Flex item</div>

flex-*-grow-1 

lets the specified element take the entire available space.

<div class="p-2 flex-grow-1 bg-primary">Flex grow</div>

flex-*-grow-0 

don’t let the items grow on different screens

<div class="p-2 flex-grow-0 bg-info">dont let me grow</div>

flex-*-shrink-1 

lets the item shrink

<div class="p-2 flex-shrink-1 bg-danger">Flex shrink</div>

flex-*-shrink-0 

no shrinking on different screens

<div class="p-2 flex-shrink-0 bg-primary">Flex no shrink</div>

justify-content-*-start 

change the alignment of the items (justify to left)

<div class="d-flex justify-content-start">

<div class="d-flex justify-content-sm-start">...</div>

justify-content-*-end 

justify to the end (right)

<div class="d-flex justify-content-end">

<div class="d-flex justify-content-sm-end">...</div>

justify-content-*-center 

center justify the items

<div class="d-flex justify-content-center">

<div class="d-flex justify-content-sm-center">...</div>

justify-content-*-between 

justify between the items

<div class="d-flex justify-content-between">

<div class="d-flex justify-content-sm-between">...</div>

justify-content-*-around 

justify space around the items

<div class="d-flex justify-content-around">

<div class="d-flex justify-content-sm-around">...</div>

align-content-*-start 

control vertical alignment to start (default)

<div class="d-flex flex-wrap align-content-start">

<div class="d-flex align-content-sm-start">...</div>

align-content-*-end 

align content to end

<div class="d-flex flex-wrap align-content-end">

<div class="d-flex align-content-sm-end">...</div>

align-content-*-center 

align content to the center

<div class="d-flex flex-wrap align-content-center">

<div class="d-flex align-content-sm-center">...</div>

align-content-*-around 

align space around items

<div class="d-flex flex-wrap align-content-around">

<div class="d-flex align-content-sm-around">...</div>

align-content-*-stretch 

stretch individual flex box items

<div class="d-flex flex-wrap align-content-stretch">

<div class="d-flex align-content-sm-stretch">...</div>

align-items-*-baseline 

align items with respect to baseline

<div class="d-flex flex-wrap align-items-baseline">

<div class="d-flex align-items-sm-baseline">...</div>

align-items-*-stretch 

stretch items to full width of flex container

<div class="d-flex align-items-stretch">

<div class="d-flex align-items-sm-stretch">...</div>

align-self-*-start 

self-align individual flex item to start (default)

<div class="align-self-start">flex item align</div>

<div class="align-self-md-start">...</div>

align-self-*-end 

self-align individual flex item to end

<div class="align-self-end">flex item align</div>

<div class="align-self-md-end">...</div>

align-self-*-center 

self-align individual flex item to center

<div class="align-self-center">flex item align</div>

<div class="align-self-md-center">...</div>

align-self-*-baseline 

self-align individual flex item to baseline

<div class="align-self-baseline">flex item align</div>

<div class="align-self-md-baseline">...</div>

align-self-*-stretch 

stretch to full width

<div class="align-self-stretch">flex item align</div>

<div class="align-self-md-stretch">...</div>

order-*-#

change the order of display of particular flex items from 0-12

<div class="order-12">first item</div> <!--will be displayed 12th-->

<div class="order-sm-3">ordered flex item</div>

close 

to display close option

<button type="button" class="close">

embed-responsive 

embed a responsive media of particular size

<div class="embed-responsive embed-responsive-24by16">
  <iframe class="embed-responsive-item" src="<video link>" allowfullscreen=""></iframe>
</div>

shadow-none 

background without shadow and with specific css styling properties

<div class="shadow-none p-2 mb-5 bg-dark rounded">No shadow</div>

shadow-sm 

small shadow 

<div class="shadow-sm p-2 mb-5 bg-light rounded">Small Shadow</div>

shadow 

regular shadow option

<div class="shadow p-2 mb-5 bg-light rounded">Default shadow setting</div>

shadow-lg 

large shadow

<div class="shadow-lg p-2 mb-5 bg-white">Larger shadow</div>

invisible 

to mark an element as invisible

<div class="invisible">invisible element</div>

visible 

mark an element as visible

<div class="visible">visible element</div>

sr-only 

show a particular element on screen readers only

<span class="sr-only">Hide me everywhere except screen readers</span>

stretched-link

make the containing block of a link clickable by using stretched-link. Can be used on card, media etc…

<a href="#" class="stretched-link">stretch the link to container</a>

align-* 

align at baseline, top, bottom, middle, text-top, text-bottom

example –

<span class="align-middle">middle</span>

clearfix 

used to clear floats left and right. Used when the screen is wide or small

<div class="clearfix">
  <span class="float-left">leftFloat</span>
  <span class="float-right">rightFloat</span>
</div>

fixed-top 

make any element stay on the top of the page independent of scrolling

<nav class="fixed-top">Fixed on page top</nav>

fixed-bottom 

make any element stay on the bottom of the page independent of scrolling

<nav class="fixed-bottom">Fixed on page bottom</nav>

sticky-top 

can be anywhere on the page, but when scrolled past, stays at top of the page

<div class="sticky-top">Sticks on top</div>

float-*-left 

float left on the screen; * can be sm, md, lg, xl

<div class="float-sm-left">Float left on views small or wider</div>

<div class="float-left">Float left on all view sizes</div>

float-*-right 

float right on the screen; * can be sm, md, lg, xl

<div class="float-md-right">Float right on views small or wider</div>

<div class="float-right">Float right on all view sizes</div>

float-*-none

no floating for the particular viewport

<div class="float-lg-none">no float on views small or wider</div>

<div class="float-none"> no float on any view sizes</div>

w-* 

specified width of a div tag; can be any percentage upto 100%

<div class="w-25 p-3" style="background-color: blue">Width 25% and size 3</div>

h-* 

customized height for div tag

<div class="h-50 d-inline-block" style="background-color: red">Height is 50%</div>

mw-* 

maximum width

<div class="mw-100 bg-success">Max Width 100%</div>

mh-*

maximum height

<div class="mw-75 bg-success">Max height 75%</div>

m-1 / m-*-# 

spaced div tags with margin on all sides; star ranges from 0 space to 6 spaces

<div class="m-4 bg-success d-inline-block">div with 4 spaces</div>

mt-1 / mt-*-# 

margin on top

<div class="mt-3 bg-warning d-inline-block">Spaced top margin</div>

mr-1 / mr-*-# 

margin on right

<div class="mr-3 bg-warning d-inline-block">Spaced right margin</div>

mb-1 / mb-*-# 

bottom margin

<div class="mb-3 bg-warning d-inline-block">Spaced bottom margin</div>

ml-1 / ml-*-# 

left margin

<div class="ml-3 bg-warning d-inline-block">Spaced left margin</div>

mx-1 / mx-*-# 

left and right (x-axis) margin

<div class="mx-3 bg-primary d-inline-block">Spaced x axis margin</div>

my-1 / my-*-# 

top and bottom (y-axis) margin

<div class="my-3 bg-primary d-inline-block">Spaced y axis margin</div>

m-n1 / m-*-n# 

negative spacing (change of direction) – can be any of the above – left, right, top, bottom, x, y

<div class="m-n5 bg-primary d-inline-block">Negative spacing</div>

p-1 / p-*-# 

padding on all sides

<div class="p-3 bg-danger d-inline-block">Padding on all sides with box size 3</div>

pt-1 / pt-*-# 

padding on top

<div class="pt-3 bg-danger d-inline-block">Padding on top with box size 3</div>

pr-1 / pr-*-# 

padding on right

<div class="pr-3 bg-danger d-inline-block">Padding on right with box size 3</div>

pb-1 / pb-*-# 

padding on bottom

<div class="pb-3 bg-danger d-inline-block">Padding on bottom with box size 3</div>

pl-1 / pl-*-# 

padding on left

<div class="pl-3 bg-danger d-inline-block">Padding on left with box size 3</div>

px-1 / px-*-# 

padding on left and right (x-axis)

<div class="px-3 bg-danger d-inline-block">Padding on left and right with box size 3</div>

py-1 / py-*-#

padding on top and bottom (y-axis)

<div class="py-3 bg-danger d-inline-block">Padding on top and bottom with box size 3</div>

font-weight-bold 

to write text in bold

<p class="font-weight-bold">Text in bold</p>

font-weight-bolder 

bolder than bold

<p class="font-weight-bolder">Bolder text</p>

font-weight-light 

light text, lighter than the normal text weight

<p class="font-weight-light">Light text</p>

font-weight-lighter 

lighter than light text weight

<p class="font-weight-lighter">Lighter than light</p>

font-weight-normal 

normal text

<p class="font-weight-normal">Normal weight </p>

text-decoration-none 

no text decoration

<p class="text-decoration-none">No decorations on text</p>

font-italic 

text in italic 

<p class="font-italic">Italic text (Ctrl+i) in word</p>

text-monospace 

text in monospace

<p class="text-monospace">monospace text</p>

text-justify 

justified text; justify can be left, right, center

<p class="text-justify">This is a justified text</p>

text-nowrap 

text without word wrapping

<p class="text-nowrap">No wrapping</p>

text-*-left 

text-sm-left, text-md-left, text-lg-left, text-xl-left

where sm = small, md= medium, lg = large, xl = extra large

<p class="text-sm-left">Left align text on viewports that are SM (small) or wider.</p>

text-*-right 

text-sm- right, text-md- right, text-lg- right, text-xl- right

where sm = small, md= medium, lg = large, xl = extra large

<p class="text-md-right">right align text on viewports that are md (medium) or wider.</p>

text-*-center 

text-sm- center, text-md- center, text-lg- center, text-xl- center

where sm = small, md= medium, lg = large, xl = extra large

<p class="text-lg-center">center align text on viewports that are lg (large) or wider.</p>

text-lowercase 

lowercase letters

<p class="text-lowercase">text in lowercase</p>

text-uppercase 

uppercase letters

<p class="text- uppercase">text in uppercase </p>

text-capitalize 

Capitalize Each Word in the comprising text

<p class="text-capitalize">capitalized each word</p>

text-truncate 

truncate the comprising text with an ellipsis at block or inline level

<p class="text-truncate">truncate this text while displaying because its long</p>

text-body 

display text in default settings

<p class="text-body">Default way of displaying text</p>

text-black-50 

lighter than normal text (50% opaque black). 

<p class="text-black-50">Text that's 50% opaque</p>

text-white-50 

white text that is 50% opaque in appearance

<p class="text-white-50">Text that's 50% opaque white</p>

text-muted 

contextual class to display muted text.

<p class="text-muted">Muted text.</p>

<a href="#" class="text-muted">Muted link.</a>

Muted text. 

Muted link.

text-hide 

Swap the text of heading tags with a background image 

<h1 class="text-hide">Hide this text and show background image</h1>

text-break

set overflow wrap so that long text doesn’t break the layout of a component

<p class="text-break">very very long text, that needs to be wrapped to maintain alignment</p>