Skip to main content

Bootstrap 4 Tutorial

Bootstrap 4 is a popular CSS framework for building responsive, mobile-first websites. It includes pre-designed components, a flexible grid system, and many utility classes to style web applications quickly.

Prerequisites​

  1. Basic Knowledge of HTML and CSS: Familiarity with HTML structure and CSS styling will be helpful.
  2. Text Editor: Use any code editor like VS Code, Atom, or Sublime Text.

1. Setting Up Bootstrap 4​

There are two main ways to include Bootstrap 4 in your project:

Option 1: CDN (Content Delivery Network)​

Add the following <link> and <script> tags in the <head> section of your HTML to use Bootstrap 4 via CDN:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Option 2: Installing via npm​

If you’re using a build tool like Webpack, install Bootstrap via npm:

npm install bootstrap@4.5.2

Then, import Bootstrap in your JavaScript entry file:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

2. Bootstrap 4 Basics​

Bootstrap uses a grid system and ready-made components for responsive layouts.

The Grid System​

Bootstrap’s grid system is based on a 12-column layout. Here’s an example layout with a header, content, and footer:

<div class="container">
  <div class="row">
    <header class="col-12 bg-primary text-white text-center p-3">
      <h1>My Website</h1>
    </header>
  </div>
  <div class="row">
    <main class="col-md-8 col-12 p-4">
      <h2>Welcome</h2>
      <p>This is an example website using Bootstrap 4.</p>
    </main>
    <aside class="col-md-4 col-12 bg-light p-4">
      <h3>Sidebar</h3>
      <p>Links and additional content go here.</p>
    </aside>
  </div>
  <div class="row">
    <footer class="col-12 text-center p-3 bg-dark text-white">
      © 2023 My Website
    </footer>
  </div>
</div>

Breakpoints​

Bootstrap 4 has 5 breakpoints for responsive design:

  • col- (extra small, default, 0px and up)
  • col-sm- (small, 576px and up)
  • col-md- (medium, 768px and up)
  • col-lg- (large, 992px and up)
  • col-xl- (extra large, 1200px and up)

3. Common Bootstrap 4 Components​

Bootstrap 4 includes several pre-designed components to speed up development.

A responsive navigation bar:

<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="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
    </ul>
  </div>
</nav>

Cards​

Cards are flexible containers for displaying content.

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
  <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.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Buttons​

Buttons are available in different colors and sizes.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>

Forms​

A simple form using Bootstrap’s form controls:

<form>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Alerts​

Bootstrap provides several styles for alert messages.

<div class="alert alert-success" role="alert">This is a success alert!</div>
<div class="alert alert-danger" role="alert">This is a danger alert!</div>
<div class="alert alert-warning" role="alert">This is a warning alert!</div>

4. Customizing Bootstrap​

To customize Bootstrap styles, you can either override the CSS in a separate stylesheet or use Bootstrap’s SASS variables.

Example: Overriding CSS​

Add custom styles in a separate CSS file:

.custom-navbar {
    background-color: #333;
    color: white;
}

Example: Using SASS for Customization​

If you’re using SASS, you can change Bootstrap’s variables by installing sass and creating a custom SASS file.

npm install sass

In your custom SCSS file, override variables before importing Bootstrap:

$primary: #3498db;
@import 'bootstrap/scss/bootstrap';

Summary​

This tutorial introduced the basics of setting up Bootstrap 4 and using its components to create a responsive web layout. You learned to:

  1. Set up Bootstrap using a CDN or npm.
  2. Use Bootstrap’s grid system and responsive design utilities.
  3. Implement common components like the navbar, cards, forms, and buttons.
  4. Customize Bootstrap styles by overriding CSS or using SASS variables.

Bootstrap 4 provides a solid foundation for building modern web applications quickly and efficiently.

Content Review​

The content in this repository has been reviewed by chevp. Chevp is dedicated to ensuring that the information provided is accurate, relevant, and up-to-date, helping users to learn and implement programming skills effectively.

About the Reviewer​

For more insights and contributions, visit chevp's GitHub profile: chevp's GitHub Profile.