Overriding bootstrap rules

Question

I load my CSS in this order

<link href="bootstrap.min.css" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">

from bootstrap.css:

@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
    }
}

from print.css:

.modal-dialog {
    width: 100% !important;
}

But still in print preview the width is 600px!

Everything else is overridable, like paddings etc but not the width of this div.

Is it possible that some parent of `modal-dialog` is only 600px wide, so setting it to 100% has no effect? — Mark Polivchuk, Jun 02 '15 at 16:26
Can you post the JSfiddle of full code? I answered too early with a wrong code. — m4n0, Jun 02 '15 at 16:27
@MarkPolivchuk, no parent is 600px wide. In F12 developer tools when I uncheck this specific rule the container becomes 100%. — joakim, Jun 02 '15 at 16:28
Fyi, rather than use print preview, you can use the developer tools to emulate a print media type on the page. That way you can inspect elements, view css rules, etc just as you normally would, unlike in print preview. http://stackoverflow.com/a/21248168/1157054 — Ajedi32, Jun 02 '15 at 16:33
Are you certain your print.css stylesheet is getting applied at all? Unchecking the 600px rule in the developer tools would result in the element taking up 100% of the available width of its parent regardless of whether `print.css` is being loaded properly or not. (That's the default behavior of block elements.) — Ajedi32, Jun 02 '15 at 17:29

Kathy · Accepted Answer · 2015-06-02T17:00:39.303

0

The Bootstrap CSS is a media query, which is more specific than the print CSS you wrote. This specific media query styles elements to fit a tablet or larger screen - anything with a screen size larger than 768px. Because the parent element to a Bootstrap modal doesn't have an explicit width set, by setting your print CSS width to 100% you're telling the block element to use its default behavior, which is to take up the full width of its container. The width is explicitly set to 600px in the Bootstrap CSS, so that's what you'll need to override. In general, setting width: 100% for block elements is redundant, since that's their default behavior. Read more about CSS 100% widths here.

You can either write your own media query to override the Bootstrap default, or you can set a fixed width in pixels/ems whatever.

So, something like:

.modal-dialog {
    max-width: 500px; /* or whatever width you like */
}

Or:

@media (min-width: 768px) {
    .modal-dialog {
        width: 500px !important;
    }
}

edited Jun 02 '15 at 17:00

answered Jun 02 '15 at 16:29

Kathy

305
2
9

Shouldn't the !important qualifier override any specificity rules css has regarding which style to apply? – Ajedi32 Jun 02 '15 at 16:32
True, but in this case it doesn't have the expected result. In John's code above, the !important qualifier is setting the width to 100%, and 100% is 600px as set by the media query. In this case you need to use either a fixed width, or supply a min or max width in pixels. – Kathy Jun 02 '15 at 16:35
That's not how percentages work. Percentages mean "percent of parent", not "percent of whatever width was set by the last applicable css rule": https://jsfiddle.net/1sxgpuv7/1/ – Ajedi32 Jun 02 '15 at 16:40
That's true, but setting a width equal to 100% only forces the child element to take up 100% of the parent width if the parent has an explicit width. In this case, the element .modal-dialog doesn't have a parent with an explicit width, so setting the width to 100% isn't doing anything but reaffirming the explicit width set in the media query. You can read more about using percentages as widths [here](http://www.impressivewebs.com/width-100-percent-css/) – Kathy Jun 02 '15 at 16:51
Well, not exactly. It's true that percentages don't work when the parent doesn't have a definite length in that demension, but overriding an explicit value with a percentage still results in the percentage value being used, not the definite value: https://jsfiddle.net/1sxgpuv7/5/ – Ajedi32 Jun 02 '15 at 17:14
Better example, since it seems percentage values always work with widths (probably because the browser window has a definite width, but not a definite height): https://jsfiddle.net/1sxgpuv7/8/ – Ajedi32 Jun 02 '15 at 17:18
Agreed, but setting the width to 100% isn't going to have the behavior that John is expecting because of what we've been discussing. – Kathy Jun 02 '15 at 17:18

Overriding bootstrap rules

1 Answers1