Practice
Resources
Contests
Online IDE
New
Free Mock
Scaler Events New
Practice
Improve your coding skills with our resources
Contests
Compete in popular contests with top coders
Scaler
Explore Offerings by SCALER
Events
Checkout Scaler Academy Events
New

Before you go!

Take this "Bootstrap Cheat Sheet" interview guide with you

Bootstrap Cheat Sheet

Download PDF


Your requested download is ready!
Click here to download.

What is Bootstrap?

Bootstrap is an amazing web design framework that makes it easy to build responsive websites quickly and easily. Bootstrap was originally developed by Twitter to get more consistency across websites. Since it was released as an open-source framework in 2011, it has become one of the most popular web frameworks.

Nowadays, several users are moving away from desktop towards mobile therefore, a lot of websites need to be responsive.
Now, responsive is probably not the best term for what this means as a lot of people think that responsiveness means that the website will load up immediately or it has to be fast but that's not what responsive is at all. Responsiveness just means that it responds to the viewport. That means if you are looking at the same website on a mobile or on an iPad it should have a different layout to be able to best take advantage of the screen.

Now, What does it allow you to do?

Imagine you need a website with an attractive navigation bar, stylish buttons, nice typography, placeholders for text and images, a slider, and more-yet you aren’t a front-end developer. But what if these features were already coded for you, and you just had to write a little HTML to use them? This is Bootstrap. All the JavaScript code and CSS classes needed are already included in the Bootstrap package.

For example: If you want a button like this:

Then you can incorporate a predefined bootstrap class in your code without the hassle of writing long CSS codes.

Syntax:

<button class="btn btn-primary">
   Welcome to InterviewBit
</button>
Crack your next tech interview with confidence!
Take a free mock interview, get instant⚡️ feedback and recommendation💡
Events | Powered By

Bootstrap Tutorial: Basics to Advanced

1. Bootstrap Skeleton

<!DOCTYPE html>
<html>
 <head>
 <title>Bootstrap 101 Template</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
 <h1>Hello, world!</h1>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://code.jquery.com/jquery.js"></script>
 <!-- Include all compiled plugins, or just specific files as needed -->
 <script src="js/bootstrap.min.js"></script>
 </body>
</html>

2. Uses of Bootstrap

  • Bootstrap has built-in classes, so you don't have to create most elements from scratch.
  • It’s open-source.
  • It's very flexible and can be used to create any type of website in no time at all.
  • Websites made with bootstrap are faster, more responsive, and mobile-friendly.
  • Bootstrap supports JavaScript plugins.

3. Features of Bootstrap

  • Bootstrap is compatible with all modern browsers.
  • Bootstrap is the 3rd highest starred open project on GitHub.
  • Bootstrap provides a powerful grid system
  • Bootstrap provides simple integration
  • Bootstrap has good community support as well as documentation documentation
  • Bootstrap has pre-styled components
  • Bootstrap is easy to learn and use as anybody with just basic knowledge of HTML and CSS can start using Bootstrap.
  • Bootstrap uses a cache system in which we do not have to install it on our computer. After connecting to the internet once, it makes a cache of its files and stores them in the web browser.
You can download a PDF version of Bootstrap Cheat Sheet.

Download PDF


Your requested download is ready!
Click here to download.

4. Alerts - Bootstrap

  • A bootstrap alert is a message sent to users when something goes wrong.
  • In the case of typos such as incorrect email addresses or credit card numbers, the user will receive an error alert message that prompts them to make corrections.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Alerts</h2>
  <div class="alert alert-success">
    <strong>Success! alert</strong> 
  </div>
  <div class="alert alert-info">
    <strong>Info! alert</strong>
  </div>
  <div class="alert alert-warning">
    <strong>Warning! alert</strong> 
  </div>
  <div class="alert alert-danger">
    <strong>Danger! alert</strong> 
  </div>
</div>
</body>
</html>

 

Tag Name Description Code
Alert-primary  Light blue coloured alerts can be created using alert-primary.
<div class="alert alert-primary" role="alert">
  InterviewBit
