I'm trying to show two divs next to each other using Bootstrap, but there is a distance between them. How can i place them exactly next to each other.
The code:
<div class="col-lg-8 col-lg-offset-2 centered">
<div style="float: left; border: 1px solid; width: 227px; height: 50px;"></div>
<div style="float: right; border: 1px solid;width: 227px; height: 50px;"></div>
</div>
Image illustration:
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
Put the Like, Info and Delete buttons side-by-side by nesting all three of them within one <div class="row"> element, then each of them within a <div class="col-xs-4"> element. The row class is applied to a div, and the buttons themselves can be nested within it.
Look into grids in Bootstrap.
You could do something like this:
<div class="row">
<div class="col-xs-6">div 1</div>
<div class="col-xs-6">div 2</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With