What is the best way to increase padding beyond p-5 for specific screen sizes?

I need help creating a webpage that is responsive in design.

Below is a snippet of the specific section I am working on:

<div class="container-fluid">
    <div class="row p-3 p-lg-5">
        <div class="col">
            Some text
        </div>
        <div class="col">
            More text
        </div>
    </div>
</div>

My challenge is to set the padding of the row to be 3 on mobile devices and 20% on desktop devices. I also need the maximum width of the row to be 70% on desktop and 100% on mobile.

How can I achieve this using bootstrap-5?

Answer №1

If you're looking for the solution, head over to the official Bootstrap page where you can find it: Bootstrap Spacing Classes

The naming convention for the classes follows this pattern: {property}{sides}-{size} for xs, and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

The properties include:

m - for margin classes p - for padding classes The sides include:

t - for margin-top or padding-top b - for margin-bottom or padding-bottom s - (start) for margin-left or padding-left in LTR, margin-right or padding-right in RTL e - (end) for margin-right or padding-right in LTR, margin-left or padding-left in RTL x - for both left and right margins or paddings y - for both top and bottom margins or paddings blank - for setting margin or padding on all 4 sides The sizes include:

0 - to eliminate margin or padding 1 - sets margin or padding to $spacer * .25 by default 2 - sets margin or padding to $spacer * .5 by default 3 - sets margin or padding to $spacer by default 4 - sets margin or padding to $spacer * 1.5 by default 5 - sets margin or padding to $spacer * 3 by default auto - sets margin to auto

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

Unable to configure AngularJS inputs to have a blank default value

I am facing a peculiar issue where I am unable to initialize my input fields as blank/empty. Even after clearing the cache and performing a hard reload, Google Chrome seems to be auto-populating them with older cached values. Here is the current view: ht ...

I'm attempting to create a button using html, but I'm puzzled as to why it's not functioning as expected

I've been working on creating a button that, when pressed, generates a new div string based on the node.innerHTML code. For some reason, my code doesn't seem to be functioning properly and I'm not sure why. Here's the HTML: <input ...

When selecting an option in the burger menu, the dropdown does not react properly

I am facing an issue with the burger menu where one of the options should trigger a dropdown, but the content is not adjusting properly. The dropdown menu should push the other content downward, but currently, it overlaps. I have included the code for th ...

The view of the Google map is filled with numerous rounded tiles

Map divided into 3x3 tiles I am looking to customize the appearance of my map and remove all spaces and rounded corners to create a seamless, undivided visual. Is there a way to modify a map tile attribute to achieve this effect? Below is the code snippet ...

What steps can I take to stop the window/body from scrolling "through" a modal div?

Let me simplify my layout for you: <body> [... lots of content ...] <div id="modal-overlay"> </div> </body> The body has so much content that the whole page scrolls. The styling for #modal-overlay looks like this: #m ...

Presenting JSON data in a table format on-the-fly even without prior knowledge of the data's structure or field names

When working with my application, I will be receiving data in JSON format and I am looking to showcase this data in a tabular form within a web browser. It's important to mention that I won't know beforehand the structure or field names of the re ...

The click event in jQuery is being blocked by the use of "display:none

Currently, I have implemented a search box feature with search suggestions: <input id="searchBar" /> <div id="searchSuggestion"></div> The searchSuggestion div is dynamically updated using jQuery ajax whenever an input is entered (imple ...

What is the process for incorporating CSS, JavaScript, and images into a Django project?

Within the static folder, I have created a CSS file called resume.css with the following structure: static css resume.css In my settings.py file, I did not make any changes to the static code. I have referenced the index.html file in my vie ...

What is the method for condensing content using a Bootstrap toggle button (checkbox)?

Incorporating Bootstrap 5.1, I have a set of buttons that trigger the display or hide some content using the collapse plugin <div class="col m-2"> <button type="btn" class="btn btn-outline-primary m-1" d ...

Concealed Sub Menus Within a Vertical Navigation Bar

I've successfully created a Vertical Menu with hidden submenus, but I'm struggling to make the submenu appear on hover. Any suggestions on how to achieve this? Also, I'd like to align the text all the way to the left and remove the bullets f ...

What is causing these divs to shift apart instead of staying next to each other when the browser window is resized?

I am facing an issue with two of my divs not staying next to each other when resizing the browser window. They align perfectly when the window is wide, but as soon as I resize it to a narrower resolution, the right div moves below the left one: http://jsfi ...

Images displayed alongside webpage contents

I'm having trouble getting these photos to display in the same row. Any suggestions on what I should change? https://i.stack.imgur.com/EbvmR.png I've attempted using float left and other commands, but one picture continues to stay in the lower r ...

Bootstrap columns are still disrupted by large images even when they have reached their maximum width and height

I have been using bootstrap templates that allow users to create displays with images and text. I previously added max-width:100% and height:auto to the img CSS, thinking it would resolve issues with large images breaking the container. However, when inse ...

The .find() function conveniently jumps over the table directly following its parent element

After clicking on Inner Add Row, the correct row is added from the .charts-series table. However, when I click on Outer Add Row, a row from the .charts-series table is added instead of one from the .charts table. Here is the link to the example: http://jsf ...

Slider with FadeIn effect remains unresponsive to the FadeOut command (JQuery / Javascript)

I'm currently working on a slider that is supposed to fade in and out. However, I am facing an issue where the slide fades in correctly but instantly disappears instead of fading out. Do you have any insights into why this might be happening and any s ...

Ways to conceal an HTML element using CSS

I am working with two images, but I only want to display one at a time. When I hover over the image, I want it to change. .sidenav { height: 100%; /* 100% Full-height */ width: 100px; position: fixed; /* Stay in place */ z-index: 2; top: 0 ...

Tips for adding a gradient to your design instead of a plain solid color

I stumbled upon a snippet on CSS Tricks Attempting to replace the green color with a gradient value, but unfortunately, the value is not being applied. I have tried using both the fill property and gradient color, but neither has been successful. Here is ...

Deactivate hover effects and media queries for Material UI controls in all states

Since I am using a touch-capable monitor, I noticed that hover styles are not showing up on any controls. Specifically, when I hover over a Material UI button, I see the following styles: https://i.stack.imgur.com/uwBpt.png Is there a way to disable all ...

Text To Appear Gradually When Button Is Clicked

Is it possible to create a fading effect for text when a button is clicked? Currently, my code displays some text as block while hiding the rest with display:none. Take a look at my JavaScript code: <script> //Select button by id const btn1 ...

Position a dynamic <div> in the center of the screen

My goal is to design a gallery page with a list of thumbnails, where clicking on a thumbnail will open the related image in a popup div showing its full size. The issue I'm facing is how to center the popup div on the screen, especially when each pic ...