htmlbootstrap-4bootstrap-grid

Right alignment first column and left align second column in div of Bootstrap

I looked through the official Bootstrap grid layout page and there are many examples of alignment. I am looking forward to a class that will make the layout like

enter image description here

Every content of the first column will start with right alignment and every content of the second column will start with left alignment. If we use justify-content-center class then every content starts with the center. I know how to do it using CSS but I don't want to do this for every content.

Do you have any class that class will set every content in the right alignment?

Solution

  • I hope this is what you're looking for:

    enter image description here

    Source:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>

    <div class="container">
        <div class="row">
          <div class="col-md text-right">
           <img src="https://via.placeholder.com/200x150/000000/FFFFFF/" />
           <h1>Hello World</h1>
           <p>Bootstrap grid</p>
          </div>
          <div class="col-md">
            <img src="https://via.placeholder.com/200x150/000000/FFFFFF/" />
            <h1>Hello World</h1>
            <p>Bootstrap grid</p>
          </div>
          
        </div>
      </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>