IQCode's 2023 Bootstrap Cheat Sheet: From Novice to Pro

Bootstrap: The Popular Web Framework

Bootstrap is an exceptional web design framework that simplifies the process of building responsive websites quickly and easily. Initially developed by Twitter to achieve more consistency across websites, it became available as an open-source framework in 2011 and has become one of the most widely used web frameworks.

Nowadays, as more users are moving away from desktops and towards mobile, many websites need to be responsive. However, being responsive does not necessarily mean that the website will load immediately. Rather, it means that it will respond to the viewpoint, so if it is viewed on a mobile device or an iPad, it will adjust its layout to best take advantage of the screen size.

Bootstrap allows you to create a website with an attractive navigation bar, stylish buttons, beautiful typography, text, and image placeholders, a slider and more, without facing the hassle of writing long CSS codes. All necessary CSS classes and JavaScript code are already included in the Bootstrap package.

For instance, to add a button like this:

You can easily incorporate the predefined Bootstrap class into your code.

Bootstrap offers a wide range of customizations that range from the basics to advanced as discussed below:

  1. Bootstrap Skeleton

Various Uses of Bootstrap Framework

The Bootstrap framework is a popular tool for creating responsive and mobile-first websites. Some of its uses include:

  1. Creating mobile-friendly and responsive web pages
  2. Designing user-friendly and intuitive interfaces
  3. Standardizing the visual appearance of your web application across different devices
  4. Speeding up the web development process by providing pre-built UI components and templates
  5. Improving the accessibility and usability of your website through its built-in CSS and JavaScript functionality
  6. Customizing the look and feel of your web application using its extensive customization options
Overall, Bootstrap is an incredibly useful resource for web developers who want to create modern, responsive, and visually appealing websites with ease.

Features of Bootstrap

Bootstrap is a popular front-end framework with various features that make it a preferred choice for web development. Some of its key features include:

  • Flexible and responsive grid system for easy layout creation
  • CSS-based design templates for typography, forms, buttons, and other UI components
  • Javascript plugins for enhanced functionality, such as carousels, modals, and tooltips
  • Support for popular web browsers and mobile devices
  • Easy customization for branding and visual consistency

In summary, Bootstrap simplifies web development by providing ready-made tools and templates for creating responsive and visually appealing websites.

Using Bootstrap Alerts

To implement Bootstrap alerts, we can use the following class names:


- base class


- for success alerts


- for info alerts


- for warning alerts


- for danger alerts

Here's an example of how to use Bootstrap alerts:

<div class="alert alert-success" role="alert">
  <strong>Success!</strong> Your message has been sent successfully.

Make sure to include the Bootstrap CSS and JavaScript files to use these classes.

Bootstrap Buttons

Bootstrap provides a set of pre-designed buttons that can be easily customized to fit the needs of your web application. These buttons can be used to initiate an action or navigate to a different page.

To use these buttons, you can simply add the appropriate class name to a button element. For example, to create a primary button, you can use the "btn-primary" class name:

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

Other available class names for Bootstrap buttons include:

- btn-default - btn-success - btn-info - btn-warning - btn-danger - btn-link

By default, these buttons will have a border and a gradient background. You can customize the look of these buttons by using the variables defined in the Bootstrap source code.

Bootstrap Breadcrumb

This code demonstrates the implementation of a Bootstrap breadcrumb navigation component. Breadcrumbs are a useful UI element for showing the user's current location within a website and allowing them to navigate back to previous pages.

In this example, we use the "breadcrumb" class provided by Bootstrap to style the breadcrumb navigation. The "aria-label" attribute provides an accessible label for screen readers, and the "ol" element contains each individual breadcrumb.

Each breadcrumb is represented by an "li" element with the "breadcrumb-item" class. The first two items are clickable links that will take the user to previous pages, and the last item is the current page, represented by an "active" class and an "aria-current" attribute.

Overall, the Bootstrap breadcrumb component is a simple and effective way to enhance the user experience and provide context for website navigation.

Badges - Bootstrap


<span class="html">
  <span class="badge badge-primary">Primary</span>
  <span class="badge badge-secondary">Secondary</span>
  <span class="badge badge-success">Success</span>
  <span class="badge badge-danger">Danger</span>
  <span class="badge badge-warning">Warning</span>
  <span class="badge badge-info">Info</span>
  <span class="badge badge-light">Light</span>
  <span class="badge badge-dark">Dark</span>

