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

Question

I defined

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

And I have an element (HAML)

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

However it shows that the .p-3 class overrides the .py-md-6 class.

I tried to put the .py-md-6 before the .p-3 but it didn't work. I tried to use .p-sm-3 instead but it's defined with @media (min-width: 576px) and still overrides the .py-md-6.

I want small padding on mobile (because there's not a lot of screen space), and I want large padding on desktop.

I tried one of the answers which works in CodePly, but it's not working locally.

try writing inline style for the element using style property. I think inline styles get max priority . — Vidiya Prasanth Pappannan, Aug 04 '17 at 21:24
@VidiyaPrasanth That doesn't seem to work. `
`. It doesn't show the element style in the inspector. It doesn't seem possible to use a media query for inline styles. https://stackoverflow.com/questions/13023157/use-media-query-inline-style#13023210 — Chloe, Aug 08 '17 at 16:49

Jens Alenius · Answer 1 · 2017-08-10T10:04:37.863

0

Check out @media screen. Bootstrap uses it. I think you could change all grid padding to 6 except for the mobile screen. Or a singel Class IF It suites your case better

I use sass to precompile the style, but this can be done the old fashion way aswell. 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 yo want it to be general? for all grid columns? Then you should not define your own class, becasue you dont want to add it over and over again.

Then you should realy look into Sass. I use webpack2 to precompile it

edited Aug 10 '17 at 10:04

answered Aug 04 '17 at 21:40

Jens Alenius

1,931
2
16
20

That didn't seem to work. Check updated question with screen shot. – Chloe Aug 08 '17 at 16:43
Updating the main answer – Jens Alenius Aug 10 '17 at 09:21

score 0 · Answer 2 · answered Aug 05 '17 at 11:57

0

You should wrap the padding class in a breakpoint just like the padding utils do..

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

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

answered Aug 05 '17 at 11:57

Carol Skelly

351,302
90
710
624

For some reason that didn't work. See screenshot in updated question. – Chloe Aug 08 '17 at 16:42
Basically it's a duplicate of https://stackoverflow.com/questions/44025566/bootstrap-4-spacing-bug/44025627#44025627 – Carol Skelly Aug 08 '17 at 17:03

score 0 · Accepted Answer · answered Aug 08 '17 at 17:41

Based on the comment from @ZimSystem, I re-arranged the link tags in my app so that Bootstrap comes first and my application.css comes after. 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"}/

To

%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 will override the earlier Bootstrap definitions. And now it works.

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

3 Answers3