Bootstrap 4

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

Bootstrap 4 Introduction

🔹 What is Bootstrap?

Bootstrap is a free, open-source CSS framework developed by Twitter for creating responsive, mobile-first websites quickly and easily.

Bootstrap 4 includes:

Predefined CSS classes
Responsive grid system
JavaScript plugins (like modals, carousels, etc.)
Customizable themes

🔹 Why Use Bootstrap?

Reduces development time
Ensures mobile responsiveness
Consistent design
Built-in components (buttons, forms, navbars, etc.)
Easy customization and compatibility with all modern browsers

🔹 Bootstrap 4 CDN Setup

You can quickly start using Bootstrap by including it via CDN:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bootstrap Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <!-- Your content here -->

  <!-- jQuery and Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

🔹 Bootstrap 4 Grid System

Bootstrap’s grid system uses 12 columns and helps make layouts responsive.

Example (2 columns 50% each):

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

🔹 Key Components

Component	Class Example
Button	`btn btn-primary`
Navbar	`navbar navbar-light`
Form	`form-group`, `form-control`
Card	`card`, `card-body`
Alerts	`alert alert-success`

Practice Questions

Q1. Create a primary button with button labeled "Click Me".

Q2. Create a responsive container with two columns.

Q3. Add a success alert box.

Q4. Create a Bootstrap card.

Q5. Create a form input with Bootstrap style.