Is it feasible to decrease the lateral margins of Bootstrap's container without the need for custom CSS? If so, what is the method?

My web page includes several screenshots to illustrate the issue I am facing. One of my challenges is the scroll bar below the table, which I find displeasing. In an attempt to resolve this, I decided to adjust the lateral margins slightly. Here's a summary of what I have tried so far:

  1. Specify margins manually. The result: loss of centering.
<div class="container m-2">

https://i.stack.imgur.com/9AkEn.png

  1. Using conainer-sm. The result: no margins at all.
<div class="container-sm">

https://i.stack.imgur.com/pKxH6.png

  1. Combine both methods. Result: difficult to describe, but odd.
<div class="container-sm m-2">

https://i.stack.imgur.com/mm3Yv.png

  1. Using mx. Result: lack of centering.
<div class = "container mx-4">

https://i.stack.imgur.com/v6KTM.png

I also consulted StackOverflow and Google for solutions on reducing the container's lateral margins without overriding Bootstrap's CSS with a custom stylesheet. Is creating a custom CSS for such minor adjustments excessive?

Lastest findings suggest the issue may be related to the container's max-width, where increasing it reduces the margins, along with the outer-most row. The dashed area defines the increased margin on the right side.

https://i.stack.imgur.com/1YLZw.png

It seems that utilizing mw-100 and justify-content-center could potentially resolve this matter. Only time will tell.

htmlcssspring-bootbootstrap-4

Answer №1

To adjust the size of Bootstrap containers, you will need to override the breakpoints that determine their sizing or customize the specific container class CSS.

One alternative is to use a fluid container and wrap it with a custom container that has the desired widths.

It's important to note that there is no valid Bootstrap 4 class called `container-sm`.

.container,
.container-fluid {
  background: pink;
  margin-bottom: 1rem;
}

.container-container {
  max-width: 95vw;
  margin: 0 auto;
}

@media (min-width: 500px) {
  .container-container {
    max-width: 90vw;
  }
}

@media (min-width: 700px) {
  .container-container {
    max-width: 85vw;
  }
}
<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">

<div class="container">
  <div class="row">
    <div class="col">Standard container column content here.</div>
  </div>
</div>

<div class="container-container">
  <div class="container-fluid">
    <div class="row">
      <div class="col">Custom container container column content here.</div>
    </div>
  </div>
</div>

Answer №2

To ensure your content stretches across the entire viewport width without any pesky lateral margins, consider utilizing the container-fluid class instead of the regular container class.

<div class="container-fluid">
  <!-- Insert your content here -->
</div>

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

An error occurred while using Phonegap's FileTransfer() method - it seems that the File

After exploring various resources and finding no solutions, I have turned to this platform for help. I am attempting to initiate a .pdf download upon clicking on the following link: <a onclick="BeginDownload()" class="link" href="#">My guides</a ...

htmlcordovaphonegap-pluginsphonegap-build

Steps for incorporating error messages in jQuery Validator:1. Begin by including the

I am currently facing an issue with displaying error messages on my "contact me" form. Although I have successfully implemented validation, I am struggling to comprehend how the errorPlacement function should be utilized. Could someone provide me with a ...

jqueryhtmlcss

What is the best way to create dynamic transparency based on cursor position?

Is there a way to create an animation like the one on https://meetwalter.com, where the transparency changes with the cursor's position? I previously attempted a similar implementation using CSS, but it seems that the website accomplishes this effect ...

javascriptcssanimationfrontend

HTMLMediaElement does not have the setSinkId method

I am currently in the process of developing a WebRTC application using Angular, with the goal of managing audio output through the setSinkId() method within HTMLMediaElement. However, when attempting to use this method, I am encountering an error message s ...

javascripthtmlwebrtc

Creating an HTML list based on a hierarchical MySQL table structure

I have retrieved a hierarchical table showing different elements and their parent-child relationships as follows: id| name | parent_id | header 1 | Assets | 0 | Y 2 | Fixed Assets | 1 | Y 3 | Asset One | 2 | N 4 | ...

javascripthtmlvue.js

Troubleshooting Problems with CSS Three-Column Layout

