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:

Take Free Mock Interview

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:

 .alert 

- base class

 .alert-success 

- for success alerts

 .alert-info 

- for info alerts

 .alert-warning 

- for warning alerts

 .alert-danger 

- 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.
</div>

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

Code:

<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>
</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
Code: 
html
<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">1</a>
    </li>
    <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>
    </li>
  </ul>
</nav>

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.
Code:
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>
  </ol>

  <!-- 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>
    </div>

    <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>
    </div>

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

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
Comments:
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">
      Options
    </button>
    <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>
    </div>
  </div>


  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:

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

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>
    <div class="col-md-4">
      <!-- Content goes here -->
   </div>
   <div class="col-md-4">
      <!-- Content goes here -->
   </div>
  </div>
</div>

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>
  </div>

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>
   </button><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><br>
     <li class="nav-item"><br>
      <a class="nav-link" href="#">About</a><br>
     </li><br>
     <li class="nav-item"><br>
      <a class="nav-link" href="#">Contact</a><br>
     </li><br>
    </ul><br>
   </div><br>
  </nav>

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 `

Example:

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 `

Example:

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 `

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

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

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

.btn-lg

.btn-sm

.img-fluid

.rounded-circle

.form-control-lg

.form-control-sm

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

// Start by defining your API endpoints and the data that will be returned
const endpoint1 = "https://api.example.com/endpoint1";
const endpoint2 = "https://api.example.com/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 };

fetch

.catch()