Moving over thumbnail gallery by one column in bootstrap 3 - css

Question

<style>
/* Navigation */
#logo{width: 248px;
padding-bottom:25px;
padding-top:25px;
}
.navbar-nav>li>a {
margin-right:-75px;
margin-bottom:10px;
padding-top:10px;
padding-bottom:10px;
text-transform:uppercase;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
background: black;
color:white;
}
#media (min-width: 768px) {
.navbar-collapse {
height: auto;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left:0;
padding-right:0;
}
.navbar-collapse.collapse {
display: block !important;
width: auto !important;
padding-bottom: 0;
overflow: visible !important;
background:white;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar
{
max-width:250px;
margin:0 auto;
border-radius:0;
border:0;
}
.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header
{float:none !important;}
.navbar-right .dropdown-menu {left:0;right:auto;}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
}
.sidebar-nav{background: white}
}
</style>
<div class="container-fluid">
<div class="col-sm-3">
<div class="sidebar-nav">
<div class="navbar navbar-default avbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<img id="logo" src="assets/img/logo.jpg"/>
<li class="active">Home</li>
<li>About</li>
<li class="filter" data-filter=".category-1">Animation</li>
<li class="filter" data-filter=".category-2">Commercial</li>
<li class="filter" data-filter=".category-3">Documentary</li>
<li class="filter" data-filter=".category-4">Film</li>
<li class="filter" data-filter=".category-5">Music</li>
<li class="filter" data-filter=".category-6">Video Games</li>
<li>Services</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div id="portfolio">
<div class="pContainer">
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
</div>
</div>
</div>
I need to move over the thumbnail gallery by one column. I tried many different ways but everything messes up the layout of the thumbnail gallery itself. I posted this code here but I think it is easier to visit the website to see what I am talking about http://velnikolic.com/video/portfolio.html

Answer 1

Your problem is not so much on moving your gallery a column over, but a better bootstrap html architecture. You declared your sidebar to occupy col-sm-3 but not the gallery to occupy the rest of it (col-sm-9). Do that and then, again, re-distribute your columns inside to show in the layout you want (3 or 4 columns) it doesn't matter.
I made this demo for you with your code
Here is what I suggest you do. It will center all your elements to use most of your browser real estate and will proportionally fix your gutters so that nothing is too heavy to one side or the other.
<div class="container-fluid">
<div class="col-sm-3">
<div class="sidebar-nav">
<div class="navbar navbar-default avbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<img id="logo" src="assets/img/logo.jpg" />
<li class="active">Home</li>
<li>About</li>
<li class="filter" data-filter=".category-1">Animation</li>
<li class="filter" data-filter=".category-2">Commercial</li>
<li class="filter" data-filter=".category-3">Documentary</li>
<li class="filter" data-filter=".category-4">Film</li>
<li class="filter" data-filter=".category-5">Music</li>
<li class="filter" data-filter=".category-6">Video Games</li>
<li>Services</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-9">
<div id="portfolio">
<div class="pContainer">
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
</div>
</div>
</div>
<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
<!--<source src="polina.webm" type="video/webm">-->
<source src="assets/videos/video.mp4" type="video/mp4">
</video>
<footer class="navbar navbar-fixed-bottom">
<div class="footer-container container-fluid">
<div class="social-links">
<i class="fa fa-facebook fa-lg"></i>
<i class="fa fa-twitter fa-lg"></i>
<i class="fa fa-google-plus fa-lg"></i>
<i class="fa fa-pinterest fa-lg"></i>
</div>
</div>
</footer>
</div>
EDIT
to add more gutter to the gallery, modify the thumbnail bootstrap class as follows. Also hiding the overflow to your sidenav container will stop it from leaking into the next col-sm-*.
.thumbnail {
max-width: 231px;
margin: 20px auto;
}
.sidebar-nav {
overflow: hidden;
}