The Bootstrap framework provides a simple way to display badges. Badges are used to display small amounts of information to the user. The badges are available in various colors such as Primary, Secondary, Success, Danger, Warning, Info, Light, and Dark. To use badges, simply add the badge class to a span element and add the appropriate color class from the list of available colors.

Bootstrap Cards

Bootstrap is a popular framework that enables developers to create responsive web pages quickly and easily. One of the most useful features in the Bootstrap library is the card component.

Cards in Bootstrap are used to present content in a clean and organized way. They are often used to display the product description, blog post summaries and user content such as reviews.

Using Bootstrap cards is fairly simple:

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

This code displays a basic Bootstrap card. The image is displayed at the top, followed by the card title and text. A button is also included at the bottom.

Cards in Bootstrap can be easily customized by changing the classes and properties. Developers can add colors, patterns, and icons, making the cards more visually appealing and attractive.

Bootstrap cards can be used in a variety of ways on a website to present information concisely and aesthetically. This makes them a popular choice among web developers.

Pagination Using Bootstrap


<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">1</a>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>

The above code can be used to implement pagination using Bootstrap. It creates a pagination bar with previous and next buttons and clickable page numbers. The current page is indicated with an active class. The pagination can be customized by changing the class names and styles.

Bootstrap Carousel

The Bootstrap Carousel is a slideshow component that is built using Bootstrap Framework and jQuery. It allows users to showcase multiple images, text or videos in a slide show format that is easy to navigate. This component is responsive and can be customized to fit the design of any website.


Here is an example of how to implement the Bootstrap Carousel on your website:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>

  <!-- Slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="image1.jpg" alt="Image 1">
      <div class="carousel-caption">
        <h3>Image 1</h3>
        <p>Description of Image 1</p>

    <div class="item">
      <img src="image2.jpg" alt="Image 2">
      <div class="carousel-caption">
        <h3>Image 2</h3>
        <p>Description of Image 2</p>

    <div class="item">
      <img src="image3.jpg" alt="Image 3">
      <div class="carousel-caption">
        <h3>Image 3</h3>
        <p>Description of Image 3</p>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>


This code creates a Bootstrap Carousel with three images for demonstration purposes. The images can be customized to fit the needs of the website owner by changing the source URLs of the image tags. The carousel controls can be customized to fit the design of the website by changing the class names of the control elements.

Bootstrap Collapse Component

The Bootstrap Collapse component provides a way to toggle the visibility of content on a webpage by collapsing or expanding it with a smooth animation. It is commonly used to create collapsible navigation bars, accordions, and FAQs.

To use the Collapse component, you need to include the Bootstrap JavaScript plugin in your HTML code:

You also need to add the "data-toggle" and "data-target" attributes to the element that triggers the collapse:

Toggle Content

In this example, clicking on the "Toggle Content" link will toggle the visibility of the content with the ID "myContent".

You can customize the behavior of the Collapse component by using additional attributes and CSS classes. For example, you can set the default state of the content to be collapsed or expanded, and you can specify the animation speed and easing function. See the Bootstrap documentation for more information.

Dropdowns using Bootstrap

This code implements dropdown menus using Bootstrap, a popular CSS framework.

  <!-- HTML code for a dropdown button with several options -->
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
      <button class="dropdown-item" type="button">Option 1</button>
      <button class="dropdown-item" type="button">Option 2</button>
      <button class="dropdown-item" type="button">Option 3</button>

The code above creates a dropdown button with the label "Options" and three different options to choose from. This can be customized by changing the button label and the options inside the dropdown menu.

Forms - Bootstrap

The following code shows an example of how to use Bootstrap to create a basic form:

    <div class="form-group"><br>
      <label for="name">Name:</label><br>
      <input type="text" class="form-control" id="name"><br>
    <div class="form-group"><br>
      <label for="email">Email address:</label><br>
      <input type="email" class="form-control" id="email"><br>
    <button type="submit" class="btn btn-primary">Submit</button><br>

The "form-group" class is used to group form elements together, and the "form-control" class is used to style input elements.

Grid System in Bootstrap

Bootstrap includes a responsive grid system that allows web developers to easily create responsive layouts for their web pages. The grid system uses a series of containers, rows, and columns to achieve this.

Here is an example of how to create a basic layout using Bootstrap's grid system:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <!-- Content goes here -->
    <div class="col-md-4">
      <!-- Content goes here -->
   <div class="col-md-4">
      <!-- Content goes here -->

