Padding for Bootstrap card on mobile devices

I'm having trouble adding padding to the right and left sides of the card in Bootstrap 4. Here is the code snippet:

 <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">How will you utilize the device?</h5>
                          <p class="card-text text-center">All-day workhorse or gaming machine?
                            Or just casual internet browsing?</p>
                        </div>
            
                        <div class="input-group pr-3 pl-3 pt-3 pb-5">
                            <select class="custom-select" id="inputGroupSelect04">
                              <option selected>Select...</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">Confirm</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </section>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Padding is controlled in BS4 through the following guidelines:

The formula {padding}{sides}-{size} specifies the padding, where

p - defines the padding

Sides can be any of the following:

t - sets padding-top

b - sets padding-bottom

l - sets padding-left

r - sets padding-right

x - sets both left and right padding

y - sets both top and bottom padding

blank - applies margin or padding to all 4 sides of the element

Size options include:

0 - sets padding to 0

1 - sets padding to .25rem (4px with a font-size of 16px)

2 - sets padding to .5rem (8px with a font-size of 16px)

3 - sets padding to 1rem (16px with a font-size of 16px)

4 - sets padding to 1.5rem (24px with a font-size of 16px)

5 - sets padding to 3rem (48px with a font-size of 16px)

auto - adjusts margin automatically

Consider using a class like .px-4

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

Or you can utilize the style attribute:

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

Answer №2

If we are talking about

<div class="card-body">

you can include the classes pl-5 and pr-5 to add 5px padding on the left and right sides.

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

The number "5" indicates the amount of pixels for padding, but you can adjust this value as needed.

Answer №3

It appears that you are looking to make the padding on phones responsive, meaning it only applies when viewing the website on a phone. This can be achieved by incorporating a basic media query into your styles.css file.

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

By setting the max width at 992px, the css will only take effect when the screen resolution is less than or equal to this value.

For further information on media queries, click here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensuring the scroll bar is consistently positioned at the bottom

I'm currently working on a chat application using Vue.js and I'm facing an issue with the scroll bar. Despite using overflow: auto; and customizing the scroll bar, it doesn't automatically scroll to the bottom whenever a new message is sent. ...

cssvue.jsvuetify.js

Creating a HTML element that functions as a text input using a div

I am encountering an issue with using a div as text input where the cursor flashes at the beginning of the string on a second attempt to edit the field. However, during the initial attempt, it does allow me to type from left to right. Another problem I am ...

htmlangulartypescript

Is there a way to obtain the ID of the submit button type?

I am wondering if it is possible to retrieve the value of a submit button's id without using JavaScript, as I need to insert these values into a MySql database. Below is the code snippet I have been working on: <form action="messages.php" method= ...

phphtmlsubmit

What is the best way to relocate an image or link using CSS?

I've been attempting to adjust the position of this image using CSS, but no matter how many times I try, it just refuses to budge. Can someone please help me troubleshoot what might be causing this issue? #yahoo1 { position: absolute; top: 100p ...

javascriptcss

Step-by-step Guide on Utilizing Bootstrap Table

Currently, I am in the process of fetching data from an API and displaying it in a tabular format using JavaScript. While I have successfully retrieved the data, I'm facing an issue with applying Bootstrap styling to the table headers. async functi ...

javascripthtmlcssbootstrap-5

Sorting MySQL query results based on a specific column determined by the value of another column

https://i.sstatic.net/ddoxT.png This code has been tested, but unfortunately, it is not functioning as expected. $select = $conn->query("SELECT * FROM tbl_testquestion ORDER BY SUBSTRING(type_id=0 qu_id RAND()), type_id=1 qu_id ASC"); Any suggestions ...

phphtmlmysqlrandomsequential

Execute JavaScript function when the page is being refreshed or accessed from an external link

On the Home page, we have a special Lottie animation that serves as a preloader. This animation should only display under certain conditions: Accessing the home page by clicking on a link from an external page (not on your website) Refreshing the brow ...

javascripthtmljquerycsslottie

Failure to Load HTML Script Files

After troubleshooting the loading of various .js and .css files, I found that some, like custom_javascript.js, load successfully while others, such as common-scripts.js, do not appear on the DOM of the HTML page. I experimented with rearranging the files, ...

javascripthtml

The function `canvas.toDataURL()` does not produce an image as output

When I expect the image to return mirrored, it instead shows up as a black image. <!DOCTYPE html> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <bo ...

javascripthtmlhtml5-canvas

Tips for having <script> update onchange instead of just onload

Is there a way to update the output of the <table id="mortgagetable"> each time a user changes the input values in the form? Currently, it only updates on load. Additionally, the content of the <div id="years" style="display:inline-block;">25 ...

javascriptjqueryhtml

Having trouble uploading images using ReactJS on the web platform

I am currently in the process of developing a portfolio website using react js, but I'm experiencing an issue where the image I intended to display is not showing up on the live site. Despite thoroughly checking my code, I can't seem to identify ...

javascripthtmlcssreactjs

The issue with open iconic bootsrap not functioning properly

I tried to combine open iconic with bootstrap, but the icons were not showing up on my web app. Even when I created a simple HTML file with just bootstrap and openiconic links, it still did not work. I remember this setup working on a different system. Pl ...

htmlcssbootstrap-4glyphicons

Tips for opening a variety of links in new tabs with unique popup buttons

Currently, I am facing a challenge where I need to use a button to trigger an ajax HTML popup and also navigate to a link simultaneously. The issue is that there are multiple buttons on the page, each needing to open different links. Any assistance would b ...

javascripthtmlajaxpopup

"Triggering an event when a checkbox in a list is clicked

How can I add an onclick event to a checkbox within an <li> element, as shown in the picture? Here is my JavaScript code so far: It's not working. $(document).ready(function() { allFiles() /*----------------------------------------------- ...

javascripthtmlonclick

What is the syntax for implementing conditional statements within the style jsx of Next.js?

Recently, I've been exploring the use of <style jsx> in my Next.js project and encountered a scenario where I needed to style an element based on a conditional statement. Additionally, my project relies on tailwindCSS for styling: <div classN ...

cssnext.jsstyled-jsx

Next.js threw a wrench in my plans when the HTML syntax was completely disrupted upon saving the index.js

I have encountered an issue in my VSCode environment while working on a next.js project. Whenever I attempt to save the index.js file, the HTML syntax crashes. I am at a loss on how to resolve this issue, so any assistance would be greatly appreciated. Tha ...

javascripthtmlvisual-studio-codenext.jssyntax-error

Why is the event handler producing no value?

Imagine if I tried to attach a jQuery click event handler to one of the functions in my objects, but for some reason it keeps returning undefined on my properties. Why is this happening? var buttonView = { label : 'underscore', ...

javascripthtmljquerydomjquery-events

Bring to the front the div altered by a CSS3 animation

Recently, I encountered an issue with a div card that triggers an animation when clicked. The animation involves the card scaling up larger, but the problem arises as its edges get hidden under other cards. To visualize this, take a look at the screenshot ...

javascriptjqueryhtmlcss

A guide to troubleshooting the "Missing Font" error caused by a Chrome Extension in Google Chrome

Summary: Can I see the list of fonts available on a website using Chrome? As a Chrome OS user, I am unable to install custom fonts on my system. To overcome this limitation, I developed a Chrome extension that adds the fonts I desire to web pages: &quo ...

cssgoogle-chromegoogle-chrome-extensionfonts

Placing a Label Next to an Input Field using Bootstrap 4

Is there a way to position the label right next to the input form? I've attempted different methods without success. Could you please review my code below? <div class="modal-body"> <form class="form-horizontal"> <div cl ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-form