What would be the best / correct method to replicate the following using bootstrap. There are four colum, each of which is 25% wide, and I would like to add an image inbetween. The columns remain 25% all the way from mobile to desktop.
Simple
<div class="row">
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
</div>
</div>
</div>
PS: You may use text or content for + sign ... its upto you !! I prefer text/content because it will render faster then image.
This seems to do the job, though it's a bit convoluted. The 15-column layout is tricky.
.row.shift-left {
margin-left: -20px;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row shift-left">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-9">Words words words.</div>
<div class="col-xs-3">
<img src="http://placehold.it/300x800" class="img-responsive" />
</div>
</div>
</div>
...
Demo
Related
How to create a grid of images using bootstrap?
Thats what i got when i try the next codes
<div class="row">
<div class="col">
<div class="thumbnail">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg">
</div>
</div>
</div>
Im still in the very first steps learning phase started with HTML CSS and bootstrap as it give us achievements to feel the process.
im expecting to get thumbnail of grids as the following image
try it like this...
<div class="row">
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
Then when adding extra pics, put them in columns too.
<div class="row">
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
It may then work even better if you add widths to those columns using col-* where * is any number between 1 and 12.
<div class="row">
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
I have a section which must contains an image on the left and a text on the right, and in the next col, I have the opposite, I mean, a text on the left and an image on the right. This is my html:
<section>
<div class="container">
<div class="row no-gutters">
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
</div>
</div>
</section>
On desktop, it looks as it should, but on mobile, the order should be always an image first and then the text.
What to do?
You should use flexbox order utility classes for this. Flexbox Order Bootstrap
Open the snippet in full screen mode.
Add order-2 order-md-1 to the text and order-1 order-md-2 to image.
Also, for this to work, I had to wrap the text and image with a div with class row
order-2 order-md-1 means that on from smallest devices, make the order of the item 2 and on medium and after that, make order 1
Update: You can add align-items-center to row to vertically center items
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 ">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
<div class="col-md-6 ">
<div class="feature-desc">
<p>text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6 order-1 order-md-2">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6 order-1 order-md-2">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
I would like to know if there's a better solution to solve the space problem between the two first columns in this code: https://jsfiddle.net/5vtc1Lhp/#&togetherjs=qkIyJnDkmf
I did try to place div inside div, but the width of the div decreased in the first example ( at the top). At the botton it works fine, but I had to define a padding value in px which I don't like since it's a fixed value and I don't know if this spacement should change automatically.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-12">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
<hr>
Bellow is OK.
<hr>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-8" style="padding: 0 0px 0 30px;">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
Thank you!
Container gives gutter of 30px(15px on left and right)
If you remove the container and give it a row.It will give -15px padding on both sides. And that's what you are looking for, right?
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
I'm working on a template and my code looks something like this. It looks how I want to looks, but I don't know if it's ok technical talking.. Need some tips:
<div class="row">
<div class="col-xs-5 padding-box-product-image margin-image-product">
<div class="pic-box-product">
<img class="img-upload img-responsive" src="srcimg.png" />
</div>
</div>
<div class="col-xs-7 width-content-product">
<div class="col-xs-12 no-padding-left">
<h2 class="col-xs-7 no-margin no-padding line-height-product title-product">Ttesta</h2>
<p class="col-xs-5 no-margin dots-product-page line-height-product ">● ● ●</p>
<p class="col-xs-12 no-margin no-padding line-height-product subtitle-product">Xytzadwa </p>
<p class="col-xs-12 no-margin no-padding line-height-product date-product">My test</p>
<div class="col-xs-12 decoration decoration-margins-product-first"></div>
<img class="col-xs-4 img-responsive" src="/images/icon.png" />
</div>
</div>
</div>
It looks ok, except all of the no-padding will elimnate the normal Bootstrap gutter (space between columns). Also, the nested columns should be wrapped in another row. From the Bootstrap docs
Content should be placed within columns, and only columns may be
immediate children of rows.
The last img shouldn't have col-xs-4. Place it inside a column instead. In general the grid col-* is for block elements like the DIV html tag. It shouldn't be for other elements that have other styles (h2, p, etc..)
<div class="row">
<div class="col-xs-5 padding-box-product-image margin-image-product">
<div class="pic-box-product">
<img class="img-upload img-responsive" src="//placehold.it/900x500">
</div>
</div>
<div class="col-xs-7 width-content-product">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-7"><h2 class="line-height-product title-product">Ttesta</h2></div>
<div class="col-xs-5"><p class="dots-product-page line-height-product ">● ● ●</p></div>
<div class="col-xs-12"><p class="line-height-product subtitle-product">Xytzadwa </p></div>
<div class="col-xs-12"><p class="line-height-product date-product">My test</p></div>
<div class="col-xs-12 decoration decoration-margins-product-first"></div>
<div class="col-xs-4"><img class="img-responsive" src="//placehold.it/70"></div>
</div>
</div>
</div>
</div>
</div>
http://www.codeply.com/go/hOXVBXdb5B
I've got a layout which includes a row with 3 columns. Each column has 3 items listed vertically. I'm using Bootstrap.
<div class="row">
<div class="col-sm-4 ">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
<h3>SOMETHING</h3>
<div class="url"> https://something.com </div>
</div>
<div class="col-sm-4">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
<h3>NOTHING</h3>
<div class="url"> https://nothing.com/</div>
</div>
<div class="col-sm-4 appcontainer">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
<h3>EVERYTHING</h3>
<div class="url"> https://everything.com/</div>
</div>
</div>
When the row collapses at 767 px down to about 400 px the layout feels wrong as the individual columns don't fill the space very well. In that case I would like to have it displayed with the image on the left and the header and url on the right as though it were like this..
<div class="col-sm-4 ">
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6">
<h3>SOMETHING</h3>
<div class="url"> https://something.com </div>
</div>
</div>
</div>
Can this be accomplished with css and media queries? Or do I have to dig into some javascript?
It fells like I should be able set something up using display, but I haven't found a magic combination that does anything useful.
Please check the result:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (max-width: 400px) {
.col-xs-6 {
width: 100%;
}
}
.row {
margin-top: 15px;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6 col-sm-12">
<h3>SOMETHING</h3>
<div class="url"> https://something.com </div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6 col-sm-12">
<h3>NOTHING</h3>
<div class="url"> https://nothing.com </div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6 col-sm-12">
<h3>EVERYTHING</h3>
<div class="url"> https://everything.com </div>
</div>
</div>
</div>
</div>
</div>