</div>
Alert-secondary  Light grey coloured alerts can be created using alert-primary.
<div class="alert alert-secondary" role="alert">
 InterviewBit
</div>
Alert-Success For successful actions.
<div class="alert alert-secondary" role="alert">
InterviewBit
</div>
Alert-Danger For warning messages.
<div class="alert alert-danger" role="alert">
  InterviewBit
</div>
Alert-warning Similar to a warning alert, a danger alert is issued in response to more negative actions (e.g., being locked out after too many password failures).
<div class="alert alert-warning" role="alert">
 InterviewBit
</div>
Alert-heading Alert-heading is used for adding heading to your alert.
<div class="alert alert-info">
<h4 class="alert-heading"><i class="fa fa-info"></i></h4>
</div>
Alert-Light Alert-Light is used to display alerts in a light colour.
<div class="alert alert-light" role="alert">
  InterviewBit
</div>
Alert-Dark Alert-dark is used to display alerts in dark colours.
<div class="alert alert-dark" role="alert">
  InterviewBit
</div>
Alert-Link Alert-link class can be added to any links inside the alert box to create "matching coloured links.
<div class="alert alert-primary" role="alert">
 WELCOME TO INTERVIEWBIT<a href="#" class="alert-link">Bootstrap link for alert</a>. Give it a click if you like.
</div>
Alert-Dismissible Alert-dismissible is used to close the alert after reading.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
InterviewBit
 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

5. Buttons - Bootstrap

Responsive buttons can be built with the latest bootstrap 5.

Example:

 

btn Btn is used for setting the size and spacing of the button.
<button type="button" class="btn">Welcome to InterviewBit</button>
btn-primary Btn-primary is used to display buttons with a particular style for each class, for example, primary displays buttons with blue background.
<button type="button" class="btn">InterviewBit</button>
btn-secondary Btn-secondary is used to displays buttons with a grey background.
<button type="button" class="btn-secondary">InterviewBit</button>
btn-success Btn-success displays button with green background.
<button type="button" class="btn-success">InterviewBit</button>
btn-info Used for information on a topic like terms and conditions.
<button type="button" class="btn-info">InterviewBit</button>
btn-warning Btn-warning is for the yellow background button.
<button type="button" class="btn-warning">InterviewBit</button>
btn-danger Btn-danger is for the red background button.
<button type="button" class="btn-danger">InterviewBit</button>
btn-light Btn-light is a light coloured button.
<button type="button" class="btn-light">InterviewBit</button>
btn-dark Btn-dark is a dark coloured button (black).
<button type="button" class="btn-dark">InterviewBit </button>
btn-link Btn-link removes the outer border while maintaining the spacing set by the .btn class.
<button type="button" class="btn-link">InterviewBit</button>
btn-outline-primary A button variation to have outlined buttons instead of a solid background.
<button type="button" class="btn-outline-primary">InterviewBit</button>
btn-outline-secondary A button variation to have outlined buttons instead of a solid background.
<button type="button" class="btn-outline-secondary">InterviewBit</button>
btn-outline-success A button variation to have outlined buttons instead of a solid background.
<button type="button" class="btn-outline- success ">InterviewBit</button>
btn-outline-info A button variation to have outlined buttons instead of a solid background.
<button type="button" class="btn-outline- info ">InterviewBit</button>
btn-outline-warning A button variation to have outlined buttons instead of a solid background.
<button type="button" class="btn-outline- warning "> InterviewBit</button>
btn-outline-danger A button variation to have outlined buttons instead of a solid background.
<button type="button" class="btn-outline- danger "> InterviewBit</button>
btn-outline-light A button variation to have outlined buttons instead of a solid background.
<button type="button" class="btn-outline-light">InterviewBit<button type="button" class="btn-outline-light">InterviewBit</button>outline</button>
btn-outline-dark A button variation to have outlined buttons instead of a solid background.
<button type="button" class="btn-outline-light">InterviewBit</button>outline</button>

6. Breadcrumb - Bootstrap

  • Breadcrumbs help users navigate from one page to another without getting lost and let them return to a previous page if they get lost.
  • Breadcrumb navigation provides links back to each previous page the user navigated through and shows the user's current location in a website.
