DEV Community

Ranjith srt
Ranjith srt

Posted on

Bootstrap

Bootstrap 5.3 (Latest)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <h1 class="text-primary">Hello, Bootstrap!</h1>
    <button class="btn btn-success">Click Me</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Container :

Container - 80% width
Container-fluid - 100% full width 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0bloebkvlsirack5f16.jpg)
Enter fullscreen mode Exit fullscreen mode

Container Break points :

Container-sm
Container -md
Container -lg
Container -xl
Container -xxl
Enter fullscreen mode Exit fullscreen mode

Grid :

1 row naa - 12 cols

Image description

Col - Ennumber of cols nowrap
Enter fullscreen mode Exit fullscreen mode 
col-1 to col-12 12 cols layout automatically wrap
Enter fullscreen mode Exit fullscreen mode

Media Grid system :

Sm - col-sm-* 1 t0 12
Md - col-md-* " " 
Lg - col-lg-* "" 
xl - col-xl-* "" 
xxl - col-xxl-* ""
Enter fullscreen mode Exit fullscreen mode

Offset:

Image description

Image description

Break points

Offset-1 to 11

Image description

Top comments (0)