How to make an element ignore a css Bootstrap class?

Question

Is there any way I can make jumbotron class ignore the container class, from Bootstrap 4?

I'm using MVC pattern in a PHP project, and I'm including the header on every page witch ends with <main class="container">, but for the home page I have a jumbotron that I want to display fully horizontally. Since the template for the home page generates after the main tag, the jumbotron is limited to the container's width.

What I've tried is the :not() selector, but it doesn't work.

.container:not(.jumbotron) {

}

Any suggestion would be much appreciated. Thank you in advance!

Probably better to create a condition to check whether the home page is being loaded and to add the content without the `.container` class if it is. — UncaughtTypeError, Jan 04 '18 at 13:59
I think you will need to go through each parent's style, and override. I would recommend finding a way to make that child added to another parent without that css class. You can see more in https://stackoverflow.com/questions/5080365/css-to-prevent-child-element-from-inheriting-parent-styles — orabis, Jan 04 '18 at 14:00

score 2 · Accepted Answer · answered Jan 04 '18 at 14:11

2

Go wherever the container class is added put a condition: if you're on the homepage, replace container with container-fluid.

Please note you're supposed to wrap the rest of your content (what's after .jumbotron) inside a <div class="container">...</div> if you want that content to look like the rest of your website.

You can do this dynamically, using JavaScript/jQuery after the page was loaded, but special care must be taken to limit or hide any FOUC effect (content reflow).

answered Jan 04 '18 at 14:11

tao

82,996
16
114
150

Thank you @Andrei. Here is my solution: `= ($_SERVER['REQUEST_URI'] == '/desprePisici/public/') ? '
' : "
"; ?>` I've also added the `
...
` after the jumbotron. If you think I can improve this code, please let me know. I'm still learning. Thanks again!
– ladybug Jan 04 '18 at 14:49
1

@Dianne, it is perfectly valid code. I'm a freak about code length so I would have probably added the condition to the class names rather than entire tag, but what you did is good as well. Happy coding! – tao Jan 04 '18 at 15:05

score 0 · Answer 2 · answered Jan 04 '18 at 14:10

A way of doing this is with jQuery's insertBefore() method.

var html = '<div class="jumbotron"><h1>Hello World</h1><p>I\'m the mighty jumbotron</p></div>';

var target = $('.container');

$(html).insertBefore(target);

body {
border:1px solid green;
text-align:center;
}
main.container {
border:1px solid red;
width:300px;
height:200px;
margin:0 auto;
display:block;
}

.jumbotron {
  width:100%;
  display:block;
  border:2px solid blue;
  height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Green is the body</p>
<main class="container">
<h3>The main .container div</h3>
</main>

score 0 · Answer 3 · answered Jan 04 '18 at 14:10

One of the possible way I can suggest is to divide your homepage, for example, firstly place your jumbotron in <table> tag in whatever way you want beneath that <table> tag place your <main class = "container"> and continue with your web stuff in it. Best Luck!

How to make an element ignore a css Bootstrap class?

3 Answers3