Breadcrumb Breadcrumb is used for indicating the current page's location within a navigational hierarchy.
<nav aria-label="breadcrumb">
 <ol class="breadcrumb">
   <li class="breadcrumb-item active" aria-current="page"> InterviewBit</li>
 </ol>
</nav>
<nav aria-label="breadcrumb">
 <ol class="breadcrumb">
   <li class="breadcrumb-item"><a href="#"> InterviewBit</a></li>
   <li class="breadcrumb-item active" aria-current="page"> Welcome to InterviewBit</li>
 </ol>
</nav>
<nav aria-label="breadcrumb">
 <ol class="breadcrumb">
   <li class="breadcrumb-item"><a href="#"> InterviewBit</a></li>
   <li class="breadcrumb-item"><a href="#"> Welcome to InterviewBit</a></li>
   <li class="breadcrumb-item active" aria-current="page">Text</li>
 </ol>
</nav>

7. Badges - Bootstrap

Bootstrap badges are used for adding additional information.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Badges</h2>
  <h1>Welcome to InterviewBit<span class="badge bg-secondary">New</span></h1>
</div>

</body>
</html>
Tag Name Description Code
badge Add a badge of the same size as the previous parent element.
<h1>Heading text <span class="badge badge-secondary">Welcome to InterviewBit</span></h1>
badge-pill Badge-pill is used for making badges more rounded.
<span class="badge badge-pill badge-light">Welcome to InterviewBit</span>
badge-primary Badge-primary is used to add a batch to the primary message.
<span class="badge badge-primary">Welcome to InterviewBit</span>
badge-secondary Badge-secondary is used to add a batch to the secondary message.
<span class="badge badge-badge-secondary">Welcome to InterviewBit</span>
badge-success To display a badge indicating success.
<span class="badge bg-success">Welcome to InterviewBit</span>
badge-warning Badge style to indicate a warning.
<span <span class="badge bg-success">Welcome to InterviewBit</span>
Badge danger Badge style to indicate danger.
<span class="badge bg-danger">Welcome to InterviewBit</span>
badge-light Badge style to indicate light background.
<span class="badge bg-light text-dark">Welcome to InterviewBit</span>
badge-dark Badge style to indicate dark background.
<span c<span class="badge bg-light text-dark">Welcome to InterviewBit</span>

8. Cards - Bootstrap

We have cards in Bootstrap that are simple containers that can hold images and descriptions. Below are some of the functions associated with a card.

card  Inside the div, each card is wrapped inside the card class.
<div class="card">
card-body  card-body holds the content of the card.
  <div class="card-body">InterviewBit</div>
card-title  Card-title holds the title of the card.
<h2 class="card-title">InterviewBit</h2>
card-subtitle  Card-subtitle is used for adding subtitles.
<h6 class="card-subtitle"> InterviewBit</h6>
card-text  card text class wraps the container around card text.
<p class="card-text">InterviewBit</p>
card-link  card-link is used for adding a link to a card.
<a href="#!" class="card-link">InterviewBit</a>
card-img-top The main card image is shown on the top.
<a href="#!" class="card-link">InterviewBit</a>
middle image  No need to specify the card image class as top or bottom when displaying an image in the middle, just add the image tag.
<img src="myimpimage.png">
card-img-bottom  Image is displayed after card content.
<img class="card-img-bottom" src="bootstrap-container-class.png">
card-img-overlay For displaying image in the background.
<div class="card-img-overlay"><p class="card-text">Welcome to InterviewBit</p>  </div>
card-header  card-header is used to add header bootstrap for a card.
<div class="card"> <div class="card-header"> Head </div> <div class="card-block"><h4 class="card-title">Title</h4><p class="card-text">Welcome to InterviewBit</p></div></div>
card-footer  Footer bootstrap for the card.
<div class="card"><div class="card-body">
    <h5 class="card-title">Welcome to InterviewBit</h5>  <p class="card-text">Welcome to InterviewBit</p>   <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card-footer text-muted"> text </div></div>
