Categories

Wednesday, October 2, 2024
#919814419350 therichposts@gmail.com
BootstrapBootstrap 5

Basic Guide to Managing Rows and Columns in Bootstrap 5

Basic Guide to Managing Rows and Columns in Bootstrap 5

Hello guys how are you? Welcome back to my blog. Today in this blog post I am going to know you Basic Guide to Managing Rows and Columns in Bootstrap 5.

Bootstrap 5 provides a powerful grid system to create responsive layouts easily. Here’s a basic guide to managing rows and columns in Bootstrap 5.

Basic Concepts

  1. Container: This is the outermost element. You use it to contain rows and columns.
  2. Row: Rows are used to create a horizontal group of columns.
  3. Column: Columns are used to create vertical alignments. Bootstrap uses a 12-column grid system.

Creating a Container

You start by creating a container. There are two types of containers in Bootstrap:

  • .container: A responsive fixed-width container.
  • .container-fluid: A full-width container that spans the entire width of the viewport.
<div class="container">
  <!-- Content here -->
</div>

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

Creating Rows and Columns

Within a container, you create rows using the .row class. Inside rows, you create columns using the .col class.

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

In the example above, three equal-width columns are created within a row. By default, columns are equal in width.

Specifying Column Width

Bootstrap’s grid system allows you to specify the width of columns. The grid is divided into 12 equal parts.

<div class="container">
  <div class="row">
    <div class="col-4">
      Column 1 (4 units wide)
    </div>
    <div class="col-8">
      Column 2 (8 units wide)
    </div>
  </div>
</div>

Responsive Columns

You can create responsive layouts by specifying column widths for different breakpoints. The breakpoints are:

  • col- for all screen sizes (extra small and up)
  • col-sm- for small devices (≥576px)
  • col-md- for medium devices (≥768px)
  • col-lg- for large devices (≥992px)
  • col-xl- for extra large devices (≥1200px)
  • col-xxl- for extra extra large devices (≥1400px)
<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">
      Column 1 (full width on small screens, 8 units on medium and larger screens)
    </div>
    <div class="col-6 col-md-4">
      Column 2 (6 units on small screens, 4 units on medium and larger screens)
    </div>
  </div>
</div>

Offset Columns

You can offset columns to create gaps between them.

<div class="container">
  <div class="row">
    <div class="col-4">
      Column 1
    </div>
    <div class="col-4 offset-4">
      Column 2 (offset by 4 units)
    </div>
  </div>
</div>

Nesting Columns

You can nest rows and columns within columns to create more complex layouts.

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

Example

Here’s a complete example demonstrating various concepts:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Grid Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-4">
        Column 1
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        Column 2
      </div>
      <div class="col-12 col-md-12 col-lg-4">
        Column 3
      </div>
    </div>
    <div class="row">
      <div class="col-6 offset-3 col-md-4 offset-md-4">
        Offset Column
      </div>
    </div>
    <div class="row">
      <div class="col">
        Nested Column
        <div class="row">
          <div class="col">
            Nested Column 1
          </div>
          <div class="col">
            Nested Column 2
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

This should give you a solid foundation to start working with rows and columns in Bootstrap 5.

This is it guys and if you will have any kind query, suggestion or requirement then feel free to comment below.

Thanks

Ajay

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.