Align 2 panels side by side

Question

I need to align three panels side by side and I am unable to do it.

I tried using float:left but that did not work.

Can someone please point me in the right direction?

  <div class="panel panel-default" style="height:350px;width:400px;">
  <div class="panel-heading"> 1</div>
  <div class="panel-body">
  <div class="row">
  <div col="col-md-4" >
  <div class="panel-body"><img src="mb3.jpg" alt="cannot load image" `enter code here`class="img-responsive" />
  <button type="button" class="btn btn-primary btn-block">button</button>    </div>
  </div>
  <br>
  <br>
  <div col="col-md-4" >
  <div style="float:left;">
  <div class="panel panel-default" style="height:350px;width:400px;">
  <div class="panel-heading"> 2</div>
  <div class="panel-body">
  <div class="panel-body"><img src="mb4.png" alt="cannot load image"class="img-responsive"/>
  <button type="button" class="btn btn-primary btn-block">button</button>

possible duplicate of [Bootstrap 3.0 - Vertically align 3 panels in the same row (Auto Height)](http://stackoverflow.com/questions/18664591/bootstrap-3-0-vertically-align-3-panels-in-the-same-row-auto-height) — sshine, Aug 14 '15 at 20:18

score 10 · Answer 1 · edited Jul 24 '20 at 17:57

You have alot of mistakes in your HTML, even if you follow the suggested answer in comments with your current HTML no way you can make it work

Correct HTML

<div class="row">
    <div class="col-md-4">
        <div class="panel panel-default" style="height:350px;width:400px;">
            <div class="panel-heading"> 1</div>
                <div class="panel-body">
                    <img src="mb3.jpg" alt="cannot load image" `enter code here`class="img-responsive" />
                    <button type="button" class="btn btn-primary btn-block">button</button>
                </div>
            </div>
    </div>
    
    <div class="col-md-4">
        <div class="panel panel-default" style="height:350px;width:400px;">
            <div class="panel-heading"> 2</div>
                <div class="panel-body">
                    <img src="mb3.jpg" alt="cannot load image" `enter code here`class="img-responsive" />
                    <button type="button" class="btn btn-primary btn-block">button</button>
                </div>
            </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default" style="height:350px;width:400px;">
            <div class="panel-heading"> 3</div>
                <div class="panel-body">
                    <img src="mb3.jpg" alt="cannot load image" `enter code here`class="img-responsive" />
                    <button type="button" class="btn btn-primary btn-block">button</button>
                </div>
            </div>
    </div>
</div>

Mistakes in your HTML

row inside panel and repeating <div class="panel-body">
This is not a class <div col="col-md-4" > should be <div class="col-md-4" >
unnecessary <br> tags

Right way to do it

First you need to understand how Bootstrap Grid system works BootStrap Grid system

<div class="row">
    <div class="col-md-4">
         <div class="panel">
             <div class="panel-heading"></div>
                <div class="panel-body">
                      //Your content goes here
                </div>
          </div>
    </div>
    <div class="col-md-4">
         <div class="panel">
             <div class="panel-heading"></div>
                <div class="panel-body">
                      //Your content goes here
                </div>
          </div>
    </div>
    <div class="col-md-4">
         <div class="panel">
             <div class="panel-heading"></div>
                <div class="panel-body">
                      //Your content goes here
                </div>
          </div>
    </div>
</div>

Fiddle Example

Align 2 panels side by side

1 Answers1