CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
tom clack
tom clack

Reputation: 191

Bootstrap divs float right-left

https://codepen.io/milo-boyd/pen/NzebMJ?page=1&

How Can I justify the button to the left, the image to the right? HTML will not change. Thank you.

.button {
  float:right
}

.img {
  float:left
}
<div class="container">
  <div class="row">

  <div class="col-md-6 text">
    <button type="button" class="btn btn-warning button">Warning</button>

  </div>

 <div class="col-md-6 img">
   <img 
   src="https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" 
   style="width:100%"/>
  </div>
    
</div>
</div>

Upvotes: 0

Views: 930

Answers (3)

Jasmendar Kumar
Jasmendar Kumar

Reputation: 9

.text{
  float:right;
  text-align:right;
  display:block;
}

.img {
  float:left
}

<div class="container">
  <div class="row">

  <div class="col-md-6 text">
    <button type="button" class="btn btn-warning button">Warning</button>

  </div>

 <div class="col-md-6 img">
   <img 
   src="https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" 
   style="width:100%"/>
  </div>

</div>
</div>

Upvotes: 0

Akash Pinnaka
Akash Pinnaka

Reputation: 475

Try this

https://codepen.io/anon/pen/GGPNVw?editors=1100.

No change in html.

.row {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  justify-content: space-between;
}

.text {
  float:left;
}
<div class="container">
  <div class="row">
    <div class="col-md-6 img">
      <img src="https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" style="width:100%"/>
    </div>
  
    <div class="col-md-6 text">
      <button type="button" class="btn btn-warning button">Warning</button>
    </div>    
</div>
</div>

Upvotes: 1

Dev Utkarsh
Dev Utkarsh

Reputation: 1496

No need to write external css for this. Bootstrap comes with alignment properties. Just use classes as - float-left and float-right. Have a look at this documentation - https://getbootstrap.com/docs/4.0/utilities/float/

<div class="container">
  <div class="row">
 <div class="col-md-6 img">
   <img class="float-left" src="https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" style="width:100%"/>
  </div>
  <div class="col-md-6">
    <button type="button" class="btn btn-warning button float-right">Warning</button>

  </div>

</div>
</div>

Upvotes: 0

Related Questions