Bootstrap: two divs with 50% width in a col

Question

Consider this example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container">
  <div class="row">
    <div class="col-xs-12" style="background-color: black;" >
      <div style="width: 50%; height:20px; background-color: red;display: inline-block;"></div>
      <div style="width: 50%; height:20px; background-color: red;display: inline-block;"></div>
    </div>       
  </div>
</div>
</body>
</html>

Why the two divs can't fit in the col? Pretty simple, but it doesn't work.

Yep. It's because of the whitespace(s) between the two `div`s. — Roland Rácz, Jan 09 '18 at 15:37

score 1 · Answer 1 · answered Jan 09 '18 at 15:37

1

You are missing the point of using Bootstraps grid layout...

Instead of this:

<div class="col-xs-12" style="background-color: black;" >
  <div style="width: 50%; height:20px; background-color: red;display: inline-block;"></div>
  <div style="width: 50%; height:20px; background-color: red;display: inline-block;"></div>
</div>

Maybe you should be using something like this:

<div class="row">
  <div class="col-xs-6">left</div>
  <div class="col-xs-6">right</div>
</div>

answered Jan 09 '18 at 15:37

Stuart

6,630
2
24
40

2

This is a solid alternative - but I'm not sure it really addresses the OPs question so much as reinterprets what they are asking. – Robert Jan 09 '18 at 15:42
The way OP seems to have approached needing two columns just worries me, its stuff that's built into bootstrap man, one can always remove the padding between cols at build time... – Stuart Jan 09 '18 at 15:50
Agreed, within the confines of the OPs questions a `.no-gutters` child `.row` would probably offer all the benefits of their current approach; minus the inline style headaches. – Robert Jan 09 '18 at 15:51

Datsos · Accepted Answer · 2018-01-09T15:48:49.563

Inline blocks leave a slight margin. That is why the other block will go below. Use float:left instead

<div class="col-xs-12" style="background-color: black;">
    <div style="width: 50%; height:20px; background-color: red;float:left"></div>
    <div style="width: 50%; height:20px; background-color: red;float:left"></div>
</div>

If you still need inline-block, make sure your HTML divs do not have a gap in the code (line-break)

<div style="width: 50%; height:20px; background-color: red;display: inline-block;"></div><div style="width: 50%; height:20px; background-color: red;display: inline-block;"></div>

The ENTER (line break) is what causes the margin.

There are other solutions as well like comment the space between or setting the font-size to 0.

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Note: Within the confines of Bootstrap 3 they could apply `.pull-left` and `.pull-right` to avoid inline styles and still achieve those floats. — Robert, Jan 09 '18 at 15:43

Bootstrap: two divs with 50% width in a col

2 Answers2