I need to design grid using bootstrap, like in the picture that I have uploaded.Please help me.
I think something along the lines of
<div class="col-sm-4">
<div class="content-here">
<img src="img1.jpg" />
</div>
</div>
<div class="col-sm-8">
<div class="boxes">
Box 1
</div>
<div class="boxes">
Box 2
</div>
<div class="boxes">
Box 3
</div>
<div class="boxes">
Box 4
</div>
</div>
CSS
.content-here { height: 400px; }
.boxes { float:left; width:50%; height:200px; }
The grid system code might look like this :
<div class="row">
<div class="col-sm-4">
<img src="example.jpg">
</div>
<div class="col-sm-4">
<div class="col-sm-12">
<img src="example.jpg">
</div>
<div class="col-sm-12">
<img src="example.jpg">
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-12">
<img src="example.jpg">
</div>
<div class="col-sm-12">
<img src="example.jpg">
</div>
</div>
</div>
After that, you can specify the width and height of each image. If you want your image to take a full width (means taking all space of the column), you can set width:100%.
Related
i want to align col-lg-8 with col-lg-4 that contains 2 rows for 2 images, i need those 2 columns align perfectly so they fit each others height
i tried this:
desired look
and what i got
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-2">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Link to CODEPEN
While it is true that you can't depend on Bootstrap to do everything, you don't need any of the additional css "gymnastics" proposed by #derek-gutierrez because with native Bootstrap classes alone you can get done almost everything and most certainly in this particular case here.
The following code is leaner and does everything you want with native Bootstrap classes alone. No extra gymnastics needed. All with perfect paddings/gutter out of the box:
<div class="container">
<div class="row">
<div class="col-lg-8">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
<div class="col-lg-4">
<div class="row">
<div class="col">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
That's the magic of the Bootstrap grid just working.
Notice: You had 2 unnecessary divs (first row and col-lg-12). I cut them out. That was totally useless fat in your code. Don't put in more code than necessary. That reduces the number of potential problems.
Try below code, I hope this is what you are looking for
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-8">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-4">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
</div>
You can't depend on bootstrap to do everything. You are going to add some of your own custom CSS to achieve the effect you want. If you are unfamiliar with css and selectors W3 schools is a good resource.
To achieve this effect add this CSS to the head of your document:
(This is simply to illustrate based off of your example, you will want to be more specific with your selectors if there is going to be more to this page)
<style>
img {
width: 100%; /* Makes imgs match the parent column/container width */
}
#top-image {
margin-bottom: 30px; /* Adds the necessary space to the bottom of the first image */
}
</style>
The columns inside the col-lg-4 should not be col-lg-2. This is basically saying these columns are 2/12ths the size of the container. Instead change them to 12 to span the full width of the container. I also added an id to the first image in this column "id="top-image" to add the necessary margin.
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<img src="img/1.png" />
</div>
<div class="col-lg-4">
<div id="top-image" class="row">
<div class="col-lg-12">
<img src="img/2.png" />
</div>
</div>
<div class="row">
<div class="col-lg-12">
<img src="img/3.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I feel like this should be easy, but I'm trying to get my .temp and .city divs to be side-by-side, but they're stacking vertically instead.
I've tried changing the size of the columns, but they always stack on top of each other. Any ideas?
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
</div>
You can wrap temp div and city div into 2 different columns. Check this Bootstrap4 Example.
.wind,
.temp,
.city {
height: 50px;
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
</div>
<div class="col-lg" id="col3">
<div class="city"></div>
</div>
</div>
You can rearrange your html code to this format.
<div class="row">
<div class="col-lg" id="col2">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
You should edit your code to this, making the second row have two columns.
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col temp"></div>
<div class="col city"></div>
</div>
</div>
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.
I am trying to create four columns in a row using bootstrap. There should be some spacing between columns. please check the image. can someone tell me how to create a page like seen in the image?
Anoted in the comments below, your desired box width of 344px, 4*344=1376, this doesnt fit into the bootstrap grid system for smaller sizes, so will wrap, as such you will need to use e.g:
Demo Fiddle
HTML
<div class='wrapper'>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
.wrapper {
white-space:nowrap;
text-align:center;
}
.wrapper div {
display:inline-block;
background:lightblue;
margin:5px;
height:200px;
width:344px;
}
Otherwise the bootstrap way:
Demo Field
Given the HTML:
<div class="container">
<div class="row">
<div class="col-xs-3">
<div></div>
</div>
<div class="col-xs-3">
<div></div>
</div>
<div class="col-xs-3">
<div></div>
</div>
<div class="col-xs-3">
<div></div>
</div>
</div>
</div>
You can use the CSS (should be tidied)
[class*=col] div {
background:lightblue;
margin:5px;
height:200px;
}
DEMO UPDATED bootply: http://www.bootply.com/T8BDlFLpRD
You can use this code:
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
</div>
</div>
CSS
body
{
background:orange;
}
.col-md-3{
height:200px;
padding-top:25px;
}
Using bootstrap:
<div class="row">
<div class="col-xs-3">block 1</div>
<div class="col-xs-3">block 2</div>
<div class="col-xs-3">block 3</div>
<div class="col-xs-3">block 4</div>
</div>
Inside each block, you can put your column content
I'm trying to have a specific HTML markup of my divs using css and bootstrap 3.2. The image below demonstrates the result I want to get.
I've used the bootstrap grid system so that my page would be responsive and properly displayed in small screen devices. This is the code I've tried. And I used http://www.bootply.com to test it.
Any ideas how to get the markup ?
<div>
<div style="display:inline-block; border:1px solid gray; width:150px; height:150px;">
<img src='' alt="image go here !"/>
</div>
<div class="container-fluid" style="display:inline-block;">
<div class="row" style="border:1px solid gray;">
<div class="col-md-9">This is the product name</div>
<div class="col-md-3 text-right">1 230.99</div>
</div>
<div class="row" style="display:inline-block; border:1px solid gray;">
<div class="col-md-6">Property 1</div>
<div class="col-md-6">Property 2</div>
</div>
</div>
</div>
The desired result :
EDIT : The result I get :
I've created a Bootply for you.
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="img">
<img src="">
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-8">
This is the product name
</div>
<div class="col-md-4">
1 230.99
</div>
</div>
<div class="row">
<div class="col-md-6">
Property 1
</div>
<div class="col-md-6">
Property 2
</div>
</div>
</div>
</div>
</div>