In this example, we have a container with a row that contains three equal-width columns. The "md" in the class name "col-md-4" stands for medium-sized screens, but there are also classes for extra-small, small, large, and extra-large screens.

Overall, Bootstrap's grid system is a powerful tool that can help developers create beautiful, responsive layouts quickly and easily.

Using Jumbotron in Bootstrap

The Jumbotron is a class in Bootstrap that allows you to display a prominent message with large text and additional supporting content.

  <div class="jumbotron">
    <h1>Welcome to our website!</h1>
    <p>We offer a wide range of products at affordable prices.</p>
    <a href="#" class="btn btn-primary">Learn More</a>

In the example above, we have created a Jumbotron with a heading, a paragraph of text, and a "Learn More" button. You can customize the Jumbotron by using the various classes and styles provided by Bootstrap.

Navbar with Bootstrap

To create a navbar using Bootstrap, we need to include the Bootstrap CSS and JS files in our HTML file. Here's an example of a basic navbar:

  <nav class="navbar navbar-expand-lg navbar-light bg-light"><br>
   <a class="navbar-brand" href="#">Logo</a><br>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><br>
    <span class="navbar-toggler-icon"></span><br>
   <div class="collapse navbar-collapse" id="navbarNav"><br>
    <ul class="navbar-nav"><br>
     <li class="nav-item active"><br>
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a><br>
     <li class="nav-item"><br>
      <a class="nav-link" href="#">About</a><br>
     <li class="nav-item"><br>
      <a class="nav-link" href="#">Contact</a><br>

In the code above, we create a navbar with a logo and three navigation links. The navbar has a hamburger menu icon on smaller screens, which toggles the dropdown menu containing the navigation links.

Bootstrap Tables

In web development, tables are an essential element used to display data in a structured format. Bootstrap provides a simple and convenient way to create attractive and responsive tables with minimal effort.

To create a basic table with Bootstrap, use the `

` element and add the `.table` class to it. Use the ` ` element to define the table header, and the ` ` element to define the main content area.


ID Name Email
001 John Doe [email protected]
002 Jane Smith [email protected]

Bootstrap also provides additional classes for more advanced table features such as striped rows, bordered tables, and hover effects. These can be easily added to the `

` element by using the appropriate classes.


ID Name Email
001 John Doe [email protected]
002 Jane Smith [email protected]

Bootstrap tables also support responsive design, which ensures that tables are properly displayed on mobile devices with smaller screen sizes. To enable responsive tables, simply add the `.table-responsive` class to the `

` containing the table.


ID Name Email
001 John Doe [email protected]
002 Jane Smith [email protected]

In summary, Bootstrap provides a range of features and classes to help developers create attractive and responsive tables quickly and easily.


In Bootstrap, the border utility classes help in adding or removing borders from elements. The border classes can be used with any HTML element.

The available border utility classes are: - `.border` - `.border-top` - `.border-right` - `.border-bottom` - `.border-left`

Each of these classes can be further modified with one of the following options: - `.border-{color}` to set the color of the border (e.g. `.border-primary`) - `.border-{side}-{color}` to set the color of a specific side of the border (e.g. `.border-top-secondary`)

To remove a border, use the `.border-0` class.

Here is an example of how to use border utility classes:

<div class="border border-primary">
  <p>Some content with a border</p>

This will create a div element with a border around it, with the border color set to primary.

By using these border utility classes, designers and developers can easily add or remove borders from elements without having to write custom CSS code every time.

Displaying Data with Bootstrap

To display data using Bootstrap, we can use the classes provided by Bootstrap to design our layout. Here is an example of displaying a table using Bootstrap:

First Name Last Name Email
John Doe [email protected]
Jane Doe [email protected]
Bob Smith [email protected]

In the above example, we have used the Bootstrap class "table" to create a table and the class "table-striped" to add stripes to the table. We have also used the "thead" and "tbody" elements to group the header and body content of the table.

This is just one example of how we can use Bootstrap to display data in our web applications. Bootstrap offers many more classes and components for designing layouts and displaying data.


