Guide to customizing margins at specific breakpoints in Bootstrap 4 without using javascript

Question

Guide to customizing margins at specific breakpoints in Bootstrap 4 without using javascript

Despite exploring numerous solutions and trying them out, I have yet to achieve the desired results.

I am looking to customize margins for various breakpoints in Bootstrap. For example:

The issue may be related to defined widths as well, but I'm struggling to ensure consistent margin appearance across different screen sizes.

This is my current code:

.container {
  max-width: 25rem;
  text-align: center;
  padding: 0rem;
  margin: 1rem 0.4rem;
}

.table.table.table-borderless {
  margin-bottom: 0rem;
}

.table.table.table-borderless td,
.table.table-dark.table-borderless td {
  padding: 0rem;
}

table.statistic-employment,
table.statistic-requirement {
  width: 24.8rem;
}

.statistic-requirement {
  height: 10 rem;
}

.col-12.col-md-6.col-xl-4 {
  padding: 0rem 0rem;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


    <!-- Your HTML content goes here -->

html css bootstrap-4 responsive-design

Answer 1

Answer №1

Make sure to utilize @media only screen and (min-width: ) in order to customize styles for different screen sizes.

Here's a sample code snippet:

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
   .container {
       margin: 1 rem;
   }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .container {
       margin: 2 rem;
   }
}

I hope this explanation clarifies things for you!

Answer 2

Make sure to utilize @media only screen and (min-width: ) in order to customize styles for different screen sizes.

Here's a sample code snippet:

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
   .container {
       margin: 1 rem;
   }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .container {
       margin: 2 rem;
   }
}

I hope this explanation clarifies things for you!

Answer 3

Answer №2

This response utilizes the margin class from Bootstrap

<div class="container my-md-3 mx-md-2 my-lg-5 mx-lg-4">

</div>

my-md-3 signifies that on screens >= 768px, there is a 1rem margin at the top and bottom

mx-md-2 indicates that on screens >= 768px, there is a .5rem margin on the right and left

my-lg-5 denotes that on screens >= 992px, there is a 3rem margin at the top and bottom

my-lg-4 shows that on screens >= 992px, there is a 1.5rem margin on the right and left

For more information, please refer to https://getbootstrap.com/docs/4.4/utilities/spacing/

Answer 4

This response utilizes the margin class from Bootstrap

<div class="container my-md-3 mx-md-2 my-lg-5 mx-lg-4">

</div>

my-md-3 signifies that on screens >= 768px, there is a 1rem margin at the top and bottom

mx-md-2 indicates that on screens >= 768px, there is a .5rem margin on the right and left

my-lg-5 denotes that on screens >= 992px, there is a 3rem margin at the top and bottom

my-lg-4 shows that on screens >= 992px, there is a 1.5rem margin on the right and left

For more information, please refer to https://getbootstrap.com/docs/4.4/utilities/spacing/

Guide to customizing margins at specific breakpoints in Bootstrap 4 without using javascript

Answer №1

Answer №2

Similar questions

What is preventing this DIV from stretching to the full width of its children?

Create a left-aligned div that spans the entire width of the screen, adjusting its width based on the screen size and positioning it slightly

Identify whether the page is being accessed through the Samsung stock browser or as an independent web application

"Despite having an updated browscap.ini file defined in php.ini, the function Get_browser is still returning unexpected

Create a stylish progress bar using CSS arrows

Purchase Now with Paypal Button

Utilize Javascript to conceal images

What is the process for displaying a PHP array in HTML5 audio and video players?

Getting text between Span tags using Selenium in Python

Displaying JSON information in an HTML table with JavaScript

Each column has its own scroll bar, making use of 100% of the available space within a container that is 100%

Creating a function for loading dynamic content in XSLT can be achieved by following these steps

Excess padding in Internet Explorer 7 when a table is nested within a div tag

Preserving input data based on click and change events

VS code is showing the directory listing instead of serving the HTML file

Equal height images using Bootstrap 4

Struggling to display a function's output on a separate web page within a flask application

elements that do not adhere to set width constraints

Is it possible for Penthouse to retrieve critical CSS while using javascript?

Utilizing Flask to gather information from a leaflet map