02 Aug Bootstrap Cheat Sheet

Bootstrap Cheat Sheet will guide you to work on Bootstrap with basics and advanced topics. Cheat Sheet for students, engineers, and professionals.

Introduction

Bootstrap is a free and popular HTML, CSS, and JavaScript framework. Bootstrap is a must today for responsive web development on different screen sizes.

Features

• Faster and easier web development
• Responsive Website (Web sites that automatically adjust themselves on all devices)
• Modern Web Browsers
• Mobile-first approach

Bootstrap Grids

The Grids define 12 columns on a web page i.e. the responsive grid. If you want to create a group of columns, then use the rows class. It supports five classes in Bootstrap:

.col-

• Device: <576px i.e. Extra Small Devices
• Example: <div class=”col-3″>One</div>

.col-sm-

• Device: >=576px i.e. Small Devices
• Example: <div class=”col-sm-1″>One</div>

.col-md-

• Device: >=768px i.e. Medium Devices like iPad
• Example: <div class=”col-md-1>One</div>

.col-lg-

• Device: >=992px i.e. Large Devices
• Example: <div class=”col-lg-1″>One</div>

.col-xl-

• Device: >=1200px i.e. Extra Large Devices
• Example: <div class=”col-xl-1″>One</div>

Example: For four equal columns, use four “.col-sm-3”

Bootstrap Buttons

The following bootstrap classes are used to create different types of buttons:

• .btn: Create a new button
• .btn-default: Default Button
• .btn-primary: Blue colored
• .btn-success: Success action on a button
• .btn-info: set info messages on a button
• .btn-warning: sets warning action on a button
• .btn-danger: sets danger action on a button
• .btn-link: make a button look like a link

The following bootstrap classes are used to create different sizes of buttons:

• .btn-lg: Large Button
• .btn-md: Medium Button
• .btn-sm: Small Button
• .btn-xs: Extra Small Button

Bootstrap Button Groups

The Button Groups are a series of buttons. The following are the Bootstrap classes to create a Button Group:

• .btn-group: Create a Button Group.
• .btn-group-vertical: Create a Vertical Button Group.
• .btn-group-justified: To create a Button Group that spans the entire width of the screen.

The following are the Bootstrap class to create Button Group of different sizes:

• .btn-group-lg: Large Button Group
• .btn-group-sm: Small Button Group
• .btn-group-xs: Extra Small Button Group

Bootstrap Tables

With Bootstrap, easily create a table on a web page. The following are the Bootstrap classes to create a table:

• .table: Create a table
• .table-striped: Striped table
• .table-bordered: Border to a table
• .table-hover: On mouse hover
• .table-dark: dark colored table
• .table-borderless: remove borders

The following are the Bootstrap classes to set a color on Table Headers:

• .thead-dark: Table header with dark color
• .thead-light: Table header with light color

Bootstrap – Responsive Tables

With Bootstrap, easily create responsive tables on a web page. Use the .table-responsive class. It adds a scrollbar to the table when required. The following is the screen width for a responsive table. This is when the table gets a scrollbar, depending on the screen width:

• .table-responsive-sm for < 576px
• .table-responsive-md for < 768px
• .table-responsive-lg for < 992px
• .table-responsive-xl for < 1200px

Bootstrap – Change the Text Background Color

With Bootstrap, easily set the background color for text on a web page. The following are the Contextual Classes to change the background color:

• .bg-primary: key information
• .bg-success: success action
• .bg-info: set information
• .bg-warning: set warning message
• .bg-danger: set danger message
• .bg-secondary: less important info
• .bg-dark: dark background color
• .bg-light: light background color

Bootstrap – Change the Text Color

With Bootstrap, easily add color to text on a web page. The following are the contextual Classes for text color:

• .text-muted: Gray Color
• .text-primary: Blue Color – KEY CONTENT
• .text-success: Gree Color – SUCCESS ACTION
• .text-info: SET INFORMATION
• .text-warning: Orange Color – SET WARNING MESSAGE
• .text-danger: Red Color – SET DANGER MESSAGE
• .text-secondary: LESS KEY CONTENT
• .text-white: WHITE COLOR TEXT
• .text-dark: DARK TEXT
• .text-body: NORMAL BODY
• .text-light: LIGHT COLOR

Bootstrap – Navbar

With Bootstrap, easily create a Responsive Navigation Bar. Also, implement the following to understand the Navbar concept on a web page completely:

• Center a Navigation Bar using the .navbar class
• Change the background color of the navigation bar
• Center a Navigation Bar using .justify-content-center class
• Change the text color of the nav bar items
• Set the logo on the top navigation bar using .navbar-brand class
• Set plain text using .navbar-text class
• Set fixed navigation bar (top): .fixed-top class.
• Set fixed navigation bar (bottom): .fixed-bottom class

Bootstrap Navigation Tabs & Pills

Learn how to create a horizontal menu on a web page, and set Nav Alignment. We will also use some Bootstrap classes for navigation tabs and pills:

• Create a horizontal menu on a web page using, .nav, .nav-item, and .nav-link classes.
• Create a Vertical Nav with .flex-column class
• Create Navigation Tabs with  .nav-tabs class
• Create Navigation Pills with .nav-pills class
• Justify Navigation Tabs/ Navigation Pills with .nav-justified
• Create Toggleabale/ Dynamic Tabs with data-toggle=”tab”

Bootstrap Pagination

The following are the Bootstrap classes for Pagination:

• Create Pagination using the .pagination class
• Highlight a Link using the .active class
• Disable a Link using the .disabled class
• Resize Pagination with .pagination-lg for large pagination and .pagination-sm for smaller pagination.
• Align Pagination with .justify-content-start, .justify-content-center, and .justify-content-end.

