Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 4 responsive spacing (padding) not working

I want to give certain top-bottom padding of 80px and left-right padding of 0 inside my parent div id (about-us). So I've tried bootstrap 4 responsive spacing (padding) i.e. py-80 but it's not working here with me.

<div id="about-us" class="py-md-80">
  <div class="container text-center">
    <h3 class="display-5 text-capitalize">about us</h3>
    <p class="text-muted">Divide have don't man wherein air fourth. Own itself 
     make have night won't make. 
     A you under Seed appear which good give. Own give air without fowl move the 
     dry first 
    heaven fruit, dominion she'd won't very all.</p>
    <img src="./imgs/signature.jpg" alt="signarure" class="img-responsive">
  </div>
</div>
like image 544
Aisha Salman Avatar asked Jan 29 '26 13:01

Aisha Salman


1 Answers

Read the docs on how the spacing utility classes work: http://getbootstrap.com/docs/4.1/utilities/spacing/

There are no arbitrary px sizes such as 80. There sizes 0-5 and auto which respresent different rem units...

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - for classes that set the margin or padding to $spacer * .25
2 - for classes that set the margin or padding to $spacer * .5
3 - for classes that set the margin or padding to $spacer
4 - for classes that set the margin or padding to $spacer * 1.5
5 - for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto

Also see: How do I use the Spacing Utility Classes on Bootstrap 4

like image 98
Zim Avatar answered Jan 31 '26 04:01

Zim



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!