"Panel Horizontal"
Bootstrap 3.2.0 Snippet by seyDoggy

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container" style="margin-top:40px"><div class="row"><div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<!--
To see in action, go to http://jsfiddle.net/seydoggy/9jv5e8d1/
The idea is to use only Bootstrap markup,
so you can turn any basic bootstrap panel
into a horizontal panel.
-->
<div class="panel panel-default panel-horizontal">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque saepe iusto nulla molestias quis esse incidunt veritatis exercitationem dolore officiis. Nam quos iusto officiis ullam itaque voluptatum fuga assumenda culpa!</div>
<div class="panel-footer">Panel footer</div>
</div>
</div></div></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*
* To see in action, go to http://jsfiddle.net/seydoggy/9jv5e8d1/
*/
.panel.panel-horizontal {
display:table;
width:100%;
}
.panel.panel-horizontal > .panel-heading, .panel.panel-horizontal > .panel-body, .panel.panel-horizontal > .panel-footer {
display:table-cell;
}
.panel.panel-horizontal > .panel-heading, .panel.panel-horizontal > .panel-footer {
width: 25%;
border:0;
vertical-align: middle;
}
.panel.panel-horizontal > .panel-heading {
border-right: 1px solid #ddd;
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.panel.panel-horizontal > .panel-footer {
border-left: 1px solid #ddd;
border-top-left-radius: 0;
border-bottom-right-radius: 4px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Fresh Bootstrap Table
Centered Horizontal and Vertical Login Screen
animated sinin and signup panel. animated login and registeration page, popup,
Register form, html bootstrap4 registration form card panel

Questions / Comments: