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
Related
Thanks to the many questions and answers on stackoverflow about card-columns, I could set tiled cols in row but it looks like some kind of padding or margin or else is breaking bootstrap's 12 columns per row "rule".
I am trying to achieve a masonry / pinterest tile layout, with Tile 1 and Tile 2 columns going under the description column, white text remains under picture profile.
In the below example, when I set the width of the description col to col-xl-4 makes it remain under the profile picture col instead of next to it.
Moreover, the description column takes the same height as the profile picture column.
<div class="container-fluid">
<div class="row card-columns">
<div class="col-xl-8 card">
<div class="card-body">
<h2>Profile picture</h2>
<img src="https://via.placeholder.com/900x500.jpg" alt="" class="img-fluid rounded">
</div>
</div>
<div class="col-xl-4 card">
<div class="card-body">
<h2>Description</h2>
</div>
</div>
<div class="col-xl-8 card">
<div class="card-body">
<h2>Text</h2>
</div>
</div>
<div class="col-xl-2 card">
<div class="card-body">
<h2>Tile 1</h2>
</div>
</div>
<div class="col-xl-2 card">
<div class="card-body">
<h2>Tile 2</h2>
</div>
</div>
</div>
</div>
How can I fix this? What am I missing here?
Tried it on this fiddle https://jsfiddle.net/pba8h4dk/.
<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="container-fluid">
<div class="row">
<div class="col-lg-9 card">
<div class="card-body">
<h2>Profile picture</h2>
<img src="https://via.placeholder.com/900x500.jpg" alt="" class="img-fluid rounded">
</div>
</div>
<div class="col-lg-3 card">
<div class="card-body">
<h2>Description</h2>
</div>
</div>
</div>
</div>
Removing card-columns class did the trick (and obviously making sure your screen is sm/md/lg/)
guys so I'm pulling in content from a JSON file to populate a grid of images. when the data loads it displays all the images in 1 column instead of in a grid. ideally, i would like a 4 wide image grid. All the CSS for this part of from default Bootstrap 4 values
HTML
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div ng-repeat="friend in UHD" class="row">
<div id="img-frame" class="col-md-3 col-sm-6 col-xs-12">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
Current result
Expected (simulated) result
I think You didn't wrap Your Grid with container and row class
Follow below example
<div class="container">
<div class="row">
<div class="col"> 1 of 2 </div>
<div class="col"> 2 of 2 </div>
</div>
</div>
**Wrap Your column div with container and row class **
You want to iterate the columns instead of the row...
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12" ng-repeat="friend in UHD">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
here's the code I used to get it to work.
<div id="UHD" ng-controller="Content-folders-4K" class="row">
<div ng-repeat="friend in UHD" class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<a href="{{friend.link}}">
<div id="tiles" class="tiles">
<img src="thumbs/111/{{friend.name}}.png" alt="" />
</a>
<p class="text-center">{{friend.name}}</p>
</div>
</div>
</div>
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
I have 4 divs, aligning in a straight line in fullscreen mode.
When the screen is smaller, they get responsive.
But there is a small problem: if one of the divs has a bit more weight then the others, the responsiveness isn't that beautiful.
In fullscreen:
When screen gets smaller:
How it should be:
HTML:
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightskyblue">
<img src="../images/9.png" alt=""/>
</div>
TEXT
<div class="blue_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightgreen">
<img src="../images/12.png" alt=""/>
</div>
TEXT
<div class="green_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle cornflowerblue">
<img src="../images/14.png" alt=""/>
</div>
TEXT
<div class="cornflowerblue_bottom_border"></div>
</div>
EDIT: Putting <div class="clearfix visible-sm-block"></div> after the 2 divs worked.
When using ng-repeat, use this code I wrote:
`<div class="clearfix visible-XX-block" ng-if="$index%2==1"></div><!--For col-XX-6 class-->
<div class="clearfix visible-XX-block" ng-if="$index%3==2"></div><!--For col-XX-4 class-->
<div class="clearfix visible-XX-block" ng-if="$index%4==3"></div><!--For col-XX-3 class-->
<div class="clearfix visible-XX-block" ng-if="$index%6==5"></div><!--For col-XX-2 class-->`
Take a look at responsive column resets.
See: http://getbootstrap.com/css/#grid-responsive-resets
In your case you can add the following code after the second column:
<div class="clearfix visible-sm-block"></div>
So your code looks like this:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightskyblue">
<img src="../images/9.png" alt=""/>
</div>
TEXT
<div class="blue_bottom_border"></div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightgreen">
<img src="../images/12.png" alt=""/>
</div>
TEXT
<div class="green_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle cornflowerblue">
<img src="../images/14.png" alt=""/>
</div>
TEXT
<div class="cornflowerblue_bottom_border"></div>
</div>
</div>
Note that this doesn't change the height of the columns but it fixes the clearing for the sm breakpoint.
You should try to set your divs to the same height then and add a scrollbar if their content is too big to fit in them.
So for example this should be:
<div class="col-xs-12 col-sm-6 col-md-3 box-container">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
And in css:
.box-container {
height: 100px;
overflow: auto;
}
Hope this helps!
You are missing the class=row divs. You have to understand that, on each device, your cols number must be equal to 12 in each row. Also notice that if you get more than 12, you will get this weird behavior.
So, in order to fix that, you need to do something like:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
In XS it is optional to use the clearflix, on there sizes clearflix is not optional. Your SM blocks count are 24. Make sure to create a clearflix after the count reaches 12 just for SM.
I'm trying to achieve the following in Bootstrap 3 using as little of my own markup and CSS as possible. Ideally I'd like to achieve this using pure Bootstrap Markup without resorting to hacks. I've looked at the documentation but can't see a standardized way....
As you can see below, I'm trying to get two rows with a gap in the center.
My Markup as follows
<section class="row">
<article class="col-sm-12 col-md-6">
<!--ROW LEFT-->
<div class="row">
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
</div>
</article>
<article class="col-sm-12 col-md-6">
<!--ROW RIGHT-->
<div class="row">
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
</div>
</article>
</section>
The only similar example Bootstrap has in the Docs is below, but you don't get a gap in the center.
BOOTSTRAPS MARKUP
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
content
</div>
<div class="col-sm-6">
content
</div>
</div>
</div>
</div>
To expand on Skelly's answer, you can use Bootstrap's column offset classes to create gaps between columns:
<div class="container"><section class="row">
<article class="col-sm-12 col-md-5">
<!--ROW LEFT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
</div>
</article>
<article class="col-sm-12 col-md-5 col-md-offset-2">
<!--ROW RIGHT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
</div>
</article>
</section></div>
http://bootply.com/103191
This prevents having to add extra styles but does create a larger gap as you're using two virtual columns to create the space.
If you don't mind the extra space on the right, you could make the offset 1 instead.
How big do you want the gap?
Using BS cols you could do something like this..
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-5">
content
</div>
<div class="col-sm-1"></div> <div class="col-sm-1"></div>
<div class="col-sm-5">
content
</div>
</div>
</div>
</div>
Demo: http://bootply.com/87117
(or) try to construct with padding:
<section class="row" style="background-color:red;">
<article class="col-sm-12 col-md-6" style="padding-right:30px;">
<!--ROW LEFT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
</div>
</article>
<article class="col-sm-12 col-md-6" style="padding-left:30px;">
<!--ROW RIGHT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
</div>
</article>
</section>
Your gap in red, see: http://bootply.com/87152