• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

Bootstrap 4 Introduction

Next →

Bootstrap 4 is a front-end framework used to build responsive and mobile-first websites quickly. It includes pre-designed HTML, CSS, and JavaScript components that help developers create layouts and user interfaces without writing everything from scratch. With Bootstrap 4, you can easily design buttons, forms, navigation bars, modals, alerts, and grids that automatically adjust to different screen sizes.

Bootstrap was originally developed by Twitter engineers to create consistency across web interfaces. Over the years, it evolved into one of the most popular open-source frameworks for front-end development. Bootstrap 4 is the fourth major release and comes with major upgrades like Flexbox-based layouts, SASS support, and modern browser optimization.

Why Use Bootstrap 4 for Web Development?

Developers use Bootstrap 4 because it simplifies responsive web design. Instead of building layouts manually using CSS, you can use Bootstrap’s predefined grid system and UI components.

Here are the main benefits of using Bootstrap 4:

  • Responsive layouts: Designs adapt automatically to screens of all sizes.

  • Time-saving: Predefined CSS classes and JavaScript plugins reduce coding effort.

  • Cross-browser consistency: Looks the same on Chrome, Firefox, Edge, and Safari.

  • Customizable: You can modify default settings using SASS variables.

  • Large community: Thousands of contributors provide themes, examples, and fixes.

Bootstrap 4 gives developers the freedom to focus on logic and content rather than styling every element manually.

Main Features of Bootstrap 4

Bootstrap 4 introduced major structural and functional updates. The table below highlights the most important features:

Feature Description
Flexbox Grid System Built entirely on Flexbox for easier alignment and layout control.
Rem & Em Units Uses scalable font-based units for responsive typography.
Cards Component Combines panels, wells, and thumbnails into one flexible layout container.
Additional Breakpoints Added xl for extra-large screens.
Modern Browser Focus Dropped IE8 support to improve performance.
SASS Support Replaced Less with SASS for faster and cleaner customization.

These features make Bootstrap 4 modern, lightweight, and developer-friendly.

Bootstrap 4 Folder Structure

When you download Bootstrap 4, it comes with organized folders that contain the CSS and JS files required to use the framework. Below is a simplified view:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
├── js/
│   ├── bootstrap.js
│   ├── bootstrap.min.js
└── fonts/ (removed in Bootstrap 4)

  • The CSS folder contains all the styling files for layout and design.

  • The JS folder includes scripts for interactive components like modals, dropdowns, and tooltips.

  • The fonts folder was part of older versions, but Bootstrap 4 removed it. You can now use Font Awesome or Bootstrap Icons for icons.

Understanding this folder structure helps you link files correctly in your project and manage resources efficiently.

How to Add Bootstrap 4 to Your Project

You can include Bootstrap 4 in your project in two simple ways — using a CDN or adding local files.

1. Adding Bootstrap 4 via CDN

A Content Delivery Network (CDN) lets you link Bootstrap directly from the internet without downloading it. This is the fastest and most common setup.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

  <h1 class="text-center text-primary mt-5">Welcome to Bootstrap 4</h1>

  <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.0/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Once you add these links, Bootstrap’s styling and scripts are immediately ready to use.

2. Adding Bootstrap 4 Locally

If you prefer to work offline or want more customization, you can download Bootstrap 4 files from the official website. After downloading, place them inside your project folder and link them like this:

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>

Using local files gives you full control over which components to include or modify.

What is Bootstrap 4 Grid System?

One of the most powerful parts of Bootstrap 4 is its 12-column grid system, which uses Flexbox for alignment and layout structure. It allows you to organize content easily and make layouts that adjust to different devices.

Here’s a simple example:

<div class="container">
  <div class="row">
    <div class="col-sm-4 bg-primary text-white">Column 1</div>
    <div class="col-sm-4 bg-success text-white">Column 2</div>
    <div class="col-sm-4 bg-warning text-white">Column 3</div>
  </div>
</div>

Each col-sm-4 divides the row into three equal parts (4 + 4 + 4 = 12). On smaller screens, these columns automatically stack vertically.

Grid Breakpoints in Bootstrap 4

Bootstrap’s responsive grid system adjusts according to screen width. It includes the following breakpoints:

Class Prefix Screen Width Device Type
.col- <576px Extra small (phones)
.col-sm- ≥576px Small devices (tablets)
.col-md- ≥768px Medium devices (laptops)
.col-lg- ≥992px Large devices (desktops)
.col-xl- ≥1200px Extra-large screens

This responsive behavior makes Bootstrap 4 layouts adaptable and reliable across all device sizes.

Advantages of Using Bootstrap 4

  1. Faster development: Reduces the need for custom CSS and JavaScript.

  2. Responsive and mobile-first: Automatically scales layouts for every device.

  3. Cross-browser support: Works across all modern browsers.

  4. Customizable design: You can adjust Bootstrap’s look with SASS or custom CSS.

  5. Extensive components: Includes forms, modals, alerts, carousels, and more.

  6. Active community: Constant updates, fixes, and third-party themes available.

Limitations of Bootstrap 4

While Bootstrap 4 is powerful, there are a few minor drawbacks:

  • Similar design feel: Many websites using default Bootstrap styles may look alike.

  • File size: The complete framework might be heavy for very small projects.

  • Learning curve: New developers need time to understand the grid system and class structure.

Once you understand the basics, these limitations become easy to manage through customization and selective use of components.

Summary of the Tutorial

In this tutorial, you learned what Bootstrap 4 is and how it helps developers build responsive, mobile-first websites quickly. You explored its main features, including the Flexbox grid system, SASS support, and responsive breakpoints. You also learned two ways to include Bootstrap 4 — through a CDN and local files — and understood the importance of its grid layout system.

In the next chapter, we’ll learn about Bootstrap 4 Containers, which are the foundation for organizing content and creating consistent page layouts.

Practice Questions

  1. Create a simple HTML page and correctly link the Bootstrap 4 CSS and JS files using the CDN.

  2. Use Bootstrap 4 typography classes to create headings that adjust size and color across screen sizes.

  3. Create five buttons using Bootstrap 4 button classes: primary, secondary, success, warning, and danger.

  4. Design a responsive navbar that collapses into a hamburger menu on smaller screens.

  5. Align text differently on small and large devices using Bootstrap 4 display utilities.

  6. Create a three-column layout using the Bootstrap 4 grid system that stacks vertically on small screens.

  7. Build a “Welcome” section with a dark background and light-colored centered text.

  8. Add padding and margin to elements using Bootstrap 4 spacing classes.

  9. Insert an image and make it automatically adjust its size based on the device screen.

  10. Display three alert messages using Bootstrap 4’s alert component — success, warning, and danger.

Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top