<div class="blog-card">
<div class="blog-card__item blog">
<div class="blog-card__img">
<img class="" src="./assests/img/2.jpg" alt="">
</div>
<div class="blog-card__content"></div>
blog-card__img I need to do div's nth-child(2), which has this class, but it doesn't happen
I understood your idea. Do you want to modify the .blog-card__img of the 2nd .blog-card?
It won't work because there is still an H4 tag on the same level as the classes .blog-card
To do this, put all the .blog-card classes in a div and style the .blog-card__img classes.
Last Blog
<div class="blog-card-container">
<div class="blog-card">
<div class="blog-card__item blog">
<div class="blog-card__img ">
<img class="" src="./assests/img/1.jpg"
alt="">
</div>
<div class="blog-card__content">
...
</div>
</div>
</div>
<div class="blog-card">
<div class="blog-card__item blog">
<div class="blog-card__img ">
<img class="" src="./assests/img/2.jpg"
alt="">
</div>
<div class="blog-card__content">
...
</div>
</div>
</div>
<div class="blog-card">
<div class="blog-card__item blog">
<div class="blog-card__img ">
<img class="" src="./assests/img/3.jpg"
alt="">
</div>
<div class="blog-card__content">
...
</div>
</div>
</div>
<div class="blog-card">
<div class="blog-card__item blog">
<div class="blog-card__img ">
<img class="" src="./assests/img/4.jpg"
alt="">
</div>
<div class="blog-card__content">
...
</div>
</div>
</div>
</div>
and the CSS will look like this:
<style>
.blog-card-container .blog-card:nth-child(2) .blog-card__img {
// Your Style
}
</style>
your 2nd div tag is not blog-card__img, replace blog-card__content with blog-card__img or add the following:
<div class="blog-card">
<div class="blog-card__item blog">
<div class="blog-card__img">
<img class="" src="./assests/img/2.jpg" alt="">
</div>
<div class="blog-card__img blog-card__content"></div>
Related
I need to made this div in bootstrap 3 as shows in image...
I need to display 4 icons/images in one row and another 4 icons in another row in smaller screen/mobile view..i dont know any error in my code..
please help me to make this as shown as in image.
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="col-md-2"></div>
<div class="col-md-1 text-center ">
<div class="im1">
<img src="/images/speaker.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Sound insultion</h6>
</div>
</div>
<div class="col-md-1 text-center" >
<div class="im1">
<img src="/images/renewable-energy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Save energy</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/window.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Prevent Dust Buildup</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/stormy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Storm Resistant</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/umb.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Blocks Seepage</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/sun.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Thermal Insulation</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/maintenance.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Low maintenance</h6>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</section>
styles
.im1{
padding-top: 8px;
padding-left: 8px;
}
.siz{
width: 40px;
}
.textt{
font-size: 15px;
color:#ffffff;
font-family: 'Times New Roman', Times, serif !important;
}
Here is the image
how to make this image using bootstrap grid system...
I created a code for you. I hope it will help to you.
https://codepen.io/myco27/pen/OvMdGp
img{
width: 100%;
}
.img1{
width: calc(100% / 8);
float:left;
}
#media (max-width: 860px) {
.img1{
width: calc(100% / 4);
float:left;
}
}
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
</div>
</section>
First bootstrap runs in a 12 grid sysytem that is defined or can be broken down into 2,3, or 4 segements...basically any divisor of 12. In your case, to get the first four images in a row (in a small device), we split the grid by 3 i.e "col-md-3" for each image wrapper and "col-lg-1" (for large devices) e.g using a snippet from your code
<div class="col-lg-1 col-md-3 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
Then avoid splitting the grid at the main <div class="col-md-2"></div> wrapper, simply leave it as <div class="row justify-content-md-center"></div>.
This should work just fine.
NB: The number of images willbe only 8 in this container
For Your CSS is simply modify the following
.siz{
width: 100%;
}
Try This. it has 8 div in 1 row. as shown in image
<style>
.main{
background:#034da2;
}
</style>
<div class="col-md-12 main">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
</div>
</div>
</div>
I'm using bootstrap cards to build this layout on desktop:
So far so good, at this width everything is ok as well:
But from this width to desktop width the container is not filled:
The HTML to build the card with the images is:
<div class="card h-60">
<div>
<div class="row box">
<div class="box-content formal">
<div class="col-md-12">
<img class="imageban" src="img/crm.png" />
<span><b>CRM</b></span>
</div>
</div>
<div class="box-right">
<a href="#">
<img class="img-responsive" src="img/img1.jpg"/>
</a>
</div>
</div>
</div>
<div>
<div class="row box">
<div class="box-content report">
<div class="col-md-12">
<img class="imageban" src="img/report.png" />
<span><b>Report</b></span>
</div>
</div>
<div class="box-right">
<a href="#">
<img class="imageban" src="img/img4.jpg"/>
</a>
</div>
</div>
</div>
<div>
<div class="row box">
<div class="box-content formal">
<div class="col-md-12">
<img class="img-responsive" src="img/formal_notices.png" />
<span><b>Formal Notices</b></span>
</div>
</div>
<div class="box-content text">
<a href="#">
Open the Formal <br>Notice Document <br>Library
</a>
</div>
</div>
</div>
</div>
And the CSS is only this line:
.row.box{
max-width: 345px;
}
I'm stuck in this, any help would be nice. Thanks.
You can remove the class .box and use the Bootstrap classes instead col-md-4 col-xs-12.
I was making a layout to create an image grid using Zurb Foundation 6.4.3 XY Grid's Card Component. All my images are actually 320x180 px in dimension. But when I am running the following Code images are getting stretched.
I am new in CSS3 Flexbox and Foundation XY Grid and not being able to find out what is happening here. I will be grateful if someone help me to find out a solution.
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<div class="grid-container">
<div class="grid-x medium-up-3">
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
</div>
</div>
Add align-self to your img (the stretching happens as the align-items property is stretch by default in the flex direction). You can also add align-items: center to your card.
If so needed, you can throw in a width: 100% too for the img (for the image to scale evenly) - see demo below:
.card img {
align-self: center;
}
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css' />
<div class="grid-container">
<div class="grid-x medium-up-3">
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
</div>
</div>
A foundation based solution would be to use:
Use grid-x and align-center for the grid wrapper.
Use the following markup for cell:
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
See demo below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css">
<div class="grid-container">
<div class="grid-x align-center">
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
</div>
</div>
I have divided my grid system following way.
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="slider"></div>
<!--divided column into 6/6-->
<div class="col-md-6">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail" />
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
</div>
<div class="col-md-6">
<p>some content with image</p>
</div>
</div>
<div class="col-md-4">
some content plus image
</div>
</div>
</div>
My problem is I can't set 3 images in that div because of less width. Can any one tell how I can make it work. If I am doing any think wrong in my grid system please guide me.
Thank you
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="slider"></div>
<!--divided column into 6/6-->
<div class="col-md-6">
<div class="col-md-4">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail" />
</div>
<div class="col-md-4">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
</div>
<div class="col-md-4">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
</div>
</div>
<div class="col-md-6">
<p>some content with image</p>
</div>
</div>
<div class="col-md-4">
some content plus image
</div>
</div>
Hope This will work..
You can use with to adding a custom class
.thumb_img .img-thumbnail{
width:32%;
padding:4px;
margin-right:1%;
float:left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="slider"></div>
<!--divided column into 6/6-->
<div class="col-md-6 thumb_img">
<div class="row">
<img src="img/2.jpg" class="img-thumbnail img-responsive" />
<img src="img/2.jpg" class="img-thumbnail img-responsive" />
<img src="img/2.jpg" class="img-thumbnail img-responsive" />
</div>
</div>
<div class="col-md-6">
<p>some content with image</p>
</div>
</div>
</div>
</div>
Not a 100% sure about your question but..
1) you can only nest col-'s in row's. i.e:
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
2) each time you've divided a row in multiple columns, then inside the nested row you have 12 columns available again. i.e:
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
Or you can create 3 columns inside a row:
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
I.e. 4 * 3 = 12 columns.
I can not solve the problem, please help. I do adaptive site with the bootstrap grid and can not locate four images in one line. images should be near without any interval and spacing.
I have my code:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
Images are 295x150 and with intervals in browser
Add the class img-responsive to each <img> tag like so:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img class="img-responsive" src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img class="img-responsive" src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img class="img-responsive" src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img class="img-responsive" src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
I have made a fiddle with no margin/ padding like this:
http://jsfiddle.net/Le6oosvo/2/
I used this HTML:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="one">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="two">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="three">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="four">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
</div>
</div>
</div>
And this little bit of CSS:
.main_boxes .col-sm-3 {
padding-left: 0px;
padding-right: 0px;
}
I used .col-sm-3 in stead of .com-md-3 to make the images align on the side of each other longer (when you squeeze it down). I also added bootstrap class to make the images responsive.
Suppose your images are 200px wide and 200px high. You could try something like
<div class="container">
<div class="row">
</div>
<div class="col-md-3">
<image src="image1.jpg"></img>
</div>
<div class="col-md-3">
<image src="image2.jpg"></img>
</div>
<div class="col-md-3">
<image src="image3.jpg"></img>
</div>
<div class="col-md-3">
<image src="image4.jpg"></img>
</div>
</div>
The bootstrap grid is 12 columns wide. Which means the columns have to add up to 12. You can do this by making four divs of three columns each. It would look something like this when done
Image 1 Image 2 Image 3 Image 4
Hope this helps.