card-columns  To the wrapping div of the masonry-like collection of cards, the .card-columns class is added.
<div class="card-columns"> card i card ii </div>
card bg-... text-... It is used to style the cards by formatting with different colors.
<div class = "card text-<color> bg-<color>"></div>

9. Pagination - Bootstrap

Pagination helps to display the different page numbers of a website. With the help of paginators, we can jump to any page of the website.

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-lg">

10. Carousel- Bootstrap

A slideshow component that cycles through elements - images or slides of text - like a carousel.

carousel slide  Carousel slide adds animation and CSS transition effect.
<div class="carousel slide" data-ride="carousel">
carousel-fade  Carousel-fade is used to animate the slide transition with a crossfade instead of a slide.
<div class="carousel slide carousel-fade" data-ride="carousel">
carousel-inner Carousel-inner contains individual slides to the carousel.
<div class="carousel-inner">
carousel-item The wrapper class is applied to each individual carousel item in the div.
<div class="carousel-inner">
carousel-caption Carousel-caption adds caption for individual slides (carousel-item).
<div class="carousel-caption">

11. Collapse - Bootstrap

With  JavaScript plugins, you can change the visibility of content across your project with the help of collapse.

Example:

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>collapse in bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>collapse in bootstrap</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
  Learn bootstrap
  </div>
</div>

</body>
</html>
collapse Display and hide content whenever needed.
<p> <a class="btn btn-primary" data-toggle="collapse" href="#expandcollapse" aria-expanded="false" aria-controls="expandcollapse"> Collapse in bootstrap</a></p><div class="collapse" id="expandcollapse"> <div class="card card-body">   collapse in bootstrap</div></div>
Accordion bootstrap 4 Used to Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
<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">       Collapse in bootstrap   </div>  </div></div></div>

12. Dropdowns - Bootstrap

Dropdowns are toggleable, contextual overlays that display lists of links and more. They allow the user to choose one value from a predefined list.

Example:

 

 <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button for bootstrap
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Bootstrap cheatsheet</a>
    <a class="dropdown-item" href="#">Bootstrap 5 cheatsheet</a>
    <a class="dropdown-item" href="#">Bootstrap 4 cheatsheet</a>
  </div>
</div>
dropdown  Using this class, you can add a dropdown to the navbar, tabs, and pills so that you can display additional navigation.
<div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" id="1″ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Bootstrap Dropdown Button</button><div class="dropdown-menu" aria-labelledby="1″><a class="dropdown-item" href="#!">Bootstrap Link1</a><a class="dropdown-item" href="#!">Bootstrap Link2</a></div></div>
dropright  dropright is used to display the dropdown menu on the right side.
 <div class="dropdown dropright">
dropleft  dropleft is used to display the dropdown menu on the left side. 
<div class="dropdown dropleft">
dropdown-header  Dropdown-header is used to add headers inside the dropdown menu.
<li class="dropdown-header">Dropdown header A</li>
dropdown-divider  Dropdown-divider creates a thin horizontal border between links to separate them. 
 <div class="dropdown-divider"></div>
dropdown-menu-right Adds the default styles for the dropdown menu container.
<div class="dropdown-menu dropdown-menu-right">

13. Forms - Bootstrap

A form is a common tool of HTML which is used to collect data from the user.Bootstrap allows us to style forms.

Example:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
form-group  When added as a wrapper around each input type or form control, it creates a stacked form with proper margins.
<div class="form-group">
form-inline  All elements are inline in the form along with left margins
<form class="form-inline" action="someactionpage.jsp">
form using the grid  uses rows and columns 
<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  form-control is the default class for styling <input>, <select> and <textarea> elements.
<input type="password" class="form-control" ....
form-control-lg large size
<input type="password" class="form-control-lg" ....
form-control-sm  small size 
<input type="password" class="form-control-sm" ....
form-control-file  form-control-file is used to upload a 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  Form-control-range is used to include range element.
<input type="range" class="form-control-range">
form-check Form-check is used for creating a checkbox input.
<div class="form-group form-check">
<input class="form-check-input" type="checkbox" name = "Agree">
disabled items  disabled items add items that cannot be clicked.
<fieldset disabled> <div class="form-group">
readonly Readonly adds read only text.
<input class="form-control" type="text" placeholder="I am a read only text" readonly>

