• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

Bootstrap 4 Introduction

Next →

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

Next →

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