Arranging Div within div in bootstrap

Question

I am creating a website structure with the help of bootstrap.

The problem is while arranging 3 div tags in 1 main div tag, they are not arranging side by side. They themselves get arranged one below another.

<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 arrange the 3 div tags one beside another.

Answer 1

You need to wrap a 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 do not use inline css, consider adding classes instead.

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

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

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

Answer 2

Remove Collapse

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