How to usethe offset class in Bootstrap

Q: How to usethe offset class in Bootstrap

To center a column using Bootstrap’s offset class, apply col-md-offset-4 to a column with col-md-4, creating a 4-unit column with a 4-unit offset, effectively centering it.

Approach 2: Margin auto

To center a column using Bootstrap’s offset class, apply col-md-offset-4 to a column with col-md-4, creating a 4-unit column with a 4-unit offset, effectively centering it.

Example: This HTML uses Bootstrap’s grid system to center a column: a 6-unit column with a 3-unit offset, vertically aligned and horizontally centered within a container.

html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
        crossorigin="anonymous" />
</head>

<body>
    <div class="container">
        <div class="row">
            <div style="height: 200px;" 
                 class="col-md-6 offset-md-3
                        text-center bg-success">.
                col-md-6 .offset-md-3
            </div>
        </div>
    </div>
</body>

</html>

Output

How to set column in center using Bootstrap?

Setting a column in the center using Bootstrap refers to the process of horizontally aligning a column within its parent element using Bootstrap’s predefined classes or utilities. This alignment ensures that the column is positioned centrally within its parent container on the webpage.

There are some approaches to Setting a column in the center using Bootstrap: