Ryahn Ryahn - 2 months ago 19
CSS Question

List 3 bootstrap thumbnails per column

I am trying to list quite a few images by using bootstrap thumbnails from a database. Right now I am just designing it just to make sure it works properly. So far I am not able to get the thumbnails to only list 3 columns with unlimited rows.

Here is the jsfiddle https://jsfiddle.net/aje0tp27/2/

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/catalog/">GCSS</a>
<small class="logo-abbr">Global Combat Support System</small>
</div>
<!-- End Brand and toggle -->

<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav vdivide">
<li class="divide">
<a href="index.php">Home</a>
</li>
<li class="divide">
<a href="index.php">Home</a>
</li>
<!--
<li>
<a href="#">Link2</a>
</li>
-->
<!--
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
-->

</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

</div>
<!-- /.container -->
</div>
<!-- ./navbar -->
<div class="container-fluid">
<div class="row">
<!-- side menu -->
<div class="col-md-3">
<!-- menu -->
<div id="MainMenu">
<div class="list-group panel panel-sidemenu">
<a href="#" class="list-group-item" data-parent="#MainMenu">Item 1</a>
<a href="#" class="list-group-item" data-parent="#MainMenu">Item 2</a>
<a href="#subitem1" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 3 <i class="fa fa-caret-down"></i></a>
<div class="collapse" id="subitem1">
<a href="#SubMenu1" class="list-group-item list-group-subitem" data-toggle="collapse" data-parent="#SubMenu1">Subitem 1 <i class="fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="SubMenu1">
<a href="#" class="list-group-item list-group-subitem" data-parent="#SubMenu1">Subitem 1 a</a>
<a href="#" class="list-group-item list-group-subitem" data-parent="#SubMenu1">Subitem 2 b</a>
<a href="#SubSubMenu1" class="list-group-item list-group-subitem" data-toggle="collapse" data-parent="#SubSubMenu1">Subitem 3 c <i class="fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1">
<a href="#" class="list-group-item list-group-subitem" data-parent="#SubSubMenu1">Sub sub item 1</a>
<a href="#" class="list-group-item list-group-subitem" data-parent="#SubSubMenu1">Sub sub item 2</a>
</div>
<a href="#" class="list-group-item list-group-subitem" data-parent="#SubMenu1">Subitem 4 d</a>
</div>
<a href="javascript:;" class="list-group-item list-group-subitem">Subitem 2</a>
<a href="javascript:;" class="list-group-item list-group-subitem">Subitem 3</a>
</div>
<a href="#subitem2" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 4 <i class="fa fa-caret-down"></i></a>
<div class="collapse" id="subitem2">
<a href="" class="list-group-item list-group-subitem">Subitem 1</a>
<a href="" class="list-group-item list-group-subitem">Subitem 2</a>
<a href="" class="list-group-item list-group-subitem">Subitem 3</a>
</div>
</div>
</div>
<!-- end menu -->
</div>
<!-- end side menu -->
<!-- sub container -->
<div class="col-md-9">
<!-- jumbotron -->
<div class="row">
<div class="col-md-8">
<div class="jumbotron">
<h1>Test</h1>
<p>Data go here</p>
<p><a class="btn btn-primary btn-lg" href="#">Read More</a></p>
</div><!-- end jumbotron -->
</div><!-- end col-md-8 -->
</div><!-- end row -->
<!-- end jumbotron -->
<!-- thumbnails -->
<div class="row auto-clear">
<div class="col-lg-4">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="holder.js/300x200">
<div class="caption">
<h3>Item Name</h3>
<p>Description</p>
<p><span class="btn btn-success" role="button">View</span> <span class="btn btn-primary" role="button">Add to cart</span></p>
</div>
</div>
</div><!-- end thumbnail -->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="holder.js/300x200">
<div class="caption">
<h3>Item Name</h3>
<p>Description</p>
<p><span class="btn btn-success" role="button">View</span> <span class="btn btn-primary" role="button">Add to cart</span></p>
</div>
</div>
</div><!-- end thumbnail -->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="holder.js/300x200">
<div class="caption">
<h3>Item Name</h3>
<p>Description</p>
<p><span class="btn btn-success" role="button">View</span> <span class="btn btn-primary" role="button">Add to cart</span></p>
</div>
</div>
</div><!-- end thumbnail -->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="holder.js/300x200">
<div class="caption">
<h3>Item Name</h3>
<p>Description</p>
<p><span class="btn btn-success" role="button">View</span> <span class="btn btn-primary" role="button">Add to cart</span></p>
</div>
</div>
</div><!-- end thumbnail -->
</div>
</div><!-- end row -->
</div>
<!-- end sub container -->
</div>
</div>


custom CSS

body {
padding-top:70px;
/* background-color:#000;*/
background-color:transparent;
color:#cccccc;
}

.logo-abbr {
margin-left: -66px;
padding-top: 31px;
padding-bottom: 5px;
padding-right:10px;
float: left;
vertical-align: text-bottom;
color: #b5b5b5;
text-decoration: underline;
}

.container-fluid {
margin-left:30px;
margin-right:30px;
}

.list-group.panel > .list-group-item {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px
}

.list-group-submenu {
margin-left:20px;
}

.panel-sidemenu {
background-color:transparent;
border: 1px solid #222222;
}
a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover {
color: #5dafd8;
text-decoration: none;
background-color: rgba(23, 23, 23, 0.84);
}
a.list-group-item, button.list-group-item {
color: #08c;
}
.list-group-item {
background-color:transparent;
border: none;
font-size:18px;
}
.list-group-subitem {
font-size: 14px;
}

.navbar-inverse {
/* background-image: -webkit-linear-gradient(top,#3c3c3c 0,#222 100%); */
/* background-image: -o-linear-gradient(top,rgba(60, 60, 60, 0.33) 0,rgba(34, 34, 34, 0.32) 100%);*/
/* background-image: -webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#222)); */
/* background-image: linear-gradient(to bottom,rgba(60, 60, 60, 0.33) 0,rgba(34, 34, 34, 0.32) 100%);*/
background-image: url('../images/navbarbg.png');
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
background-repeat: repeat-x;
border-radius: 4px;
}
.navbar-inverse {
/*
background-color: rgba(34,34,34,.33);
border-color: rgba(8,8,8,.40);
*/
background-color: transparent;
border-color: transparent;
}

ul li:not(:last-child) {
border-right: 0.3px solid white;
}

.jumbotron {
border: 1px solid;
border-color: #222222;
background-position: top left;
background-color: transparent;
background-attachment: fixed;
background-image: url('../images/navbarbg.png');
color: #cccccc;
}

.thumbnail {
width: 312px;
}

.thumbnail>img {
display: block;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
img {
height: auto;
vertical-align: middle;
max-width:100%;
max-height:100%;
}

Answer

Bootstrap grid is based on 12 "virtual" columns. When you specify col-lg-X, the X is how many virtual columns you want to use for your column.

So, to have 3 columns, each needs to use 4 virtual columns (=12/3). Replace col-lg-3 with col-lg-4 on each thumbnail div and it'll work. sort of.

You may consider not wrapping those columns inside col-lg-4 (the div after row auto-clear) to begin with, it will be too narrow to contain 300 px wide thumbnails.

Comments