Bootstrap card padding on phone

user_12440263 0
Viewed 1351

I need to add padding to right side and left side of the card in bootstrap but I am not able to do it. Here is the code: (Bootstrap 4)

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <section class="question-section">
            <div class="container">
                <div class="row padding-xs">
                    <div class="card shadow-lg rounded-lg" style="width: 30rem;">
                        <div class="pt-3">
                            <img class="card-img-top" src="question.svg" alt="Card image cap" height="128px" width="128px">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title text-center">Jak budete zařízení využívat?</h5>
                          <p class="card-text text-center">Celodenní pracant nebo herní mašina?
                            Nebo jen nenáročné prohlížení internetu?</p>
                        </div>
            
                        <div class="input-group pr-3 pl-3 pt-3 pb-5">
                            <select class="custom-select" id="inputGroupSelect04">
                              <option selected>Vyberte...</option>
                              <option value="1">One</option>
                              <option value="2">Two</option>
                              <option value="3">Three</option>
                            </select>
                            <div class="input-group-append">
                              <button class="btn btn-outline-dark text-dark" type="button">Potvrdit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </section>

bootstrap-4 twitter-bootstrap css html
3 Answers

Padding in BS4 regulate by following rules:

Formula {padding}{sides}-{size}, where

p - sets padding

Where sides is one of:

t - sets padding-top

b - sets padding-bottom

l - sets padding-left

r - sets padding-right

x - sets both padding-left and padding-right

y - sets both padding-top and padding-bottom

blank - sets a margin or padding on all 4 sides of the element

Where size is one of:

0 - sets padding to 0

1 - sets padding to .25rem (4px if font-size is 16px)

2 - sets padding to .5rem (8px if font-size is 16px)

3 - sets padding to 1rem (16px if font-size is 16px)

4 - sets padding to 1.5rem (24px if font-size is 16px)

5 - sets padding to 3rem (48px if font-size is 16px)

auto - sets margin to auto

Try to use class like .px-4

<div class="row px-4" style="padding: 0 10px 0 10px;">

Ore you can use style attribute like

<div class="row padding-xs" style="padding: 0 10px 0 10px;">
user_31871270

Assuming you are referring to

<div class="card-body">

add classes pl-5 and pr-5 for left and right 5px padding.

<div class="card-body pl-5 pr-5">

The "5" represents the number of pixels to pad. You can change that number as you see fit.

https://mdbootstrap.com/snippets/jquery/mdbootstrap/880217

user_88015990

Your title says you are adding this padding to phones, if I understand you correctly you want the padding to be responsive so as to only apply when the website is viewed on phones. You can do this by adding a very simple media query to your styles.css.

@media screen and (max-width: 992px) {
  .card { padding: 0px 50px 0px; }
}

The max width states that whenever the screen resolution is 992px or less run the following css.

read more about media queries here.

user_51655300
Related