Bootstrap Images

The following Bootstrap classes are useful for setting images on a web page:

• Create Responsive Images with the .img-fluid class
• Create a Circular Image with the .rounded-circle class
• Create Rounded Corners of an image with the .rounded class
• Create an Image Thumbnail using the .img-thumbnail class
• Center an image with mx-auto: margin:auto and d-block: display:block
• Align Images with the .float-left and .float-right classes

Bootstrap Forms

With Bootstrap, we can easily create a form on a web page:

• Create a Full-width form with the .form-group class
• Create an Inline Form with the .form-inline class

Bootstrap Form Input Controls

Various Form Input Controls can be created on a web page:

• input (Text)
• input (Password)
• checkbox
• radio
• textarea
• select

Resize the Form Control using the following classes:

• For small size, use the .form-control-sm
• For large size, use the .form-control-lg

Bootstrap Alerts

Set predefined alert messages on a web pages using the Bootstrap Alert component:

Set different types of Alert boxes using the contextual Classes:

• .alert-success: Success alert box
• .alert-info: Info alert box
• .alert-warning: Warning alert box – Orange
• .alert-danger: Danger alert box – Red
• .alert-primary: Key info – Blue
• .alert-secondary: Less important info
• .alert-light: Light colored alert
• .alert-dark: Dark colored alert

The alerts can have a closing symbol, fade effect, link, etc:

• To add a close (x) symbol to the right of the alert to close it, use &times; HTML character code for (x) symbol.
• While closing an alert box, add a fading effect to it using the fade and show classes
• Add a link in the alert box with the alert-link class

Bootstrap Badges

To create Badges, we use the .badge class in Bootstrap. For changing the badge color, use the following contextual classes:

• .badge-primary
• .badge-secondary
• .badge-success
• .badge-danger
• .badge-warning
• .badge-info
• .badge-light
• .badge-dark

To change the shape of a Badge, use the .badge-pill class.

Bootstrap Progress Bars

To create a Progress Bar, use the Bootstrap classes .progress and .progress-bar classes. With that, we can use the Bootstrap classes to work on Progress Bars:

• Set the width of a Progress Bar with the width property.
• Set the height of a Progress Bar with the height property.
• To add stripes to a Progress Bar, use the .progress-bar-striped class

Use the Bootstrap contextual background classes to change the color of the Progress Bar:

• .progress-bar-success
• .progress-bar-info
• .progress-bar-warning
• .progress-bar-danger

To animate a Progress Bar, use the .progress-bar-animated class.

Bootstrap Tooltips

• data-bs-placement=”top”: Set the position of the tooltip on the top of an element:
• data-bs-placement=”bottom”: Set the position of the tooltip on the bottom of an element
• data-bs-placement=”left”: Set the position of the tooltip on the left of an element
• data-bs-placement=”right”: Set the position of the tooltip on the right of an element

Bootstrap Cards

The card is a box in Bootstrap. The box has borders. It adds padding around the content to make it look amazing. Cards came to replace panels, wells, and thumbnails.

To create a Card, use the following Bootstrap classes:

• .card: create a class
• .card-body: add content to the card

To set Card Header and Footer:

• .card-header
• .card-footer

Add color to the card using the following contextual classes:

• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-secondary
• .bg-dark
• .bg-light

Set the Card Title:

• .card-title

Set the Card Link:

• .card-link

Add the Image to a card background:

• .card-img-overlay

Set the image at the top inside the card:

• .card-img-top

Set the image at the bottom inside the card

• .card-img-bottom

Create a Grid of Cards:

• .card-columns

Set a Deck of cards:

• .card-deck

Set Group of cards:

• .card-group

Bootstrap Dropdown

To create a Dropdown Menu, use the .dropdown class in Bootstrap. Separate links in a Dropdown Menu using the .dropdown-divider class.

Add header in Dropdown Menu:

• .dropdown-header

Set Active for dropdown menu item

• .active

Set Disabled for dropdown menu item

• .disabled

To create a Dropright menu, use the following Bootstrap class:

• .dropright

Create a Dropleft menu:

• .dropleft

Align the dropdown menu to the right

• .dropdown-menu-right

Bootstrap List Groups

To create List Groups, use the following Bootstrap classes:

• .list-group class
• .list-group-item class

Select the list group item:

• .active class

Disable the list group item:

• .disabled class

List Group with Linked Items:

• .list-group-item-action class

The following Contextual classes are used in Bootstrap to color List Items:

• .list-group-item-success
• .list-group-item-secondary
• .list-group-item-warning
• .list-group-item-danger
• .list-group-item-info
• .list-group-item-dark
• .list-group-item-light

Bootstrap Collapse

To set content as collapsable content, use the .collapse class and the data-bs-toggle=”collapse” attribute.

To display content always, use the:

• .show class

To create an Accordion, use the:

• data-parent attribute

Bootstrap Modal

The Modal is a component in Bootstrap. It is a dialog box appearing on the top of the web page. To create a Modal in Bootstrap, use the:

• .modal class

To create a Modal Dialog:

• .modal-dialog: Create a modal on the web page
• .modal-dialog-centered: Center modal on the web page

Set Modal Content:

• .modal-content: For the modal header, body, and footer
• .modal-header: Header of the modal
• .modal-title: Title of the modal
• .modal-body: Body of the modal
• .modal-footer: Footer of the modal

Fade Modal:

• .fade class

Resize Modal:

• .modal-sm: Create small modals
• .modal-lg: Create large modals