Clever Geek Handbook

Organizing div to div in bootstrap

I am creating a site structure using bootstrap.

The problem is when placing 3 divs in 1 main div tag, they are not side by side. They arrange themselves one under the other.

<div class="col-md-12 collapse" style="border:1px solid blue;" id="part1">
      <div class="col-md-4" style="border:1px solid green;"><h5>Part 1.1</h5></div>
      <div class="col-md-4" style="border:1px solid green;"><h5>Part 1.2</h5></div>
      <div class="col-md-4" style="border:1px solid green;"><h5>Part 1.3</h5></div>
</div>

I want to position three div tags next to another.

+3


source to share


4 answers 


.col-md-4 {
display: inline-block;
}


jsfiddle

0


source


You need to wrap row

around your columns.

<div class="col-md-12 collapse border-solid border-blue" id="part1">
    <div class="row">
         <div class="col-md-4 border-solid border-green"><h5>Part 1.1</h5></div>
         <div class="col-md-4 border-solid border-green"><h5>Part 1.2</h5></div>
         <div class="col-md-4 border-solid border-green"><h5>Part 1.3</h5></div>
    </div>
</div>


Please don't use inline css, add classes instead.

.border-solid {
    border-style: solid;
    border-width: 1px;
}

.border-blue {
    border-color: blue;
}

.border-green {
    border-color: green;
}
+2


source


Delete crash

<div class="col-md-12" style="border:1px solid blue;" id="part1">
    <div class="col-md-4" style="border:1px solid green;"><h5>Part 1.1</h5></div>
    <div class="col-md-4" style="border:1px solid green;"><h5>Part 1.2</h5></div>
    <div class="col-md-4" style="border:1px solid green;"><h5>Part 1.3</h5></div>
</div>
+1


source 


<div style="width: 100%;">
<div style="float:left; width: 20%">left<hr width="1" size="500">
</div>
<div style="float:none;">middle<hr width="1" size="500">
</div>
<div style="float:right;">right
</div>

-2


source






More articles:


All Articles