Trouble using Bootstrap 4 d-flex and d-none class together-CodePudding

I want to hide a whole <div> when adding d-none class using jQuery function. But here .d-none class not working with .d-flex class.

Before Code

<div > </div>

After Code

<div > </div>

I have referred Bootstrap CSS too and found both class use !important rule.

I have found an article that says it won't be overridden.

CodePudding user response：

CSS works on a "last declared takes precedence" system.

In the bootstrap.css these are defined in this order:

.d-none { ... .d-flex { ...

so the second takes precedence (given all else is equal, such as the !important and using the display: property).

Note: the order they appear in the element's class list is not relevant, it's the order they are defined in the .css file.

Seen here using bootstrap 4.6, d-flex's display: overrides d-none's

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<div id='div' class='d-flex d-none'>
example
</div>

The trick is to redefine d-none after d-flex:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<style>
.d-none { display:none !important; }
</style>

<div id='div' class='d-flex d-none'>
example
</div>

This could be done by editing bootstrap.css, but that's generally not recommended.

You would normally add a d-none definition to your site.css and include site.css after all the other css's - it's in a <style> tag above as the SO snippets put the css block before the html, so would not override it.

CodePudding user response：

I have created one solution too for using jQuery function

var class_name = "gatewayBtn";

$('.' class_name).toggleClass('d-flex').toggleClass('d-none');

I am removing .d-flex class before add .d-none class.

The reason is d-flex class will adjust the column according to the row, but here I want to hide the <div> and d-flex class is only required when want show content of <div> , so d-flex class removing before add d-none class.