Bas Kruithof Bas Kruithof - 3 months ago 10
HTML Question

How to put bootstrap panels next to eachoter

I've been trying this for a while now. I'm a semi beginner to it.

This is what it looks like http://prntscr.com/ceex21

I'm still learning a lot.

And heard this is the place to ask anything regarding

Programming and web design!

This is the code:

<div class="col-xlg-4 col-md-6 hidden-xs">
<!-- Example Panel With Footer -->
<div class="panel panel-bordered">
<div class="panel-body">
<h4>Body Heading</h4>
<p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note
that panel footers do not inherit colors and borders when using
contextual variations as they are not meant to be in the foreground.</p>
</div>
<div class="panel-footer">Panel Footer</div>
</div>
<!-- End Example Panel With Footer -->
</div>
<!-- End Example Panel With Footer -->
</div>

<div class="page-content container-fluid">
<div class="row">
<div class="col-xlg-6 col-md-6">
<!-- Example Panel With Heading -->
<div class="panel panel-bordered">
<div class="panel-heading">
<h3 class="panel-title">Panel Heading</h3>
</div>
<div class="panel-body">
<div class="example-wrap">
<h4 class="example-title">Basic</h4>
<p>Add class <code>.table</code>.</p>
<div class="example table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Teagan</td>
<td>Prohaska</td>
<td>@Elijah</td>
<td>
<span class="label label-danger">admin</span>
</td>
</tr>
<tr>
<td>2</td>
<td>Andy</td>
<td>Gaylord</td>
<td>@Ramiro</td>
<td>
<span class="label label-info">member</span>
</td>
</tr>
<tr>
<td>3</td>
<td>Veronica</td>
<td>Gusikowski</td>
<td>@Maxime</td>
<td>
<span class="label label-warning">developer</span>
</td>
</tr>
<tr>
<td>4</td>
<td>Bruce</td>
<td>Rogahn</td>
<td>@Maggio</td>
<td>
<span class="label label-success">supporter</span>
</td>
</tr>
<tr>
<td>5</td>
<td>Carolina</td>
<td>Hickle</td>
<td>@Hammes</td>
<td>
<span class="label label-info">member</span>
</td>
</tr>
<tr>
<td>6</td>
<td>Madaline</td>
<td>Eichmann</td>
<td>@Amaya</td>
<td>
<span class="label label-success">supporter</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- End Example Panel With Heading -->
</div>

Answer

Something like that should do it... Just create a row with 2 columns and put whatever you want in your columns.

<div class="row">
    <div class="col-sm-6">
        <div class="panel panel-bordered">
            <div class="panel-body">
                <h4>Body Heading</h4>
                <p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note
                    that panel footers do not inherit colors and borders when using
                    contextual variations as they are not meant to be in the foreground.</p>
            </div>
            <div class="panel-footer">Panel Footer</div>
        </div>
        <!-- End Example Panel With Footer -->
    </div>
    <div class="col-sm-6">
        <div class="panel panel-bordered">
            <div class="panel-body">
                <h4>Body Heading</h4>
                <p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note
                    that panel footers do not inherit colors and borders when using
                    contextual variations as they are not meant to be in the foreground.</p>
            </div>
            <div class="panel-footer">Panel Footer</div>
        </div>
        <!-- End Example Panel With Footer -->
    </div>
</div>
Comments