14. Grid System - Bootstrap

  • Bootstrap Grids can be used to build layouts of all shapes and sizes.
  • Bootstrap’s grid system uses a series of containers, rows, and columns to layout and aligns content. It’s built with a flexbox and is fully responsive.
  • The grid system can adapt across all 6 default breakpoints, and any breakpoints you customize. The six default grid tiers are:
    • Extra small (xs)
    • Small (sm)
    • Medium (md)
    • Large (lg)
    • Extra large (xl)
    • Extra extra large (xxl)
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) a 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">
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    </div>
     <div class="col-4 col-sm-3">  Nested column  </div>  </div> </div></div>

15. Jumbotron - Bootstrap

This component can increase the size of headings and add a lot of margin for landing page content. For using Jumbotron:  simply create a container with the class of .jumbotron.  

  • A jumbotron was introduced in Bootstrap 3 as a big padded box used to draw attention to special content or information.
  • Jumbotrons are no longer supported in Bootstrap 5.
  • For the same effect, you can use a <div> element with special helper classes combined with a colour class:
Jumbotron Using a jumbotron a big box was created to give focus on some special information.
<div class="mt-4 p-5 bg-primary text-white rounded">
  <h1>Bootstrap Jumbotron</h1>
  <p>Lorem ipsum...</p>
</div>

16. Navbar - Bootstrap

  • The navigation bar is a header that appears at the top of the page.
  • The .navbar should be wrapped in .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.

Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Bootstrap Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
navbar  A header is placed at the top of a webpage to navigate to different elements.
<ul class="navbar-nav">
navbar-brand  Navbar-brand is used to highlight a brand, main project or logo of the page.
<a class="navbar-brand" href="#">InterviewBit</a>
navbar with form  navbar with form is used to add form controls in a navigation bar at the top of the webpage.
<nav class="navbar navbar-expand-md bg-primary navbar-dark"> <form class="form-inline">
navbar-text  For navbar text.
<span class="navbar-text">
navbar-dark bg-dark  Used to add navigation bar with the dark background; Primary, secondary, success, light, warning, danger, and info are other possibilities.
<nav class="navbar navbar-dark bg-dark">
navbar-light  Used to add navigation bar with light background.
<nav class="navbar navbar-light"></nav>
navbar fixed-top navbar fixed-top fixes navbar at the top.
<nav class="navbar fixed-top navbar-dark">
navbar fixed-bottom Fixes navbar at the bottom.
<nav class="navbar fixed-bottom navbar-light">
navbar sticky-top Navbar sticks to the top of the page when scrolled over.
<nav class="navbar sticky-top navbar-light">
collapse navbar-collapse collapse navbar-collapse collapse navigation bars.
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
navbar-toggler Navbar-toggler is used to add expand/collapse functionality to the navbar.
<button class="navbar-toggler" type="button"

17. Tables - Bootstrap

Using tables in bootstrap, you can aggregate a huge amount of data and present it in a clear, logical manner.

You just need to add the base class .table, then extend with custom styles or modifier classes.

Example:

Basic Table bootstrap 4

The .table class is used to add basic styling (light padding and only horizontal dividers) to a table:

Firstname Lastname Email
Lavish malik lavishmalik28@gmail.com
John dellinger jogndellinger01@gmail.com
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Basic Table bootstrap 4</h2>
  <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lavish </td>
        <td>malik</td>
        <td>lavishmalik28@gmail.com</td>
      </tr>
      <tr>
        <td>John</td>
        <td>dellinger</td>
        <td>jogndellinger01@gmail.com</td>
      </tr> 
    </tbody>
  </table>
</div>
</body>
</html>
table The table is used for adding a basic table.
<table class="table">...table bootstrap</table>
thead-light Provides a light header background for the table header.
<thead class="thead-light">
thead-dark Provides a dark header background for the table header.
 <thead class="thead-dark">
