Menu
Let's say we've created a row into bootstrap and then added two columns, one for the blog content, on the left side (col-sm-7) and another one for the sidebar (col-sm-5), on the right side.
is there a way to make the content in col-sm-7 expands to col-sm-12 when the height of col-sm-5 is less than the height of col-sm-7 (or in other words: when there's no content on the sidebar?: let's say a user adds only one widget. The problem is, the sidebar will occupy all the right side, which is not good looking.)
Here's an image to show what I mean:
682
In general you want to search for an existing column width (say col-sm-3 ) and copy over all the styles that apply to it, including generic ones, over to your custom stylesheet where you define new column widths. Save this answer.
Add . w-auto class to the table element to set an auto width to the table column. The width of the columns will automatically adjust to the content of the column.
To add space between columns in Bootstrap use gutter classes. With gutters you can add horizontal or vertical space or even specify how big space should be on different screen size.
col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint). You can use predefined grid classes (like . col-4 ) or Sass mixins for more semantic markup.
As mentioned, there's no way to do this with the standard Bootstrap grid. However, with a few CSS tweaks it's possible, by adhering to these "rules"..
Put the sidebar first, and float it right..
<div class="col-sm-5 pull-right">
..
</div>
Make the col-sm-7 width:auto, and un-float it..
.float-none {
float: none;
width: auto;
}
Finally, any child DIV's inside the col-sm-7 need to be overflow: auto...
Demo: http://codeply.com/go/njEg31ZG33
AFAIK, flexbox would not work well for this.
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
