CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
james
james

Reputation: 519

Making Bootstrap column padding different for different screen sizes

Is there a way to make bootstrap column padding or margins different for columns depending on which screen size?

I have columns like this 

<div class="col-sm-4 col-xs-12">...</div>
<div class="col-sm-8 col-xs-12">...</div>

I want to have different padding at each screen size especially at the smallest screen size. Is this possible?

Can someone give an example?

Upvotes: 2

Views: 3575

Answers (3)

nydame
nydame

Reputation: 351

Bootstrap uses the following variables to define padding:

  • padding-base-vertical
  • padding-base-horizontal
  • padding-large-vertical:
  • padding-large-horizontal
  • padding-small-vertical
  • padding-small-horizontal
  • padding-xs-vertical
  • padding-xs-horizontal

Let's use padding-base-vertical as an example. If you are using Less, then do something like this in your main stylesheet:

// import bootstrap.less into your stylesheet
@import vendor/bootstrap.less
// set padding and other styles
body {
  color: #444;
  @padding-base-vertical: 10px;
  @media all and (min-width: 768px) {
    @padding-base-vertical: 15px;
  }
}

If you are using Sass, the approach is a little different, and easier. Look for the _variables.scss file and find $padding-base-vertical etc. Edit as desired.

Upvotes: 2

shihao316558512
shihao316558512

Reputation: 56

.test-div{ padding:20px}
@media (max-width:767px){
  .test-div{ padding:30px}
}
<div class="col-sm-4 col-xs-12 test-div">...</div>
<div class="col-sm-8 col-xs-12">...</div>

such as,you can write your own code

Upvotes: 1

Jon Mateo
Jon Mateo

Reputation: 384

you may use @media(){} that you may used to make paddings and columns depending on the size of the screen and you might want to use also !important to override the default col-sm/xs margin and padding.

Upvotes: 0

Related Questions