Open In App

Bootstrap 5 Layout Column sizing

Last Updated : 18 Nov, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Layout Column sizing is used to set the width of the column element. To create equal widths columns, .col within .row classes are used. We can also use the subset of classes to set split the columns unequally.

Layout Column sizing used Classes:

  • .row: This class is used to create rows for a layout.
  • .col: This class is used to create columns for a layout.
  • .col-*: This class is used to set the size of columns of the layout.

Syntax:

<div class="row">
    <div class="col">
        ...
    </div>
    ...
</div>

 

Example 1: In this example, we will create 2 rows and 1 column using .row and .col classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Layout Column Sizing</title>
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Layout Column Sizing</h2>
  
        <div class="row">
            <div class="col">
                <input type="text" class="form-control" 
                    placeholder="Username/Email"
                    aria-label="Username/Email">
            </div>
        </div>
        <br>
  
        <div class="row">
            <div class="col">
                <input type="password" class="form-control" 
                    placeholder="Password"
                    aria-label="Password">
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

 

Example 2: In this example, we will create 3 rows and 2 columns using .row, .col, and .col-* classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Layout Column Sizing</title>
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Layout Column Sizing</h2>
  
        <div class="row">
            <div class="col-sm-6">
                <input type="text" class="form-control" 
                    placeholder="First Name">
            </div>
            <div class="col-sm-6">
                <input type="text" class="form-control" 
                    placeholder="Last Name">
            </div>
        </div>
        <br>
  
        <div class="row">
            <div class="col-sm-6">
                <input type="email" class="form-control" 
                    placeholder="Email Id">
            </div>
            <div class="col-sm-6">
                <input type="tel" class="form-control" 
                    placeholder="Mobile">
            </div>
        </div>
        <br>
  
        <div class="row">
            <div class="col-sm-8">
                <input type="text" class="form-control" 
                    placeholder="Address">
            </div>
            <div class="col-sm">
                <input type="text" class="form-control"
                    placeholder="Zip Code">
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/forms/layout/#column-sizing



Previous Article
Next Article

Similar Reads

Bootstrap 5 Layout Horizontal form label sizing
Bootstrap 5 Layout Horizontal form label sizing is used to set the label of the form input field in different sizes. To set the label size, use the .col-form-label-sm or .col-form-label-lg class to &lt;label&gt; or &lt;legend&gt; tag with the size of .form-control-lg and .form-control-sm. Horizontal form label sizing used Classes: .col-form-label-s
2 min read
Bootstrap 5 Layout Auto-sizing
Bootstrap5 layout Auto-sizing dynamically calculates the size height, width, and positions of the elements can be adjusted automatically. It uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed. Bootstrap5 Layout Auto-sizing Class: col-auto: This class is us
2 min read
Primer CSS Layout Sidebar Sizing
Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc. In this article, we will learn about Primer CSS Layout Sidebar Sizing. Pr
2 min read
Tachyons Layout Box Sizing
Tachyons is a CSS toolkit that is used to create a responsive website. In this article, we will learn how to include box-sizing using Tachyons. Box Sizing in Tachyons is used to create the different sizes of the box on the webpage. Every element that we are using in the webpage has different-sized boxes. Examples are HTML, body, div, article, and m
4 min read
How to create 2 column layout while keeping column background colors full size ?
In this article, we will learn how to make two-column layouts while keeping column background colors full size. Approach: We can make a two-column layout with background colors occupying full size by using the flexbox technique in CSS and by setting the height of the columns with respect to the viewport. HTML code: The following code demonstrates t
1 min read
How to create two column grid and two column layout using jQuery Mobile ?
jQuery Mobile provides CSS-based columns that are responsive. The grids have a width of 100%, grids do not have a background color, border, and padding. The grids contain elements in them, these elements can be made float side-by-side using the ui-block-a or ui-block-b or ui-block-c or ui-block-d class. Columns in a grid are of equal width. In 2 co
2 min read
How to Create a Three-Column Layout in Bootstrap?
Creating a three-column layout in Bootstrap involves dividing the container into three equal-width columns using the col-sm-4 class within a row and container. This ensures the columns are responsive and maintain equal width on small-sized devices and larger, providing a balanced layout for organizing content effectively. Syntax&lt;div class="conta
2 min read
How to Create a Basic Two-Column Layout using Bootstrap 5 ?
To create a basic two-column layout using Bootstrap, first, we have to enclose your content within a container, then create two divs with classes like col or col-xx, where xx represents the breakpoint for responsive behavior. Place your content inside these columns, and Bootstrap will handle the layout, adapting it for various screen sizes. Table o
3 min read
How to Create a Four-Column Layout with Bootstrap ?
In Bootstrap, creating a column layout is important for organizing content into a structured grid system. A four-column layout allows for efficient arrangement of content, such as displaying courses, products, or services, with flexibility in responsiveness for various screen sizes. Below are the approaches to create a four-column layout with boots
2 min read
Bootstrap | Sizing an element with Examples
As the name suggests sizing means to adjust the size of an element relative to its parent with the help of height and width utilities(in px or in %). Width and height utilities are generated from the $sizes Sass map in _variables.scss. By default Bootstrap sizing includes supports for 25%, 50%, 75% and 100%. You can add specific sizes if you need a
3 min read