table-striped  Used for alternate dark and light table backgrounds.
<table class="table table-striped">
table-bordered ruled table.
<table class="table table-bordered">
table-borderless Remove borders.
<table class="table table-borderless">
table-hover  The .table-hover class is used to add a hover effect on table rows.
<table class="table table-hover">
table-sm  Table with a small size.
<table class="table table-sm">
table-*-responsive  Makes a table responsive by cropping a wide table and making it scrollable horizontally.Can be sm,md,lg or xl.
<table class="table table-sm-responsive"><!-- ... table content --></table>
table-secondary (bootstrap table styles)It adds blue background to table.
<tr class="table-primary">
table-success (bootstrap table styles)It adds specific colour background to the table.
<tr class="table-primary">
table-info  (bootstrap table styles)It adds blue background to the table.
<tr class="table-info">
table-warning (bootstrap table styles)It adds yellow colour background to table.
<tr class="table-warning">
table-danger  (bootstrap table styles)It adds red/pink background to table.
(bootstrap table styles)It adds red/pink background to table
table-light  (bootstrap table styles)It adds light background to table.
<tr class="table-light">
table-dark  (bootstrap table styles)It adds dark (grey/black) background to table.
 <tr cl<tr class="table-light">

18. Border Utilities - Bootstrap

You can quickly style an element's border and border-radius by using border utilities. These are great for images, buttons, or any other element.

Example:

 

border   Used to add a border.
<span class="border border-dark">Border bootstrap</span>
border-*-0  It represents no border. Variations – border-top-0 represents no border on top, in similar way bottom, right and left are possible.
<span class="p-1 border border-primary border-0">Border bootstrap</span>

<span class="p-1 border border-primary border-right-0">Border bootstrap</span>
border-*  It allows you to add/remove borders on a side as well as change the colour of the borders.border-(light, dark primary, secondary, transparent, white, warning, success, info, danger, 0, top-0, right-0, left-0, bottom-0).
<span class="border border-primary">Border bootstrap</span>
rounded rounded refers to the rounded image border.
<img class="rounded" src="/images/myimg.png">
rounded-sm  rounded-sm refers to small rounded edges.
<img class="rounded-sm" src="/images/myimg.png">
rounded-lg rounded-lg refers to large rounded edges.
<img class="rounded-lg" src="/images/myimg.png">
rounded-circle  rounded-circle refers to a rounded circular image.
<img class="rounded-circle" src="/images/myimg.png">
rounded-0   rounded-0 refers tono rounding (sharp edges).
<img class="rounded-0" src="/images/footer-bootstrap.png">

19. Display - Bootstrap

We can quickly Quickly and responsively toggle the display value of components and more with the help of display utilities.

d-*-block display block with a 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 a specific styling.
<div class="d-flex bg-secondary">...</div>

<span class="d-md-flex bg-info">...</span>
d-*-inline inline display with a specific styling.
<div class="d-inline bg-secondary">...</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 elements (same as display: none).
<div class="d-none">...</div>

<div class="d-lg-none">...</div>
d-*-table display styling for the table.
<div class="d-table">...</div>

<div class="d-lg-table">...</div>
d-*-table-cell  styling for a 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>

20. Colors - Bootstrap

Use a handful of colour utility classes to convey meaning through color.Supports styling links with hover states, too.

Example:

bg-primary It is used to add a blue background.
<div class="bg-primary text-white">text is white and background is blue</div>
bg-secondary It is used to add a grey background.
<div class="bg-secondary"> background is grey</div>
bg-success It is used to add a green background.
<div class="bg-success"> background is green</div>
bg-info It is used to add a light blue background.
<div class="bg-info"> background is light blue</div>
bg-warning It is used to add a yellow background.
<div class="bg-warning"> background is yellow</div>
bg-danger   It is used to add a red background.
<div class="bg-danger"> background is red</div>
bg-light  It is used to add a light (white or light grey) background.
<div class="bg-light"> background is white/light grey</div>
bg-dark It is used to add a black (dark) background.
<div class="bg-dark"> background is black</div>
bg-white  It is used to add a white background.
<div class="bg-white"> background is white</div>
text-*  Specific colours for the text are used. There are different types of values: primary, secondary, info,  success, danger, warning,  white, light, dark.
<p class="text-primary">Text color is blue</p>
<p class="text-success">Text color is green</p>

