Search code examples
htmlcssresponsive-designbootstrap-5dash-bootstrap-components

How to place a div using bootstrap 5?

I want to place div one after another, in different directions like below linked image. enter image description here

Which bootstrap components can use get exact same design? Do you know any design ideas please guide me.

Solution

  • You can take a look at the documentation. However, you can do this using flexboxes.

    <html>
<head>
<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
  </head>
  <body>
<div class="d-flex justify-content-start">
   <div>Hire a Car</div>
</div>
<div class="d-flex justify-content-end">
   <div>Buy a car</div>
</div>
<div class="d-flex justify-content-start">
   <div>Sale a Car</div>
</div>
</body>
</html>

    For more information: https://getbootstrap.com/docs/5.2/utilities/flex/#justify-content