I have a simple home page: https://jsfiddle.net/1Lotp6ce/1/
There are 6 images in 2 rows (3 x 2). It works fine for larger screens, but once it gets sm images start overlapping. How may I fix it so for sm it is 2 images x 3 rows without overlapping.
Update: I'd need it not only not overlap but also to have spaces between rows.
You can do it by using only one .row element as a parent and all other as its child. But keep in mind that the size of all the images should be pixel perfect to each other (i.e. all the image sizes should be 200x200).
And use .img-responsive class on all the <img> tags.
And use column classes as <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">...</div>
Something like:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<img class="img-responsive" src="img-url">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<img class="img-responsive" src="img-url">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<img class="img-responsive" src="img-url">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<img class="img-responsive" src="img-url">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<img class="img-responsive" src="img-url">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<img class="img-responsive" src="img-url">
</div>
</div>
Working Code Snippet (use full screen):
/*HEADER*/
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
#logo {
margin-top: 12px;
}
/*BODY*/
body {
background-color: #262626;
padding-top: 70px;
}
#media (min-width: 1200px) {
.container {
max-width: 1080px;
}
}
.row > div > a > img {
width: 100%;
display: block;
margin: 10px 0;
}
.top-buffer {
margin-top: 25px;
}
.mail {
/*color: */
}
.mail:hover {}
/*FOOTER*/
.footer-bottom {
min-height: 30px;
width: 100%;
}
.copyright {
color: #777;
line-height: 30px;
min-height: 30px;
padding: 10px 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top container-fluid">
<div class="container">
<a href="http://feanor.cz/">
<img class="navbar-left" id="logo" src="http://feanor.cz/public/img/web/logo_studio.gif" width="200" alt="Feanor Studio">
</a>
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<img class="img-responsive" src="http://feanor.cz/public/img/painting/oil/8t.jpg">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<img class="img-responsive" src="http://feanor.cz/public/img/photo/portrait/32t.jpg">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<img class="img-responsive" src="http://feanor.cz/public/img/photo/wedding/26t.jpg">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<img class="img-responsive" src="http://feanor.cz/public/img/photo/car/5t.jpg">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<img class="img-responsive" src="http://feanor.cz/public/img/photo/product/10t.jpg">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<img class="img-responsive" src="http://feanor.cz/public/img/photo/interior/4t.jpg">
</a>
</div>
</div>
</div>
<div class="footer-bottom navbar-inverse navbar-fixed-bottom container-fluid">
<div class="container">
<div class="copyright navbar-left">
© 2016, Feanor, All rights reserved
</div>
<ul class="nav navbar-nav navbar-right navbar-right">
<li>
<a target="_blank" href="#">
<i class="fa fa-instagram fa-2x faicon"></i></a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-envelope fa-2x faicon"></i></a>
</li>
<li>
<p>lybvit#gmail.com</p>
</li>
</ul>
</div>
</div>
</body>
Related
I have some list items inside a modal and I want that each list item have the same space or magin between. So Im using margin-bottom: 1rem and margin-right: 1rem, but its not working. For example in larger devices I want to have 3 columns but it appears only two columns with a very large margin in between. Also in medium devices I want 2 columns but with the same margin right and bottom between list items but its not working, the columns have a very large margin in between.
Html:
<a data-toggle="modal" data-target=".bd-example-modal-lg" href="">Open <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<ul class="categories-list">
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/tags.svg"/>
<a class="">All Options</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/video.svg"/>
<a class="">Option1</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/clubbing.svg"/>
<a class="">Option2</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/concert.svg"/>
<a class="">Option3</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/conference.svg"/>
<a class="">Option4</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/exposition.svg"/>
<a class="">Option5</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/certificate.svg"/>
<a class="">Option6</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/literature.svg"/>
<a class="">Option7</a>
</li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
CSS
.categories-list{
display: flex;
flex-wrap:wrap;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
}
.categories-list li{
display: flex;
align-items: center;
margin-bottom: 1rem;
padding: 1rem;
background-color: yellow;
border-radius: 5px;
margin-right: 1rem;
}
.categories-list img{
width: 20px;
height: 20px;
}
Your categories-list class, which has the margins you want, is being applied to the <ul> element instead of each <li> element. This is only going to have an effect on the entire list.
I have a container with a row and inside that six portfolios items.
This code when used on a small screen I get the following result:
1st line : 2 images
2nd line : 1 image on the right side
3rd line : 2 images
4th line : 1 image on the left side
Anyone got a clue? Seems like a bug to me.
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img2.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img3.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img4.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
</div>
</div>
This is due to the different height of each post image, to avoid this use same size images or set the height of your <div class="col-md-4 col-sm-6 col-xs-12">...</div> similar to each other.
You can use the background-image property instead of just using <img> on the <div>.
Solution:
.portfolio-thumb {
width: 300px;
height: 200px;
background-size: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
</div>
Hope this helps!
<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
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;
}
I'm new to bootstrap, so hoping someone can give me a little color around what I'm missing. Basically, I've developed several views and when I narrow the browser window down past 768 X 1024 my elements automatically expand to 100% of the view and the images get all distorted.
Here is what it looks like at 768 X 1024:
And here when I shrink the browser further:
So, you can see that the nav menu and each tile is stretching to full 100% at this point. What I would like is for the tiles and the menu to remain the same width when they stack. Here is the HTML for the navigation panel and the tiles:
CSS:
.typehead{
text-align:center;
/*height: 100px; */
background: #3f3f3f;
margin: -5px 0px -5px -5px !important;
border-radius: 5px;
font-weight: bold;
}
.myborderwrap{
border: 1px solid #000000;
border-radius: 10px;
}
.tiles{
padding-left: 50px !important;
margin-bottom: 25px;
}
.crystalcontainer{
padding: 15px 15px 5px 15px;
border-radius: 10px;
box-shadow: -15px 15px 5px #888888;
}
.crystalname{
font-size: 12pt;
font-weight: bold;
text-align: center;
padding-bottom: 10px;
border-bottom: 1px solid #000000;
word-wrap: break-word;
}
.ratingrow{
text-align: center;
color: #007d7d;
font-weight: bold;
font-style: italic;
}
.add{
border-radius: 10px;
text-align: center;
padding: 3px 10px 3px 10px;
margin-top: 3px;
cursor:pointer;
background: #000000;
font-size: 12pt;
}
.cdescwindow{
position: relative;
overflow: hidden;
padding: 0px !important;
margin-bottom: 0px !important;
}
.cdesccaption{
position:absolute;
top:0;
right:0;
background:rgba(66, 139, 202, 0.75);
width:100%;
height:100%;
display: none;
text-align:center;
color:#fff !important;
z-index:2;
}
.crystaldescription{
padding-top: 5px;
font-size: 12pt;
font-weight: bold;
}
HTML:
<body>
<div class="wrap">
<nav id="w029141" class="navbar-inverse navbar-fixed-top mymenuhead navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#w029141-collapse" data-toggle="collapse" type="button">
<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="/devfront/index.php">
<div class="row">
<img width="155px" height="55px" alt="" src="img/CMLogoSnowflake.gif">
<span style="font-style: italic; color: #f9f31c; font-size: 10pt;"> beta</span>
</div>
</a>
</div>
<div id="w029141-collapse" class="collapse navbar-collapse">
<ul id="w13562" class="navbar-nav nav" style="margin-left: 100px;">
<li>
DEV
</li>
<li class="active">
Subscribe
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Publish
<b class="caret"></b>
</a>
<ul id="w226843" class="dropdown-menu">
<li>
<a tabindex="-1" href="/devfront/index.php?r=publish%2Fdashboard">My Published Crystals</a>
</li>
<li>
<a tabindex="-1" href="/devfront/index.php?r=publish%2Fselect-new">Publish New Crystal</a>
</li>
<li>
<a tabindex="-1" href="/devfront/index.php?r=publish%2Fprofile">Manage Profiles</a>
</li>
</ul>
</li>
</ul>
<ul id="w33960" class="navbar-nav nav">
<li>
My Crystals
</li>
</ul>
<div class="navbar-nav" style="padding-top:8px">
<div id="crystalcounter" class="badge" style="background:#ffff00; color:#000000; font-weight:bold;">2</div>
</div>
<ul id="w422097" class="navbar-nav navbar-right nav">
<li>
Home
</li>
<li>
About
</li>
<li>
My Profile
</li>
<li>
<a data-method="post" href="/devfront/index.php?r=site%2Flogout">Logout (scottjms)</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="mybackground">
<div class="container">
<div class="site-index">
<span id="soundspan"></span>
<input id="searchtype" type="hidden" value="0" name="type">
<input id="brandtype" type="hidden" value="0" name="btype">
<div class="text-left"> </div>
</div>
<div class="body-content">
<div class="row searcharea">
<div class="col-sm-3"></div>
<div class="col-sm-5" style="padding-right:0px">
<input id="crystalsearchbar" class="searchbar" type="text" placeholder="Find a crystal..." name="crystalsearch">
</div>
<div class="col-sm-1" style="padding-left:0px">
<div style="align: left; height: 42px; background-color: #3333cc; padding-left: 12px; width:50px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;">
<i class="fa fa-search fa-2x" style="padding-top:5px; color:white;"></i>
</div>
</div>
<div class="col-sm-3" style="padding-left:20px">
<a class="publishrouter" href="?r=publish/select-new">
I want to publish my own!
<i class="fa fa-external-link"></i>
</a>
</div>
</div>
<div class="row">
<div class="col-sm-3" style="margin:35px 0px">
<div class="panel panel-danger">
<div class="panel-heading" style="padding: 5px 0px 5px 5px;">
<h3 class="panel-title">
<div class="row typehead">
<div class="col-sm-12">
<h4 style="color: #80ffff">Explore Crystals</h4>
</div>
</div>
</h3>
</div>
<div class="table">
<ul class="nav nav-pills nav-stacked kv-sidenav">
<li id="allheader" class="allheader">All Crystals</li>
<li id="header16" class="header">
<a class="kv-toggle" href="{url}">
<span class="opened" style="display:none">
<i class="indicator glyphicon glyphicon-chevron-down"></i>
</span>
<span class="closed">
<i class="indicator glyphicon glyphicon-chevron-right"></i>
</span>
Self Publishing
</a>
<ul class="nav nav-pills nav-stacked">
<li id="subtype1" class="subtype text-primary" style="padding:10px 0px 10px 25px; cursor:pointer;">» Blog Updates</li>
<li id="subtype29" class="subtype text-primary" style="padding:10px 0px 10px 25px; cursor:pointer;">» Social Media Posts</li>
<li id="subtype30" class="subtype text-primary" style="padding:10px 0px 10px 25px; cursor:pointer;">» My Events</li>
<li id="subtype31" class="subtype text-primary" style="padding:10px 0px 10px 25px; cursor:pointer;">» Build Your Own</li>
</ul>
</li>
<li id="header18" class="header">
<a class="kv-toggle" href="{url}">
<span class="opened" style="display:none">
<i class="indicator glyphicon glyphicon-chevron-down"></i>
</span>
<span class="closed">
<i class="indicator glyphicon glyphicon-chevron-right"></i>
</span>
Local Interest
</a>
<ul class="nav nav-pills nav-stacked">
<li id="subtype32" class="subtype text-primary" style="padding:10px 0px 10px 25px; cursor:pointer;">» Tonight's Dinner Specials</li>
<li id="subtype33" class="subtype text-primary" style="padding:10px 0px 10px 25px; cursor:pointer;">» Live Music Here</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="row" style="padding-top:35px"></div>
<div id="crystal-container" class="findcrystals">
<div id="crystalcontainer88" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #80ffff;">
<div class="row">
<div class="crystalname">Blog Updates</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption" style="display: none;">
<div class="crystaldescription">Get updated when your ....</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/RBsalnmeicnterfalsit84783dar93UQ.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal88" class="add open" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
<div id="crystalcontainer132" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #80ffff;">
<div class="row">
<div class="crystalname">My Social Media Po..</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption" style="display: none;">
<div class="crystaldescription">Any social..</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/RBsalnmeicnterfalsit84783dar93UQ.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal132" class="add open" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
<div id="crystalcontainer133" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #80ffff;">
<div class="row">
<div class="crystalname">My Events</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption" style="display: none;">
<div class="crystaldescription">All of the upcoming...</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/RBsalnmeicnterfalsit84783dar93UQ.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal133" class="add open" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
<div id="crystalcontainer134" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #80ffff;">
<div class="row">
<div class="crystalname">Build Your Own</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption">
<div class="crystaldescription">Any event..</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/RBsalnmeicnterfalsit84783dar93UQ.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal134" class="add open" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
<div id="crystalcontainer135" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #80ffff;">
<div class="row">
<div class="crystalname">Local Dinner Speci..</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption" style="display: none;">
<div class="crystaldescription">Tonights dinner..</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/RBsalnmeicnterfalsit84783dar93UQ.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal135" class="add open" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
<div id="crystalcontainer138" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #80ffff;">
<div class="row">
<div class="crystalname">Local Live Music E..</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption" style="display: none;">
<div class="crystaldescription">Live music events ..</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/RBsalnmeicnterfalsit84783dar93UQ.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal138" class="add open" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
<div id="crystalcontainer145" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #ffff00;">
<div class="row">
<div class="crystalname">Black Dog Dinner S..</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption">
<div class="crystaldescription">Our daily ..</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/2lAPaXs-EYT3iNNQFh0a3hxIl.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal145" class="add branded" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
You are only using COL-SM which only effects small screens. You need to add the class "col-XS" to tell bootstrap what to do on extra small screens. By default it is "col-xs-12" which stacks.
Here is the fiddle I made for you. You can see on an extra-small screen size the "tiles" are going to show 2 to a row. because i gave them this class: Col-xs-6
https://jsfiddle.net/93bg9v2z/2/
edit: based on your request here is the new fiddle
https://jsfiddle.net/93bg9v2z/3/
I want on desktop show all cols (5) on mobile only 3. It's possible do with standart bootstrap classes ?
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class=" col-lg-2 col-md-2 col-centered " style="text-align: center; margin-right: 10px; overflow: hidden">
<a href="">
<img src="http://192.168.0.185/image/cache/data/pigu_final-100x100.png" alt="">
</a>
</div>
<div class=" col-lg-2 col-md-2 col-centered " style="text-align: center; margin-right: 10px; overflow: hidden">
<a href="">
<img src="http://192.168.0.185/image/cache/data/gelezinis_final1-100x100.png" alt="">
</a>
</div>
<div class=" col-lg-2 col-md-2 col-centered " style="text-align: center; margin-right: 10px; overflow: hidden">
<a href="">
<img src="http://192.168.0.185/image/cache/data/teo_final-100x100.png" alt="">
</a>
</div>
<div class=" col-lg-2 col-md-2 col-centered " style="text-align: center; margin-right: 10px; overflow: hidden">
<a href="">
<img src="http://192.168.0.185/image/cache/data/teo_final-100x100.png" alt="">
</a>
</div>
<div class=" col-lg-2 col-md-2 col-centered " style="text-align: center; margin-right: 10px; overflow: hidden">
<a href="">
<img src="http://192.168.0.185/image/cache/data/teo_final-100x100.png" alt="">
</a>
</div>
</div>
Yes you can do by hidden-xs class:
Please check codepen for this:
codepen.io/anon/pen/JYMNvj
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class=" col-lg-2 col-md-2 col-centered " style="text-align: center; margin-right: 10px; overflow: hidden">
<a href="">
<img src="http://192.168.0.185/image/cache/data/pigu_final-100x100.png" alt="">
</a>
</div>
<div class=" col-lg-2 col-md-2 col-centered " style="text-align: center; margin-right: 10px; overflow: hidden">
<a href="">
<img src="http://192.168.0.185/image/cache/data/gelezinis_final1-100x100.png" alt="">
</a>
</div>
<div class=" col-lg-2 col-md-2 col-centered " style="text-align: center; margin-right: 10px; overflow: hidden">
<a href="">
<img src="http://192.168.0.185/image/cache/data/teo_final-100x100.png" alt="">
</a>
</div>
<div class=" col-lg-2 col-md-2 hidden-sm hidden-xs col-centered " style="text-align: center; margin-right: 10px; overflow: hidden">
<a href="">
<img src="http://192.168.0.185/image/cache/data/teo_final-100x100.png" alt="">
</a>
</div>
<div class=" col-lg-2 col-md-2 hidden-sm hidden-xs col-centered " style="text-align: center; margin-right: 10px; overflow: hidden">
<a href="">
<img src="http://192.168.0.185/image/cache/data/teo_final-100x100.png" alt="">
</a>
</div>
</div>
It will hide last two column on small and mobile device
You can remove hidden-sm if you want to make it visible on small device