0

I want my items in my div to align at the start and end of the div. However, I'm using bootstrap and I have no idea how do this.

enter image description here

yxlow07
  • 332
  • 2
  • 10

3 Answers3

2

You could use a flexbox with the justify-content-between class:

.main {
  border: 1px solid black;
  width: 40vw;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="d-flex main justify-content-between">
  <Button class="m-2">
  Button 1
  </Button>
  <Button class="m-2">
  Button 2
  </Button>
</div>
Ignace Vau
  • 532
  • 4
  • 19
0

Add bootstrap classes in the parent div More info

d-flex  justify-content-between
Jaswinder Kaur
  • 1,606
  • 4
  • 15
0

you can use the d-flex and justify-content-between classes provided by Bootstrap.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
        <div class="row">
          <div class="col-md-12 d-flex justify-between justify-content-between align-items-center border p-3 mt-5">
              <button type="button" class="btn btn-primary">Primary</button>
              <button type="button" class="btn btn-primary">Primary</button>
          </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </body>
</html>
Upendra Nath Dubey
  • 78
  • 6