CODEWITHSUNDEEP
csshtmltwitter-bootstrapsass
Coulter Peterson
Coulter Peterson

Reputation: 101

How to override SASS spacing in Bootstrap 4

Because Bootstrap 4 uses SASS for components like cards, I'm having trouble overriding it in CSS since I haven't used SASS before.

I see ways to override configuration files in a server node.js environment, but for a basic index.html file linked to Bootstrap and a custom CSS file, how do you go about setting margin bottom to 0?

HTML here:

    <div class="card mb-3" id="sheet-footer">
      <div class="card-header text-center">`=
        <h3 class="card-title">
          Content

        </h3>
      </div>
    </div>

Chrome dev tools show the following:

   .mb-3, .my-3 {
     margin-bottom: 1rem!important;
   }

Any attempts to override margin-bottom (even with the terrible HTML style tag) don't beat this rule - what's the proper way to override this?

Thanks in advance.

Upvotes: 0

Views: 2182

Answers (1)

Luke Thompson
Luke Thompson

Reputation: 406

If you don't want a margin bottom remove the class mb-3

If you only want a margin bottom on specific breakpoints bootstrap 4 allows mb-md-3

see https://getbootstrap.com/docs/4.0/utilities/spacing/

Upvotes: 3

Related Questions