Bootstrap 4 Guide

Bootstrap 4 Guide

I. Introduction

Bootstrap is an open-source front-end framework for developing responsive, mobile-first websites. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Why use Bootstrap? It simplifies the web development process by providing ready-to-use components, a responsive grid system, and extensive customization options. In this article, you will learn how to utilize Bootstrap 4 effectively to create stunning and responsive web applications.

To get started, you need to include Bootstrap in your project. You can do this by linking to the CDN in the head section of your HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

II. Bootstrap 4 Layout

A. Bootstrap Grid System

The Bootstrap Grid System enables you to create responsive layouts using a series of containers, rows, and columns. The grid is based on a 12-column layout.

B. Responsive Breakpoints

Bootstrap provides several responsive breakpoints that adapt the layout based on the screen size:

C. Containers

A container is used to create a responsive fixed width or fluid width layout.

<div class="container">
  <!-- Content goes here -->
</div>

D. Rows

Rows are used to create horizontal groups of columns. Use the row class to encapsulate columns:

<div class="row">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>

E. Columns

Columns can be defined based on different screen sizes. For example:

<div class="row">
  <div class="col-sm-6">Half Width</div>
  <div class="col-sm-6">Half Width</div>
</div>

III. Bootstrap 4 Components

A. Alerts

<div class="alert alert-success" role="alert">
  Success! Your action was successful.
</div>

B. Badges

<span class="badge badge-primary">New</span>

C. Breadcrumbs

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active">Library</li>
  </ol>
</nav>

D. Buttons

<button type="button" class="btn btn-primary">Primary Button</button>

E. Button Groups

<div class="btn-group">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

F. Card

<div class="card">
  <div class="card-body">
    This is a card.
  </div>
</div>

G. Carousel

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="... ">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </a>
</div>

H. Collapse

<button class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample">Toggle Collapse</button>
<div class="collapse" id="collapseExample">
  This is hidden content.
</div>

I. Dropdowns

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">Dropdown button</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
  </div>
</div>

J. Forms

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

K. Input Groups

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" placeholder="Amount" aria-label="Amount (to the nearest dollar)">
</div>

L. Jumbotron

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

M. List Group

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
</ul>

N. Media Object

<div class="media">
  <img src="..." class="mr-3" alt="... ">
  <div class="media-body">
    <h5 class="mt-0">Media Heading</h5>
    <p>Some placeholder content</p>
  </div>
</div>

O. Modal

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

P. Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</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 active"><a class="nav-link" href="#">Home</a></li>
    </ul>
  </div>
</nav>

Q. Pagination

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
  </ul>
</nav>

R. Popovers

<button type="button" class="btn btn-secondary" data-toggle="popover" title="Popover title" data-content="Some content inside the popover">Popover</button>

S. Progress Bars

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>

T. Spinners

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

U. Toasts

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip on top">Tooltip on top</button>

<div class="border">This has a border.</div>

<div class="bg-primary text-white">Primary background</div>

<div class="d-none d-md-block">Hide on small screens</div>

<div class="d-flex justify-content-around">
  <div>1</div>
  <div>2</div>
</div>

<div class="position-relative">
  <div class="position-absolute">I'm absolutely positioned.</div>
</div>

<img src="..." class="img-fluid" alt="Responsive image">

<div class="mt-3 mb-3">Margins top and bottom</div>

<p class="text-center">Centered text</p>

<div class="shadow">This has a shadow</div>

<div class="d-flex align-items-center">
      <div>Item</div>
      <div>Item</div>
  </div>

<style>
    .btn-primary {
      background-color: #ff5733;
    }
  </style>

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <title>Basic Bootstrap Example</title>

</head>

<body>

  <div class="container">

    <h1>Hello, Bootstrap!</h1>

    <button