I have done some digging on SO and have found a a variety of resources regarding printing and bootstrap.css, but I have not seen a solution to this particular problem.
Lets say I have a setup like seen in this Plnkr: http://plnkr.co/edit/7ETXQyEvY7S16JTU9wYB?p=preview
and HTML like this:
<div class="col-xs-6 red">
testing
</div>
<div class="col-xs-6 blue hidden">
123
</div>
The CSS states that during printing the column will be hidden (on my real page the stle is not hidden but hidden-print), which is expected, but is there anyway to now have the col-xs-6 red now take up the empty space left by the hidden blue column.
I know you could override the style col-xs-6 to be width:100%, but that would affect other columns on the page that need to be left at width: 50%.
Has anyone had this problem before, if so how did you address it?
For Bootstrap 4 you need to do a modification from #Lance's answer.
#media print {
.col-print-12 {
max-width: 100%;
flex: 0 0 100%;
}
}
With the same HTML
<div class="col-xs-6 col-print-12 bg-danger">
Red Column is full width for print
</div>
<div class="col-xs-6 hidden-print bg-primary">
Blue Column is hidden for print
</div>
I suggest something like:
#media print {
.col-print-12{
width:100% !important;
}
}
Then your HTML can be:
<div class="col-xs-6 col-print-12 bg-danger">
Red Column is full width for print
</div>
<div class="col-xs-6 hidden-print bg-primary">
Blue Column is hidden for print
</div>
!important is needed to override the regular col widths since at least one set will also apply at print width.
I updated your plunk using xs as a proxy for the print view here to demonstrate the concept. One red column in mobile, Red and Blue columns in tablet or bigger.
Edit: if you want to do it with CSS only you would have to use the flex property. Take a look at this pen. Change display: flex to display: none on any column and see how they stretch to fit the available space (this renders bootstrap useless).
Create a div container inside the bootstrap column and apply visibility: hidden to it. You want to hide without removing it, meaning the browser will still show the space that the element occupies.
It's a good practice not to add your own classes to bootstrap columns but instead create a container inside it so you can apply your classes to.
display: none gets rid of the element entirely and affects the positioning of the other elements that were around it.
Related
one take col-md-4, second col-md-8, but the second with a picture is not 100% width, there are gaps on the left and right sides, could anyone please advise how to remove gaps and make image full size ? Thanks. Here is screenshot
.upperDiv{
height: 100px;
width: 100%;
background: red;
margin-top: 20px;
margin-bottom: 20px;
}
.fixed-content {
width: 100%;
height: 100px;
object-fit: cover;
}
<div class="container">
<div class="row upperDiv">
<div class="col-md-4" style="background: #005AA1;">
</div>
<div class="col-md-8">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Bootstrap put that padding for you to better align your content, you can remove it by inserting p-0 (padding = 0px) class name as I remember
<div class="container">
<div class="row upperDiv">
<div class="col-md-4 p-0" style="background: #005AA1;">
</div>
<div class="col-md-8 p-0">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Looking at your HTML, you are using bootstrap's grid system (hinted by the col-md-X classes). The gap you see in your example is caused by the padding applied to the cells of the grid system to create the gutter.
You have two possibilities:
You put the picture as a background instead, since padding is part of the element, the picture will cover this space too.
You remove the gutter.
1 is pretty self explanatory so I'll go straight to two. You can read about the .no-gutter helper class. It needs to be applied to a row and will effectively remove all gutters for the columns in it. But that means you'll loose the gutter on your left column too. You could also remove the padding with a custom class that sets padding-left:0 !important;padding-right:0 !important; This will effectively remove the gutter for the specified column element.
Whatever the option you choose, remember that cols are not meant to be used directly for the styling. They are here to help you create columns in which to put your visual elements. Although I pointed 3 different approaches to your problem, the only "pure" solution is to use the .no-gutter. Others might have weird visual impacts such as making the gutter effectively only half wide (since the left col participates in half the gutter too) and will not look right if there are other columns near it.
I can't figure out how to make the grids to extend to the container's full width no matter how many columns there are
<div class="container">
<div class="row">
<div class="col-md-2 first"></div>
<div class="col-md-9 second"></div>
</div>
</div>
In the example above are displayed 2 columns inline and the .row having full width.Yet if i remove the first div(keeping the exact same code), the second div will change its position to left and will keep the original width.I need it to stretch to the full width of the container.The reason i need this is because i'll have some php conditional expression that will prevent it from showing,in which case i want the template to change and the second div to be full width and position on the middle.
I found an answer with the following CSS which indeed worked but it also messed the responsive structure and i'll have to patch it up till no end probably:
CSS:
.row{
display: table;
width: 100%;
}
.first, .second{
display: table-cell;
float: none;
}
.second{
width: 100%;
}
Since i'm a newbie with Bootstrap, i was wondering if there is any built in class which solves this problem? Thank you
In this case, just have the first div as col-2 and the second one as col.
col will be 100% width if col-2 is missing, but if it is there, col will fill the remaining columns.
Check out the Grid system documentation.
I'm not sure why you're using display:table. Just use Bootstrap 4 auto-layout grid, and the second will fill the width if the first is missing/hidden.
"Auto-layout for flexbox grid columns also means you can set the width
of one column and have the sibling columns automatically resize around
it."
https://www.codeply.com/go/igkSq57Vwn
<div class="row">
<div class="col-md-2 first"></div>
<div class="col-md second"></div>
</div>
i have same problem . and you can fix it by set (margin : 0px) for row (by style attribute or id in css file) and set (padding : 0px) for col (by style attribute or id in css file)
I am attempting to create a pattern of two divs, side by side, repeating vertically. One side is to contain an image (which I've done using CSS background image) and the other text. The side which contains the image alternates each row.
The divs use the Bootstrap grid's col-sm-6 class. It looks great on desktop but I'm having trouble getting it to look good on smaller devices.
The issue is that because of the order in which the code is written, when it collapses down to 100% width on mobile it goes:
image
text
text
image
image
text
instead of:
image
text
image
text
image
text
The only workaround I've thought of so far is to have two of each image div, one before and one after the text div, and to hide or display them based on the size of the screen. Not a great solution though. Any thoughts?
put your content like following
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
This will give you what you want
In the end I put them all in the same order and then went with this:
.campaign-idea:nth-child(odd) {
.image {
float: right;
}
}
For some reason I cannot add margin between grid items
Page with margin issue
This page margin shows perfectly:
Proper page
I suspect it has to do with CSS, I tried everything but nothing seemed to work. Can someone please help?
What you need to do is move your .grid class styling to a new parent element inside your grid column, the column itself takes up a full 25% of the width of the page and has internal padding to create the illusion of margin.
<div class="grid col-sm-3 col-xs-6">
to
<div class="col-sm-3 col-xs-6">
<div class="grid">
You can see a quick example of this by moving your .grid class to the .description child element, the styling goes a bit wacky but you will be able to see the margins between your columns.
I have a fiddle here which shows my issue. You may need to make the 'result' quadrant wider to show the issue.
I have a couple of columns in my bootstrap layout but I can't seem to get my button to layout inside the parent div, it always seems to overlap it:
At first I thought it was due to the padding of the columns in bootstrap but I have removed that and the problem persists. I'm obviously missing something fundamental about how this is supposed to work, so any pointers to some help with css might not go amiss either.
apparently I have to link to some code to include a link to a fiddle so here is some:
My html is:
<div class="col-md-3 col-lg-3 nopadding">
<div class="definition-pallette">
<div class="row nopadding">
<div class="col nopadding"><button data-bind="click: showStepModal">+ Step</button></div>
</div>
</div>
</div>
and the additional css on top of the bootstrap default is:
.nopadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
Seems to be a few things going on here. The main issue is you are using a lot of divs with a class of 'col' inside your 'row' divs. To get them to start behaving you need to define what size the col is. This fixes most of your problems. So for example, where you have this
<div class="row">
<div class="col">Some content</div>
</div>
Change that to something like
<div class="row">
<div class="col-xs-12">Some content</div>
</div>
And it starts behaving.
I also got rid of your .nopadding class as you don't need that.
Here is an updated fiddle - http://jsfiddle.net/T4XY4/1/ - it fixes most of the things in the right panel, but I'll leave the rest to you. You may want to choose which classes you actually want inside your 'row' divs, I just chucked in xs-12 for simplicity.
Edit
The Bootstrap docs confirms that if you are nesting columns you need proper col-* classes - http://getbootstrap.com/css/#grid-nesting
Its caused by bootstraps margins in the row class adding margin:0; to your no padding class will fix this but might cause layout issues in other places or on mobile devices.
.row {
margin-right: -15px;
margin-left: -15px;
}