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
Related
I have a 9-cell grid containing images (using bootstrap columns). The grid works fine and is responsive when it contains images only. However, my goal is to make the images clickable, hence I placed the <img> tag inside an anchor tag <a>, which resulted in the photos getting out of the grid order.
When I clicked on "Inspect" on Chrome, it showed the <a> as a large container, with the <img> centered inside of it. How do I make the <a> element adhere to bootstrap column sizes?
HTML:
<div class="container">
<div class="row">
<a href="#">
<img class="col-md-6 col-lg-4 gallery-photo" src="https://" alt="something">
</a>
<a href="#">
<img class="col-md-6 col-lg-4 gallery-photo" src="https://" alt="something">
</a>
<a href="#">
<img class="col-md-6 col-lg-4 gallery-photo" src="https://" alt="something">
</a>
</div>
</div>
CSS:
.gallery-photo {
object-fit: cover;
height: 300px;
margin: 1% 0;
}
The columns are supposed to be placed directly inside of a row.
So it should look something like this.
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">
<a href="#">
<img class="gallery-photo" src="https://" alt="something">
</a>
</div>
<div class="col-md-6 col-lg-4">
<a href="#">
<img class="gallery-photo" src="https://" alt="something">
</a>
</div>
<div class="col-md-6 col-lg-4">
<a href="#">
<img class="gallery-photo" src="https://" alt="something">
</a>
</div>
</div>
</div>
Try adding the bootstrap columns to the a tag and not the img.
<div class="container">
<div class="row">
<a class="col-md-6 col-lg-4" href="#">
<img class="gallery-photo" src="https://" alt="something">
</a>
<a class="col-md-6 col-lg-4" href="#">
<img class="gallery-photo" src="https://" alt="something">
</a>
<a class="col-md-6 col-lg-4" href="#">
<img class="gallery-photo" src="https://" alt="something">
</a>
</div>
</div>
Bootstrap columns should be placed directly inside of a row.
Your links need to go inside of the bootstrap columns if you want them to be constrained by the bootstrap column sizes.
In addition, you should put width: 100% on your images for object-fit to work the way you want it to.
.gallery-photo {
object-fit: cover;
width: 100%;
height: 300px;
margin: 1% 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">
<a href="#">
<img class="gallery-photo" src="https://placeimg.com/1100/750/nature" alt="something">
</a>
</div>
<div class="col-md-6 col-lg-4">
<a href="#">
<img class="gallery-photo" src="https://placeimg.com/1100/750/nature" alt="something">
</a>
</div>
<div class="col-md-6 col-lg-4">
<a href="#">
<img class="gallery-photo" src="https://placeimg.com/1100/750/nature" alt="something">
</a>
</div>
</div>
</div>
--FIRST IMAGE IS DESIRE OUTPUT---
I got it to work on my screen but when I put it on bigger monitor doesn't seem to scale right. Any Recommendations ?
<div style="margin-left: 100px;margin-right: 100px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<img src="img/NUESTROS EVENTOS -1.png">
</div>
<div class="col-sm-3">
<img s src="img/NUESTROS EVENTOS -2.png">
</div>
<div class="col-sm-3">
<img src="img/NUESTROS EVENTOS -3.png">
</div>
<div class="col-sm-3">
<img src="img/NUESTROS EVENTOS -5.png">
</div>
</div>
</div>
This is what I get with this other code, centers but can't get rid the spaces.
---THIS IS WHAT I GET---
<div class="row" style="margin-bottom: 70px;">
<!-- column -->
<div class="col-xs-6 col-sm-5cols wow bounceInLeft ">
<div class="thumbnail ">
<img src="img/NUESTROS EVENTOS -1.png">
</div>
</div>
<!-- column -->
<div class="col-xs-6 col-sm-5cols wow bounceInLeft ">
<div class="thumbnail">
<img src="img/NUESTROS EVENTOS -2.png">
</div>
</div>
<!-- column -->
<div class="col-xs-6 col-sm-5cols wow swing ">
<div class="thumbnail">
<img src="img/NUESTROS EVENTOS -3.png">
</div>
</div>
<!-- column -->
<!-- column -->
<div class="col-xs-6 col-sm-5cols wow bounceInRight ">
<div class="thumbnail">
<img src="img/NUESTROS EVENTOS -5.png">
</div>
</div>
</div>
You can use inline-block elements, I have created inline-block class to wrap img and gave text-center class to row to align images in center.
.row-custom .inline-block{
display:inline-block;
}
.row-custom .inline-block img{
max-width:100px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-custom text-center">
<div class="inline-block">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
<div class="inline-block">
<img s src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
<div class="inline-block">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
<div class="inline-block">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
</div>
Don't need to change or add more into CSS, You can use the Bootstrap class:
<div class="row">
<div class="col-sm-3">
<img class="img-responsive center-block" src="img/NUESTROS EVENTOS -1.png">
</div>
<div class="col-sm-3">
<img class="img-responsive center-block" src="img/NUESTROS EVENTOS -2.png">
</div>
<div class="col-sm-3">
<img class="img-responsive center-block" src="img/NUESTROS EVENTOS -3.png">
</div>
<div class="col-sm-3">
<img class="img-responsive center-block" src="img/NUESTROS EVENTOS -5.png">
</div>
</div>
Do these 3 things to achieve the desire result-
1. Add .img-responsive class to your img tags as its a way to make images responsive in bootstrap framework. You can also check this link for reference .
2. Add width="100%" to images to take up full space available in the image.
3. Add nopadding class to columns so that it will remove the padding space.
Update your code as below:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3 nopadding">
<img src="https://dummyimage.com/600x400/000/fff" width="100%" class="img-responsive">
</div>
<div class="col-xs-3 nopadding">
<img s src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%">
</div>
<div class="col-xs-3 nopadding">
<img src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%">
</div>
<div class="col-xs-3 nopadding">
<img src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%">
</div>
</div>
</div>
I'm using bootstrap and I have a row with 1 column and another row with 2 columns.
All items have one picture in it, and should take up all the avaible space inside the column.
So far I can't get the first image on the first row to fill the div width,this image resizes correctly when I reduce the window, but when I enlarge it, the picture will
resize to its original maximum size when I want it to be always same as the div width
Here is the snippet : https://jsfiddle.net/gd0obgg9/
Here is the code :
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Portfolio Item
</h1>
</div>
</div>
<div class="row">
<div></div>
<div class="col-md-12">
<img class="img-responsive" src="http://placehold.it/550x200" alt="">
</div>
<div></div>
</div>
<div class="row">
<hr>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
</div>
</div>
</body>
I want my 550x200 to fill enterely the width
Any advice ? thanks
If I understood you correctly, to give the image full width use:
.img-responsive {
width: 100%;
}
Note that this will, in some cases, distort the image to cover the full div
In my test:
Update your css to set the width of img elements inside your columns to 100%.
you should add width:100% to your img
here the new code
<body>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Heading -->
<div class="row">
<div class="col-lg-12 col-xs-12 col-md-12">
<h1 class="page-header">Portfolio Item
<small>Item Subheading</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Portfolio Item Row -->
<div class="row">
<div>
</div>
<div class="col-md-12">
<img class="img-responsive" style="width:100%" src="http://placehold.it/550x200" alt="">
</div>
<div>
</div>
</div>
<!-- /.row -->
<!-- Related Projects Row -->
<div class="row">
<hr>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
</div>
</div>
</body>
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>
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