So I'm trying to display a grid of pictures (4x3) using bootstrap in HTML. However, when I check the code the columns of pictures are there but they're not aligned properly. It looks like this:
Image
My code looks like this:
<body>
<div class="container">
<div class="row">
<br>
<div class="col-lg-12 col-md-6"><h1><b>Storyboards</b></h1></div>
</div>
</div>
<div class="container"> <!--storyboard pages-->
<div class="row">
<div class="col-lg-3">
<img src="lc01.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc02.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc03.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc04.jpeg" alt="test">
</div>
<div class="row">
<div class="col-lg-3">
<img src="lc01.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc02.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc03.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc04.jpeg" alt="test">
</div>
</div>
<style>
img{
width:280px;
height:420px;
border:1px solid #000000;
margin-bottom: 12px;
}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
If anyone could explain to me what mistake I'm making that would be very helpful.
Thank you
You aren't closing your last column in either row:
<div class="col-lg-3">
<img src="lc04.jpeg" alt="test">
Please check that you have missed the closing div for the rows ( or closing div for las column )
<div class="row">
<div class="col-lg-3">
</div>
</div>
Related
I am stuck at a point where i dont know where to go....I am trying to create a grid system for my website but not getting the desired output.
Here is the output structure which i want to create using Bootstrap 4:
My Code :
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-sm-4">
Some text here
</div>
<div class="col-sm-8">
<img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
Some Text Here
</div>
</div>
</div>
</section>
I will appreciate it if someone guide me the right direction.Have lack of knowledge about bootstrap grid system and column classes.
If you change both col-sm-4 to col-12 you will get two full width columns inside your row.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-12">
Some text here
</div>
<div class="col-12">
<img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
Some Text Here
</div>
</div>
</div>
</section>
You can divide your section / container into two columns (left/right) and then the right column into rows (text/image)
Something like below (see demo)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<!-- left column -->
<div class="col-xs-4">
<img src="https://placekitten.com/200/300" class="img-fluid" alt="Responsive image">
</div>
<!-- right column -->
<div class="col-xs-8">
<!-- first row -->
<div class="row">
<div class="col">
some text only on right column
</div>
</div>
<!-- second row -->
<div class="row">
<div class="col">
<img src="https://placekitten.com/300/100" class="img-fluid" alt="Resp. img">
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="row">
<div class="col-xs-12">
footer text that goes the width of the container
</div>
</div>
</div>
</section>
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've been trying to make an album images group, But there is a Big gap in the right side and won't be fit without using Padding, But when i use Padding it only fit for my PC resolution and becomes a bigger gap in other resolutions, Also if there is a picture bigger in resolution than the other images it wont resize itself of the main size, I've tried many ways but i just don't understand what should i change the height and width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="cards-deck">
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<style>
.card-block {
display: flex;
align-items: center;
padding: 16px;
}
.card {
background-color: transparent;
border-width: 0px;
}
.row {
float: left;
}
</style>
</body>
</html>
Other devices LOOK
https://i.imgur.com/U2LtbFN.jpg
View Code: http://codepen.io/cbgraphics/pen/GrMYKQ
Looking at your code it appears that you are using Bootstrap. There are some built in tags that you didn't take advantage of.
I rebuilt a similar layout using lots of little tweaks to your code.
First - You need to wrap your content in the container class:
<div class="container">
Second - It is better if you put each card in a column div. These will automatically fill in your columns (assuming that the size of your images are all the same. <div class="col-md-3">
Third - I changed the padding to keep the grid spacing consistent.
You do not need to create a new row for each image. The current way you are using Bootstrap is trying to override the default functions and CSS that make it awesome.
More about the Bootstrap grid system: http://getbootstrap.com/css/#grid
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%.
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.