Take a look this picture:
2nd column is at right, it looks the height isn't equal to the first column I need to figure out how 2nd column should get the same height as the first column.
My HTML:
<div class="row"">
<div class="col-8">
<div class="row">
<div class="col-12 mb-2">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
</div>
Use the flexbox utils to make the right column display:flex, flex-direction: column...
<div class="container-fluid">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-12 mb-2">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
<div class="col-4 d-flex flex-column">
<div class="row flex-fill justify-content-between">
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12 d-flex align-items-end">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/hlHhjz3K1Q
You can try something like this:
<div class="container">
<div class="d-md-flex">
<div class="flex flex-row flex-nowrap">
<img src="https://i.imgur.com/exWWySt.png">
<img src="https://i.imgur.com/exWWySt.png">
</div>
<div class="flex-column">
<img src="https://i.imgur.com/exWWySt.png" height="300">
<img src="https://i.imgur.com/exWWySt.png" height="300">
<img src="https://i.imgur.com/exWWySt.png" height="300">
</div>
</div>
</div>
Codepen
Related
I'm having troubles trying to create a grid layout like this
Grid layout
what i assumed was to create a row and have 2 columns divided, and create a row+col inside each of the 2 columns and in each col have a card.
this is my code
<div class="container">
<div class="row">
<div class="col-8">
Modules
<div class="module-container">
<div class="row">
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4">
Schedule
<div class="row">
<div class="col-6">
<div class="card">
<img src="/images/star.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<img src="/images/star.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
</div>
and this is what came out
my layout
I dont understand why the cards in my second row aren't the same length too?
first you need to add outer row and add 2 columns and then inside first column add row then give your columns col-3, col-4 how much you want in a row same goes to second column. I hope down script help you
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- outer grid first column -->
<div class="col-8">
Modules
<div class="module-container">
<!-- first column inner grid -->
<div class="row">
<div class="col-4">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4 mt-2">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4 mt-2">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4 mt-2">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
</div>
</div>
</div>
<!-- outer grid second column -->
<div class="col-4">
Schedule
<!-- second column inner grid -->
<div class="row">
<div class="col-6">
<div class="card">
<img src="/images/star.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<img src="/images/star.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm creating a grid to display images of a team. I have a grid of images and I need to position my bottom 2 images below the top 2 middle images - basically centralizing the bottom 2. How can I achieve this? I've added my HTML and CSS below. Any help will be appreciated. Thanks.
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
Done. Just need to add text-align: center; , see the example below :D
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
text-align: center;
}
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="~/Content/Images/t1.jpg" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="~/Content/Images/t1.jpg" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
Try to add these rules display: flex; and justify-content: center; to .team-row class like below
.team-row{
display: flex;
justify-content: center;
}
Run the Code snippet bellow :
.team-row{
display: flex;
justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
you can try adding this:
.team-grids {
margin: 0 auto;
}
edited: my bad, pls try this one.
add justify-content-md-center
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="row team-row justify-content-sm-center">
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row row justify-content-center">
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
Three changes to your code:
1) Add class row and justify-content-center alongwith team-row. Columns are always used in combination with rows in Bootstrap.
2) Add class img-fluid, because img-responsive is a Bootstrap 3 class which is changed to img-fluid in Bootstrap 4.
3) Add class mx-auto to team-img in case you need to center the image in column. For text, you can use text-center.
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>
Hi guys I need help in organizing a group of images using the bootstrap grid layout.
In the image there is the result I want reach: https://i.stack.imgur.com/RuJud.png
My code produces this result: https://i.stack.imgur.com/ZDa2Z.png
The position of the images is wrong, can you help me watching my code?
<div class="container">
<div class="row game-group-titles">
<div class="col-md-6">
<h4>GIOCHI PREFERITI</h4>
<div class="row">
<div class="col-md-12 giocogrosso">
<img src="../lggioco.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<h4>CURRENTLY PLAYING</h4>
<div class="row">
<div class="col-md-12 giocogrosso">
<img src="../lggioco.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
</div>
</div>
</div>
Not sure if this is what you were looking for
.row {
background: blue;
max-width: 410px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col, > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
<h4>GIOCHI PREFERITI</h4>
<div class="row no-gutters">
<div class="col-12 giocogrosso">
<img src="http://via.placeholder.com/410x190" alt="">
</div>
<div class="col-xs-6 giocopiccoloo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
<div class="col-xs-6 giocopiccoloo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
<div class="col-xs-6 giocopiccoloo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
<div class="col-xs-6 giocopiccolo">
<img src="http://via.placeholder.com/205x95" alt="">
</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.