bootstrap align element on one separate line-CodePudding

Simple question how to get this rendering (see img)? using bootstrap, I tried but I can't.

Thanks in advance.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <div class="container">
      <div class="row">
        <div class="d-flex">
        <div class="p-2">Flex item</div>
        <div class="p-2">Flex item</div>
        <div class="ml-auto p-2">Flex item</div>
       </div>
      </div>
     </div>

CodePudding user response：

You do not need to insert it in a row, or a container. The d-flex div is already a row. This works just as you pictured

.d-flex div {
background-color: red;
outline: 1px solid black;
}

.d-flex {
  background-color: grey;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

CodePudding user response：

You can do something like this.

.d-flex {
  display: flex;
  flex-direction: row; 
  float: left;
  width: 50%;
}

.p-2 {
  width:100px;
}

.d-flex-r {
  flex-direction: row; 
  float: right;
}

<div class="container">
  <div class="row">
    <div class="d-flex">
       <div class="p-2">Flex item</div>
       <div class="p-2">Flex item</div>
    </div>
    <div class="d-flex-r">
    <div class="ml-auto p-2">Flex item</div>
   </div>
  </div>
 </div>

CodePudding user response：

Asuming you can use bootstrap 5:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="d-flex bd-highlight mb-3">
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="ms-auto p-2 bd-highlight">Flex item</div>
  </div>
</div>

CodePudding user response：

Use d-flex justify-content-between

.item-container,
.item {
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .15)
}

.item {
  padding: 0.5rem;
}

<link rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="d-flex justify-content-between item-container">
  <div class="d-flex">
    <div class="item">Flex item</div>
    <div class="item">Flex item</div>
  </div>
  <div class="item">Flex item</div>
</div>