Struggling with aligning domain names in a 3 column setup, I have been attempting this for some time now without success. I am new to this and could use some guidance. Here is the code: TPL file <div> <p class="center">{foreach key=num it ...

htmlcsssmarty

Bottom div refuses to adhere to the bottom of the page

I need help with creating a footer div that sticks to the bottom, left, and right of the page. The current footer doesn't extend all the way down and left. How can I resolve this without using "position: fixed;"? Below is the code snippet (I have rep ...

htmlcsspositionfooter

What is the best way to achieve this effect with CSS?

Is there a way to create this design with CSS? I experimented with applying border CSS and rotating the DIV, but couldn't quite achieve the desired result. Here is an image for reference: https://i.stack.imgur.com/yW6wK.png ...

htmlcssdrawing

What are the potential ways in which an html IMG tag can disrupt the functionality of this

For years, I have been using this form code without any issues. The code functions perfectly and all the tags are correct. However, whenever I include an image tag, it displays a failure message and prevents the mail function in PHP from working. The hea ...

phphtmlemail

Is there a way to eliminate the white border surrounding this input field? (JSFiddle link included)

http://jsfiddle.net/gn3LL/ .error { background-color: red; } <input id="firstname" class="custom error" name="first_name" type="text" placeholder="" class="input-xlarge"> I am trying to remove the small white border around the inside of the inpu ...

csstwitter-bootstrap

Implementing dynamic background images in Angular 4 using div placeholders

Is there a way to include a placeholder or default image while waiting for item.imgSrc to load on the screen? <div class="style" *ngFor="let item of array; <div [style.backgroundImage]="url('+ item.imgSrc +')" class="image">< ...

htmlcssangular

Tips on altering a predetermined input text value using JavaScript

I have a question about using JavaScript. I am currently developing a tax calculation system. function calculateTax(){ var invoiceValue = document.getElementById("invoicevalue"); var ppn = document.getElementById("ppn"); var pph = document.get ...

javascripthtml

Looking to pass two distinct variables using a single props with v-if in Vue-JS. Any suggestions?

I am attempting to pass different data to my other component. Essentially, when my variable firstvalue is not null, I want to send firstvalue. Currently, this setup is functioning as expected. However, I now wish to send secondvalue if it is not null. < ...

javascripthtmlvue.js

What is the best way to retrieve the previously chosen value from one dropdown and populate it into another dropdown when

I have 3 choices available. When the user selects the third option, a jQuery onchange event is triggered to send the variable to another PHP file for database validation based on the selected id. The challenge lies in how I can also include the variables f ...

javascriptphpjqueryhtmlmysql

Determine the number of elements in a Css selector and restart the counter whenever an element

Need help with counting elements that are not part of a regular list structure. Here is a code example to clarify: Fiddle I don't have much control over the HTML. The DOM structure looks like this: <div class="body"> <div><p clas ...

htmlcsscss-counter

What is the reason for the error message saying "The prefix 'h' for the element 'h:head' is not bound"?

Below is the xhtml code I have created: <html> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/> </h:head> <h:body> <view> <h:form> <br/> ...

htmljsfxhtml

What could be causing flexbox not to shrink to fit after wrapping its elements?

My goal is to create a flexbox with a maximum width that allows elements to wrap beyond that width without affecting the overall size of the flexbox's "row." The issue I am encountering is that when an element stretches beyond the maximum width and w ...

htmlcssflexbox

Preventing responsive elements from loading with HTML scripts

Currently, I am utilizing the Gumby framework which can be found here. Everything appears to be running smoothly. My goal is to incorporate a mobile navigation list where the links are grouped under a single button, as outlined here. Initially, this funct ...

javascriptjqueryhtmlcssgumby-framework

The link in the navigation bar is not functioning correctly

Let me break down the issue I'm facing here. The problem arises with the navigation buttons that have sub-lists nested within them (ul>li>ul). When attempting to click on these buttons, the link does not work unless I specifically click on the text it ...

htmlcss

What are the best practices for utilizing pre-defined CSS classes in Vue.js libraries?

I don't have much experience with CSS, but I'm really eager to customize the appearance of my chart. The chart is generated by a vue.js library and comes with pre-defined CSS classes. However, I'm uncertain about how to access and modify the ...

cssvue.jscharts