How to use col-md-6 In Bootstrap
By assigning col-md-6 to both columns within the row and applying the text-end class directly to the <div>, the text is aligned to the right, providing a clean and responsive layout.
Example: In this example, we will use col-md-6 to align columns in a row on the text end.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container text-center"> <div class="mt-1"> <h2 class="text-success">w3wiki</h2> <h2>How to col align right in Bootstrap 5 using </h2> </div> <section> <div class="container"> <div class="row bg-success text-light"> <div class="col"> <div class="text-end"> <p>HTML <span>HyperText Markup Language</span> </p> <p>CSS <span>Cascading Style Sheet</span> </p> <p> IP<span>Internet Protocol</span> </p> <p> DS<span>Data Structure</span> </p> </div> </div> <div class="col-6 bg-warning"> <canvas></canvas> </div> </div> </div> </section> </div> </body> </html> |
Output
How to align columns in a row on text end using Bootstrap 5 ?
In this article, we will see how to align columns in a row on the text end using Bootstrap5. Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc.
Table of Content
- Using col-auto
- Using col with text-end