How To Put Elements Side By Side Using Bootstrap

admin_img Posted By Bajarangi soft , Posted On 06-10-2020

We will create a basic grid system that starts out stacked on extra small devices, before becoming horizontal on larger devices,The following example shows a simple "stacked-to-horizontal" two-column layout, meaning it will result in a 50%/50% split on all screens, except for extra small screens, which it will automatically stack (100%) In Bootstrap 4, there is an easy way to create equal width columns for all devices: just remove the number from .col-size-* and only use the , .col-size class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width. The size classes determines when the columns should be responsive.

Bootstrap Stacked and Horizontal

1.How To Divide Div's Using Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h1>Grid Example</h1>
    <p>This example demonstrates a 50%/50% split on small, medium, large and xlarge devices. On extra small devices, it will stack (100% width).</p>
    <p>Resize the browser window to see the effect.</p>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 bg-success">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
            <div class="col-sm-6 bg-warning">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <h1>Grid Example container-fluid</h1>
    <p>This example demonstrates a 50%/50% split on small, medium, large and xlarge devices. On extra small devices, it will stack (100% width).</p>
    <p>Resize the browser window to see the effect.</p>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 bg-success">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
            <div class="col-sm-6 bg-warning">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
            </div>
        </div>
    </div>
</div>
</body>
</html>
2.How To Divide Div's Using Bootstrap Example-1
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
    <h1>Auto Layout Columns</h1>
    <p>In Bootstrap 4, there is an easy way to create equal width columns: just use the <code>.col-size</code> class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.</p>
    <p>Two columns: 50% width on all screens, except for extra small (100% width on screens less than <strong>576px</strong> wide)</p>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm bg-success">1 of 2</div>
            <div class="col-sm bg-warning">2 of 2</div>
        </div>
    </div>
    <br>

    <p>Four columns: 25% width on all screens, except for extra small (100% width on screens less than <strong>576px</strong> wide)</p>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm bg-success">1 of 4</div>
            <div class="col-sm bg-warning">2 of 4</div>
            <div class="col-sm bg-success">3 of 4</div>
            <div class="col-sm bg-warning">4 of 4</div>
        </div>
    </div>
</div>

</body>
</html>

Related Post