Clever Geek Handbook

How do I make .py-md-6 override .p-3 in Bootstrap 4?

I have identified

.py-md-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;  
}

And I have an element (HAML)

#id.p-3.py-md-6

However, this shows that the class is .p-3

overriding the class .py-md-6

.

I tried to put .py-md-6

before .p-3

, but it didn't work. I tried using it .p-sm-3

instead, but it's defined with @media (min-width: 576px)

and still overrides .py-md-6

.

I need a little padding on mobile (because there isn't much screen space) and I want a big addition on your desktop.

I tried one of the answers that works in CodePly, but it doesn't work locally.

enter image description here

+3


source to share


3 answers


Based on the comment from @ZimSystem, I re-placed the tags link

in my application so that Bootstrap loads first and then appears after that application.css

. From

= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' 
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
%link{:crossorigin => "anonymous", :href => "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css", :integrity => "sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ", :rel => "stylesheet"}/

For



%link{:crossorigin => "anonymous", :href => "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css", :integrity => "sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ", :rel => "stylesheet"}/
= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'

Then my app definitions override the earlier Bootstrap definitions. And now it works.

0


source


The @media screen will open. Bootstrap uses it. I think you could change the entire grid pad to 6 except for the mobile screen. Or single-class IF. It suits your business better.

I use sass to precompile the style, but this can also be done the old way. In your own stylesheet:

my-padding-class{
padding-top: 6rem;
padding-bottom: 6rem;
}
/*Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) {
    my-padding-class{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}


BUT! Do you want it to be shared? for all grid columns? Then you don't have to define your own class, because you don't want to add it over and over again.

Then you should really take a look at Sass. I am using webpack2 to precompile it

0


source


You must wrap the padding class in a breakpoint like padding utilities do.

@media (min-width: 768px) {
    .py-md-6 {
      padding-top: 6rem !important;
      padding-bottom: 6rem !important;  
    }
}

https://www.codeply.com/go/MOw2FO7Rmw

0


source






More articles:


All Articles