'2 div next to each other in bootstrap

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:

enter image description here

htmlcsstwitter-bootstrap


Solution 1:[1]

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>

Solution 2:[2]

Adding to Lschessinger's answer you could use offset to center the blocks. Look here under Offsetting columns

Maybe this is what you're looking for?

<style>
    .border {border: 1px solid #CCC;}
</style>

<div class="row">
    <div class="col-xs-2 border col-xs-offset-4">div 1</div>
    <div class="col-xs-2 border">div 2</div>
</div>

Or if you have to stick to your code with the inline styles and specific widths then maybe this, you can increase the width between by increasing the width 454px to 464px for a 10px gap, and so on:

<div class="col-lg-12">
  <div style="width: 454px;" class="center-block">
    <div style="border: 1px solid; width: 227px; height: 50px;" class="pull-left"></div>
    <div style="border: 1px solid; width: 227px; height: 50px;" class="pull-right"></div>
  </div>
</div>

Solution 3:[3]

One approach is to have a row containing two div elements. The elements will seemingly stack next to each other due to the fact that Bootstrap is built with flexbox.

In the following example I'm using the class justify-content-center to center both elements. And col-auto that will size columns based on the natural width of their content.

div{border:1px solid blue}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">
  <div class="row justify-content-center p-3">
    <div class="col-auto">
      content one
    </div>
    <div class="col-auto">
      content two
    </div>
  </div>
</div>

Align the elements to the left by using justify-content-start

div{border:1px solid blue}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">
  <div class="row justify-content-start p-3">
    <div class="col-auto">
      content one
    </div>
    <div class="col-auto">
      content two
    </div>
  </div>
</div>

Align the elements to the right by using justify-content-end

div{border:1px solid blue}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">
  <div class="row justify-content-end p-3">
    <div class="col-auto">
      content one
    </div>
    <div class="col-auto">
      content two
    </div>
  </div>
</div>

Note: This codes do not have breakpoints. If you want to add breakpoints use this format: col-{breakpoint}-auto or/and justify-content-{breakpoint}-auto

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 lschlessinger
Solution 2
Solution 3 Gass

Related Questions