Bootstrap Cheat Sheet

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

 The Tooltip is a popover that appears when you hover the mouse cursor. To create a Tooltip, use the tooltip() with the following attribute:

To Position Tooltip in Bootstrap, use the data-bs-placement attribute:

  • 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
Top Bootstrap Interview Questions and Answers
Bootstrap Online Quiz 1
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create programming tutorials for all.

No Comments

Post A Comment








Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue Reading