Bootstrap rows (tableless)
Bootstrap rows (tableless)
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="container">
<div class="row-fluid">
<div class="control-group row table-bordered">
<div class="controls">
<div class="thumbnail pull-left">
<img src=" http://images.travelnow.com/hotels/1000000/40000/34700/34652/34652_27_t.jpg" alt=""/>
<div class="caption">
<h5>Product detail</h5>
</div>
</div>
<div class="checkbox inline">Object</div>
<div class="checkbox inline">Object</div>
<div class="checkbox inline">Object</div>
<div class="checkbox inline">Object</div>
<div class="checkbox inline">Object</div>
</div>
</div>
<div class="control-group row table-bordered">
<div class="controls">
<div class="checkbox inline">Object</div>
<div class="checkbox inline">Object</div>
<div class="checkbox inline">Object</div>
<div class="checkbox inline">Object</div>
<div class="checkbox inline">Object</div>
</div>
</div>
<div class="control-group row table-bordered">
<div class="controls">
<div class="checkbox inline">Object</div>
<div class="checkbox inline">Object</div>
<div class="checkbox inline">Object</div>
<div class="checkbox inline">Object</div>
<div class="checkbox inline">Object</div>
</div>
</div>
<div class="control-group row table-bordered">
<div class="controls">
<div class="checkbox inline">Object</div>
<div...
CSS
body {
background:#eee;
padding:20px
}
#secondarynav {
display:block width:100%;
background:#222;
height:60px;
}
div#nav-triggerbtn {
float: right;
margin-top: 18px;
margin-right: 28px;
border-radius:50%;
color:#000000;
background:#eee;
opacity:0.3;
filter: alpha(opacity=30);
cursor:pointer;
width:22px;
font-size:14px;
height:22px;
padding-top:2px;
text-align:center;
font: bold italic 15px/20px"Times New Roman", Times, serif;
line-height: 20px;
}
div#nav-triggerbtn:hover {
filter: alpha(opacity=90);
opacity:0.9;
}
#controlnav {
position:relative;
padding:30px;
top:0px;
left:2%;
width:90%;
height: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
display: none;
background: #fff;
-webkit-box-shadow: 0px 0px 10px rgba(46, 50, 50, 1);
-moz-box-shadow: 0px 0px 10px rgba(46, 50, 50, 1);
-o-box-shadow: 0px 0px 10px rgba(46, 50, 50, 1);
box-shadow: 0px 0px 10px rgba(46, 50, 50, 1);
opacity: 0;
}
/*-- bootstrap over-ride -- */
@media (max-width: 767px) {
body {
padding-right: 0px;
padding-left: 0px;
}
#controlnav {
display: block;
width: 100%;
min-height: 280px;
}
#controlnav .span2 {
background:#ececec
}
}