Twitter Bootstrap 2 column Image Grid - html

I want to create a 2 column image grid similar to this example.
I'm looking for suggestions on how to best achieve this using the Twitter Bootstrap grid? I've attempted to do this with not much success. My main issues were the gutter between images being uneven, not being able to align the images on the center line of the page, and how to handle both portrait and landscape images. Thanks in advance.
Edit: As recommend I have supplied an example with a screenshot of the result.
<div class="container">
<div class="row">
<div class="span12">
<div class="row">
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
</div>
<div class="row">
<div class="span8"><img src="http://goo.gl/mrllo"></div>
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
</div>
<div class="row">
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
<div class="span8"><img src="http://goo.gl/mrllo"></div>
</div>
</div>
</div>
</div>
The first row of span4's are perfectly aligned however, the bottom of the span4's in the second two rows are not aligning to the bottom of the span8 as the image illustrates.

Ok seems as if reading up upon nesting columns in bootstrap will help you on this one, what you are trying to achieve is relatively straight forward, just takes time to figure it out
http://twitter.github.com/bootstrap/scaffolding.html#responsive
I have tried this and it works, though you just need to put the appropriate images in their place as they are all different sizes
<div class="container">
<div class="row">
<div class="span8">
<img src="http://example">
</div>
<div class="span4">
<img src="http://example">
</div>
</div><!--row-->
</div><!--container-->
<div class="container">
<div class="row">
<div class="span6">
<img src="http://example">
</div>
<div class="row">
<div class="span6">
<img src="http://example">
</div>
</div><!--row-->
<div class="span6">
<img src="http://example">
</div>
</div><!--row-->
</div><!--container-->
<div class="container">
<div class="row">
<div class="span9">
<img src="http://example">
</div>
<div class="span3">
<img src="http://example">
</div>
<div class="row">
<div class="span3">
<img src="http://example">
</div>
</div><!--row-->
</div><!--row-->
</div><!--container-->

Related

Make this layout responsive without duplicate elements

I have to create this layout responsive for a custom slider:
https://imgur.com/YbKdOAC
https://imgur.com/TPo2h57
-The icon of an image is where the slides are going to be.
-There is another pink block with the controls of the slider.
-The last pink block has some text. Nothing special.
There are 2 background-images in those patterns.
I began with the desktop version using flexbox, but when I try to adjust the layout to the tablet version, it was imposible because this two elements are in different rows.
https://imgur.com/Upjsh8B
This is more or less my code right now:
<div class="slider">
<div class="container">
<div class="row">
<div class="col-3">
<img class="logo-img"
src="assets/images/logo.png">
<div class="titulo-boton">
<h1>Lorem ipsum</h1>
</div>
</div>
<div class="col-9">
<div class="row primera" primera>
<div class="col yourtrip">
<h2>Lorem ipsum</h2>
<hr>
<p class="tags">#tags</p>
</div>
<div class="col"></div>
<div class="col ">
<div class="image-slider image-wrap">
<!-- <img src="assets/images/rocket.png">-->
</div>
</div>
</div>
<div class="row" segunda>
<div class="col"></div>
<div class="col controls" controls>
<div class="botones row w-100">
<div class="col p-0">
prev
</div>
<div class="col p-0">
next
</div>
</div>
</div>
<div class="col"></div>
</div>
</div>
</div>
</div>
</div>
Thanks for your help!
Edit:
I have created a pen to make the things easier. The assets are different but the layout is the same.
https://codepen.io/jenvigo/pen/jRrwdw?editors=1100

How to create a non-fixed sidebar (Bootstrap grid)

I can only find solutions for fixed sidebars (e.g. Creating a fixed sidebar alongside a centered Bootstrap 3 grid), but not for non-fixed ones, i.e. a sidebar that scrolls down with the content.
I am using a bootstrap grid (Bootstrap 4):
<nav class="navbar sticky-top">...</nav>
<!--content-->
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
<div class="col-md-3">
<img src=https://via.placeholder.com/150x130">
</div>
<div class="row">
...
</div>
</div>
I need a sidebar to the left of this content, but under my top navigation bar. How do I do this?
(the number of rows I need is undefined. They will later be generated by a php loop, so I don't think I can put the sidebar in the grid system)
Just put the content in a wrapper, put another DIV before that, wrap a row around them and apply the usual classes to divide the page width:
<nav class="navbar sticky-top">...</nav>
<!--content-->
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar">
SIDEBAR
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
</div>
<div class="row">
some other content...
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/XZedxM

Aligning 2 columns with images in rows

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>

Html image-content layout

I am trying to get the image and content side by side in the layout. Something like the way they have done it here. I have tried the bootstrap grid layout for doing it but I am just not getting it right plus it is not responsive.Can someone please help me out with this.
Here is the skeleton of the code:
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6">
<div class="col-lg-2">
<img src=""/>
</div>
<div class="col-lg-4">
<div><h4></h4></div>
<p class="text-muted"></p>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-2">
<img src=""/>
</div>
<div class="col-lg-4">
<div><h4></h4></div>
<p class="text-muted"></p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
//image here
</div>
<div class="col-md-8">
//text here
</div>
Hope this helps!

Complex bootstrap spanning grid

Got a headache with complex spanning grid using bootstrap.
There are portrait and landscape blocs into 5 columns but they all have the same surface except the bloc number 1 that only got the same width.
It become complex when two portrait blocs shares the same row. Moving content with margin, is not suitable.
here you go: this is the fiddle Demo
<div class="row-fluid">
<div class="span4">
<div class="well">1<br/><br/><br/><br/><br/></div>
<div class="well">5</div>
</div>
<div class="span8">
<div class="span12"><div class="well">2</div></div>
<div class="row-fluid">
<div class="span8">
<div class="well">3</div>
<div class="well">6</div>
</div>
<div class="span4"><div class="well">4<br/><br/><br/><br/><br/></div></div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="well">7<br/><br/><br/><br/><br/></div>
<div class="well">14<br/><br/><br/><br/><br/></div>
</div>
<div class="span10">
<div class="row-fluid">
<div class="span6">
<div class="well">8</div>
</div>
<div class="span6">
<div class="well">9</div>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<div class="well">
10<br/><br/><br/><br/><br/>
</div>
</div>
<div class="span6">
<div class="well">11</div>
<div class="well">12</div>
</div>
<div class="span3">
<div class="well">
13<br/><br/><br/><br/><br/>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<div class="well">15</div>
</div>
<div class="span6">
<div class="well">16</div>
</div>
</div>
</div>
</div>
you are not completely free on the panel sizes using span, if you want a more precise result you should use custom percentages on the div width.