I need three images to be placed in the first row and two images in second row as shown in the below figure.
My code for the above image is as follows,
<div class="row" style="margin-left:15%">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Graduate</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Post Graduate</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a PhD Guy</p>
</div>
</div>
<br>
<div class="row" style="margin-left:20%">
<div class="col-xs-6 col-md-3" style="margin-left:20%">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Course taking one</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">Others</p>
</div>
</div>
But when I view it in mobile mode using chrome inspect element it is displayed as below
I know I have placed an extra div but if I don't place the div the fourth image is placed in the first row.
How can I get them aligned.
Maybe try this:
https://jsfiddle.net/68kycb4g/
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-offset-1 col-sm-5"></div>
<div class="col-xs-6 col-sm-5"></div>
</div>
Related
I'm creating a simple image gallery. Above the images I name the place where the pictures were taken, but the second and every another row has issues - div with the name is being pushed to the right instead of staying centered. Here is how it looks: http://prntscr.com/fg10u4
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
.locationName {
text-align: center;
padding: 0px 0px 20px 20px;
}
<div class="row" id="locations">
<div class="locationName">
City
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
</div>
Obviously the code is doubled inside the "row" div.
Bring this below code out of row and that should go the way you want.
<div class="locationName">
City
</div>
You are facing this problem because you can see in the image(link) you
provided that the middle image has moved slightly down and hence
it affects the title of the next row everytime.
i saw your issue. actually there is a conflict with the boxes height. to quickly fix this you can increase your thumbs height equal. or you can see the example code below.
<div class="row" id="locations">
<div class="col-lg-12 col-sm-12 locationName">City</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail"> <img src="2.jpg"> </div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail"> <img src="1.jpg"> </div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail"> <img src="2.jpg"> </div>
</div>
<div class="col-lg-12 col-sm-12 locationName"> City </div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail"> <img src="2.jpg"> </div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail"> <img src="1.jpg"> </div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail"> <img src="2.jpg"> </div>
</div>
</div>
Add a full 12 column grid to the locationName class so that it takes up the whole row and force a break between the other columns. As you currently have it, it is trying to be placed inline, which is after the longest image.
<div class="row" id="locations">
<div class="col-xs-12 locationName">
City
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
</div>
Looks like there is a conflict with the bootstrap you are using. Try moving the title (City) before the div with class row.
<div class="locationName">
City
</div>
<div class="row" id="locations">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
</div>
try this:
<div class="container" id="locations">
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
</div>
<div class="locationName">
City
</div>
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
</div>
</div>
You can use center tag like this
<div class="row" id="locations">
<center>
....
</center>
</div>
Creating a frontpage for a takeout restaurant.
The problem i am having is that the last row won't fit inside because of a double height element.
Code
<div class="row">
<a class="col-md-3 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x900">
</a>
<div class="col-md-9">
<div class="row">
<a class="col-md-4 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x600">
</a>
<div class="col-md-8">
<div class="row">
<a class="col-md-6 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="col-md-6 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
<div class="row">
<a class="col-md-6 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="col-md-6 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x600">
</a>
</div>
</div>
</div>
<div class="row">
<a class="col-md-4 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="col-md-4 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
</div>
</div>
Screenshot of problem
How can I fit the last 2 elements on the same row as the rest?
http://www.bootply.com/KSRUmHINHw
You need to use nested grid rows with this. So the second column is really made up of two rows.
<div class="container">
<div class="row">
<div class="col-md-3"><img src="http://placehold.it/100x200"></div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x175"></div></div>
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x25"></div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x175"></div></div>
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x25"></div>
</div>
</div>
<div class="col-md-3"><img src="http://placehold.it/100x200"></div>
</div>
</div>
You need to set the rows differently. Think of the two rows on the left, as one group, and the double height item on the right, as a second group. They are both on the same row.
<div class="col-md-9">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x600">
</a>
</div>
<div class="col-md-6">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
<div class="col-md-6">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
</div>
</div>
<div class="col-md-4">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x600">
</a>
</div>
</div>
codepen live example: http://codepen.io/narxx/pen/vGbzvR
Please I am not familiar with Bootstrap 3 and I started to build a small web journal using this framework. I found some difficulties and hope to get some solutions.
My question is how can I code 3 thumbnails then change their order on mobile device?
<div class="col-lg-15 no-padding-left">
<div class="box-news">
<div class="block-title move no-margin">اقليم سيدي بنور</div>
<div class="news-items text-right">
<div class="col-lg-9">
<ul class="list-unstyled no-margin thumb">
<li class="thumbnail md">
<div class="col-xs-8">
اعطاء انطلاقة الدخول التربوي لأقسام التربية غيرالنظامية بسيدي بنور
</div>
<div class="col-xs-7 no-padding">
<img class="img-responsive" src="http://localhost/24/public/uploads/1444912297..jpg">
</div>
</li>
<li class="thumbnail md">
<div class="col-xs-8">
استخدام سيارة للنقل المدرسي في سرقة أسمدة فلاحية من ضيعة برلماني بسيدي بنور
</div>
<div class="col-xs-7 no-padding">
<img class="img-responsive" src="http://localhost/24/public/uploads/1444989659..jpg">
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<div class="thumbnail lg">
<img src="http://localhost/24/public/uploads/1445377322..jpg" alt="...">
<div class="captison">
جماعة سيدي بنور تساهم في المبادرة الملكية 'مليون محفظة'
</div>
</div>
</div>
</div>
</div>
</div>
The result that I want in the image below
Something like this will work: http://jsfiddle.net/WOUNDEDStevenJones/vf4h17L5/1/
<div class="row">
<div class="col-xs-12 col-md-6">text1</div>
<div class="col-xs-12 col-md-6">text2</div>
<div class="col-xs-12 col-md-6">text3</div>
</div>
What is the best way to style the selected column of the following HTML code
<div class="row">
<div class="col-md-3 portfolio-item starter">
<a href="#/starter">
<img class="img-responsive" src="images/starter.jpg" alt="starter">
</a>
<h2>Starter</h2>
</div>
<div class="col-md-3 portfolio-item">
<a href="#/salads">
<img class="img-responsive" src="images/salads.jpg" alt="salads">
</a>
<h2>Salads</h2>
</div>
<div class="col-md-3 portfolio-item">
<a href="#/main">
<img class="img-responsive" src="images/main.jpg" alt="main">
</a>
<h2>Main</h2>
</div>
<div class="col-md-3 portfolio-item">
<a href="#/dessert">
<img class="img-responsive" src="images/desserts.jpg" alt="desserts">
</a>
<h2>Desserts</h2>
</div>
</div>
<!-- /.row -->
I have 4 columns as above, when user selects(clicks) one of the column, i want to highlight it with some style
Try this
Add main-menu class and active class
JQUERY
$('.main-menu div').on('click',function(){
$('div').removeClass('active');
$(this).addClass('active');
});
CSS
.active{
background-color:green;
}
DEMO
I'm trying to make this grid work but I'm not sure what's the best approach here. I have this page with several thumbnails and each thumbnail has a title. The problem is that when the title length is very long it pushes the thumbnail and everything get messy like this:
I would like to find a way to keep thumbnails aligned, so if there is a very long title instead of pushing that thumbnail down, it pushes the whole row.
This is the markup I have so far for this block of thumbnails:
<div class="container">
<div class="content row">
<div class="col-lg-12">
<h1>Fresh Goals and More</h1>
<hr>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title That is Very Long So I Can Test How does Long Titles Behave in My web site display<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
</div><!-- content row close -->
</div><!-- container close -->
Any hint on how can I fix this? Thanks in advance.
this is simple you have to have a row for four thumbs
<div class="row">
<div class="col-md-3">thumb</div><div class="col-md-3">thumb</div><div class="col-md-3">thumb</div>
</div>
<div class="row">
<div class="col-md-3">thumb</div><div class="col-md-3">thumb</div><div class="col-md-3">thumb</div>
</div>
the row will keep the height of the longest column with children thumb
http://www.bootply.com/6C7i5iRZhz