2 div next to each other in bootstrap

Question

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:

Answer 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>

Answer 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>

Answer 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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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