• Home /
  • What /
  • Bootstrap beginner's tutorial

Bootstrap beginner's tutorial

What is Bootstrap?

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Why Use Bootstrap?

  • Ease of Use: Bootstrap is very easy to use. Anyone with just basic knowledge of HTML and CSS can start using Bootstrap.
  • Responsive Features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops.
  • Mobile-First Approach: Styles are designed to be mobile-first, meaning Bootstrap focuses on developing sites for smaller screens first and then adapting them to larger screens.
  • Browser Compatibility: It is compatible with all modern browsers and may provide fallbacks for older browsers.

Getting Started with Bootstrap

Step 1: Setting Up Bootstrap

Bootstrap can be included in your project in several ways:

  • CDN: The quickest way to include Bootstrap is via a Content Delivery Network (CDN). Add the following links in the <head> section of your HTML:
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Step 2: Understanding the Grid System

Bootstrap uses a responsive grid system that enables you to create complex layouts using a series of rows and columns. Here’s a simple example:

<div class="container">
  <div class="row">
    <div class="col">
      Column 1
    </div>
    <div class="col">
      Column 2
    </div>
    <div class="col">
      Column 3
    </div>
  </div>
</div>
  • Container: Containers are used to pad the content inside of them, and everything should be placed within a container.
  • Rows: A row is used to group the columns horizontally.
  • Columns: Content is placed in columns, and only columns may be immediate children of rows.
Step 3: Using Bootstrap Components

Bootstrap includes numerous reusable components for designing interfaces such as navbars, alerts, cards, and more. Here is how you can use a Bootstrap card component:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Step 4: Customize Bootstrap

You can customize Bootstrap components using your own CSS or overriding Bootstrap’s default variables in a Sass source file.
Recommended Course

Python Mega Course: Learn Python in 60 Days, Build 20 Apps
Learn Python on Udemy completely in 60 days or less by building 20 real-world applications from web development to data science.


Buy the Course