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
}




Warning

</div>
</div>

.button { float:right } .img { float:left } codepen.io/anon/pen/QxzdWw?page=1&amp;
– Joseph Stalin
Jun 29 at 9:13

.button { float:right } .img { float:left }

Sorry. I misspelled the question. I edited
– tom clack
Jun 29 at 9:18

3 Answers
3

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;
}




Warning

</div>
</div>

Sorry. I misspelled the question. I edited.
– tom clack
Jun 29 at 9:18

@tomclack I will edit my answer :)
– Akash Pinnaka
Jun 29 at 9:19

@ tomclack Edited. Use flex-box
– Akash Pinnaka
Jun 29 at 9:25

thank you man :)
– tom clack
Jun 29 at 9:26

You are welcome dude :)
– Akash Pinnaka
Jun 29 at 9:28

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/




Warning

</div>
</div>

not working codepen.io/milo-boyd/pen/NzebMJ?page=1&amp;
– tom clack
Jun 29 at 9:22

You moved the image to right and button to left. It should be vice-versa. :p
– devutkarsh
Jun 29 at 9:23

Here it is - codepen.io/anon/pen/qKLRrY?page=1&amp;
– devutkarsh
Jun 29 at 9:24

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

.img {
float:left
}





Warning

</div>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.