21. Sizing - Bootstrap

With width and height utilities, you can easily make an element as wide or tall as its parent.

w-*  Utility class that makes an element's width a percentage of its parent's width.
<div class="w-25 p-3" style="background-color: blue">Width is 25%, size is 3</div>
h-*  It provides customized height for the div tag.
<div class="h-50 d-inline-block" style="background-color: red">Height= 50%</div>
mw-*  It provides a maximum width.
<div class="mw-100 bg-success">Maximum Width=100%</div>
mh-* It provides maximum height.
<div class="mw-75 bg-success">Maximum height=75%</div>

22. Spacing - Bootstrap

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

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-*-#  the margin on top.
<div class="mt-3 bg-warning d-inline-block">Spaced top margin</div>
mr-1 / mr-*-#  the 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="mx-3 bg-primary d-inline-block">Spaced x axis 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="pt-3 bg-danger d-inline-block">Padding on top 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>

23. Flexbox - Bootstrap

The main difference between Bootstrap 3 and Bootstrap 4 & 5 is that Bootstrap 5 now uses flexbox, instead of floats, to handle the layout.

Bootstrap 5 provides us with classes to let us use flexbox easily.

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-1 bg-danger">Flex 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 flexbox 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 the full width of the 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 items 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 centre.
<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>

Conclusion:

In this bootstrap cheat sheet, you can find all the information you need while learning HTML and front-end development. Furthermore, it can be used as a reference when building a project using the popular HTML framework.

Bootstrap MCQ Questions

1.

Which of these codes will create a standard navigation bar?

2.

Which class in bootstrap allows you to have a full-width container, which spans the entire width of the viewport?

3.

A bootstrap form's default layout is which of the following?

4.

Which of the following is correct about the bootstrap 5 Modal Plugin?

5.

The Dropdown menu in bootstrap can be created by which of the following classes?

6.

In regards to Bootstrap Mobile-First Strategy, which of the following is true?

7.

Which of the following is correct? (bootstrap 3 vs bootstrap  4).

8.

A button at the block level can span the entire width of an element's parent. Which class should be used?

9.

Which one of the following plugins are used to cycle through elements, such as a slideshow?

10.

Identify the three elements of the Bootstrap grid listed in the correct order.

11.

What class should the container element for elements with COL class have?

Get Placed at Top Product Companies with Scaler Know More 
Get Placed at Top Product Companies with Scaler Know More 
Get Placed at Top Product Companies with Scaler
Sat transparent 640a34d454880bf68e3bfdf33f2389f2214043f59ad18b4c7f7b114e834fb257.svg

Point markers b3add1cc88e4996b2df6e0aedb9f0d1b65fa73c51b7ada8fbee3895a2aa11802.svg Personalised feedback report with solutions
Point markers b3add1cc88e4996b2df6e0aedb9f0d1b65fa73c51b7ada8fbee3895a2aa11802.svg Real life Interview Questions
Point markers b3add1cc88e4996b2df6e0aedb9f0d1b65fa73c51b7ada8fbee3895a2aa11802.svg Identify exact topics to improve

Your feedback is important to help us improve.
Free Mock Assessment
Fill up the details for personalised experience.
All fields are mandatory
Current Employer *
Enter company name *
Graduation Year *
Select an option *
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
Phone Number *
OTP will be sent to this number for verification
+91 *
+91
Change Number
Phone Number *
OTP will be sent to this number for verification
+91 *
+91
Change Number
Graduation Year *
Graduation Year *
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
*Enter the expected year of graduation if you're student
Current Employer *
Company Name *
Please verify your phone number
Edit
Resend OTP
By clicking on Start Test, I agree to be contacted by Scaler in the future.
Already have an account? Log in
Free Mock Assessment
Instructions from Interviewbit
Start Test