This section discusses the color classes available in Bootstrap, a popular CSS framework. Bootstrap provides a set of predefined color classes that can be used to style various elements in a web page. These color classes are named after their corresponding colors. For example, 'text-primary' is a class that sets the text color of an element to the primary color defined in Bootstrap's color scheme. Here are some common Bootstrap color classes:

    <p class="text-primary">Primary</p>
    <p class="text-secondary">Secondary</p>
    <p class="text-success">Success</p>
    <p class="text-danger">Danger</p>
    <p class="text-warning">Warning</p>
    <p class="text-info">Info</p>
    <p class="text-light bg-dark">Light</p>
    <p class="text-dark">Dark</p>

These classes can be used with various HTML elements such as headings, paragraphs, links, buttons, etc. to apply the corresponding colors.

Bootstrap Sizing

Bootstrap provides various classes to control the size of elements such as buttons, images, and form controls based on device screen sizes.

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

  <!-- Default button -->
  <button class="btn btn-primary">Default Button</button>

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

  <!-- Image -->
  <img src="example.jpg" class="img-fluid rounded-circle" alt="example image" width="200">

  <!-- Form control -->
  <input class="form-control form-control-lg" type="text" placeholder="Large input">

  <input class="form-control" type="text" placeholder="Default input">

  <input class="form-control form-control-sm" type="text" placeholder="Small input">

The classes used are:


for large buttons,


for small buttons,


for responsive images,


for circular images,


for large form controls, and


for small form controls.

Spacing in Bootstrap

Bootstrap provides several classes to add spacing to HTML elements. These classes include `m{t|r|b|l}-{size}` and `p{t|r|b|l}-{size}` where `{size}` can be `0`, `1`, `2`, `3`, `4`, `5`, or `auto`.

The `m` classes add margin to the element, while the `p` classes add padding. The letters `t`, `r`, `b`, and `l` stand for top, right, bottom, and left, respectively.

Here is an example of how to use these classes:

<div class="p-3">This div has padding</div>
<div class="m-3">This div has margin</div>
<div class="mt-3">This div has margin-top</div>
<div class="pb-4">This div has padding-bottom</div>

It's important to note that the `{size}` values represent a multiple of `1rem`. For example, `m-2` will add a margin of `2rem` to the element. You can also use `mx-{size}` and `my-{size}` to add margin or padding on the horizontal or vertical axis only.

Using these spacing classes can help make your website look more organized and easy to read.

Flexbox - Bootstrap

The Flexbox layout module is supported in Bootstrap, which is a popular front-end development framework. It allows for faster and easier creation of responsive designs.

Using Flexbox in Bootstrap involves utilizing the built-in utility classes to apply various Flexbox properties to elements. For example, the "d-flex" class can be added to a container element to make it a Flexbox container, and the "justify-content" class can be used to align items within the container.

Overall, incorporating Flexbox into Bootstrap can greatly simplify the process of creating flexible and responsive layouts.Sorry, it is not clear what you mean by "Act like API". Could you please provide more context or information?Title: How to Write Code that Mimics an API

When writing code that mimics an API, it is important to make sure that it is both efficient and easy to use. This can be achieved by following certain guidelines and best practices.

// Start by defining your API endpoints and the data that will be returned
const endpoint1 = "";
const endpoint2 = "";
const data = {
  name: "John Doe",
  age: 30,
  email: "[email protected]"

// Create functions for each endpoint that fetch data from the server
function getEndpoint1() {
  return fetch(endpoint1)
    .then(response => response.json())
    .catch(error => console.error(error));

function getEndpoint2() {
  return fetch(endpoint2)
    .then(response => response.json())
    .catch(error => console.error(error));

// Export the functions as a module
export { getEndpoint1, getEndpoint2 };

By defining the API endpoints and data at the beginning of the code, it is easier to manage and modify as needed. Using the


method to retrieve data from the server simplifies the code and allows for easy error handling using


. Exporting the functions as a module makes it easy for other developers to use in their own code.

Technical Interview Guides

Here are guides for technical interviews, categorized from introductory to advanced levels.

View All

Best MCQ

As part of their written examination, numerous tech companies necessitate candidates to complete multiple-choice questions (MCQs) assessing their technical aptitude.

View MCQ's
Made with love
This website uses cookies to make IQCode work for you. By using this site, you agree to our cookie policy

Welcome Back!

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign in
Recover lost password
Or log in with

Create a Free Account

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign up
Or sign up with
By signing up, you agree to the Terms and Conditions and Privacy Policy. You also agree to receive product-related marketing emails from IQCode, which you can unsubscribe from at any time.