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

Discovering modifications to CSS using selenium

Currently, I am working on an ajax form where CSS elements are dynamically changed. I am curious to know if it is feasible to verify these changes using Selenium. For example, checking if the background color changes from #ffffff to #000000 after clicking ...

cssselenium

What are the steps to create a CSS 'shell' design?

How can I create an image displayed as a circle with border-radius:50%, along with some text on the same line that has a set width and background color? I want to achieve this without hard coding values. What is the best approach to do this? Check out the ...

htmlcsscss-shapes

Various text sizes within a nested HTML list structure

I've developed a nested CSS class for an ordered list on my website, but I'm encountering a problem where each list item is appearing in different font sizes even though I have specified the font size. .number_list ol { font:normal 1.2em ...

htmlcsshtml-lists

JavaScript tip: Improve the way you highlight the current navigation page while scrolling by finding alternative methods to using "scrollY > x"

Currently, my webpage layout is divided into 4 sections - HOME, ABOUT, SKILLS, and CONTACT. Below is the JavaScript code I am using to highlight a specific section on the navigation bar based on the scroll position: let home = document.querySelector(" ...

javascripthtmlcssscroll

I have noticed that when I use VBA's FindelementbyXpath function and manually copy & paste the xpath, my code works perfectly. But when I run the code again, I encounter a NoSuchElementError. Why does this

Looking to create an "Instagram Direct Message SENDING MECRO" URL = www.instagram.com/direct/inbox driver.FindElementByXPath("/html/body/div[1]/section/div/div[2]/div/div/div[1]/div[1]/div/div[3]/button/div/svg").Click After opening the link and copying/ ...

htmlvbaselenium

Scroll through the div to quickly find the relevant content

I have implemented the following HTML structure: <div style="height:200px;overflow-y:scroll;"> <table>.....</table> </div> By using this setup, I am aiming to replicate the functionality of an expanded <select> control wit ...

javascriptjqueryhtmlcssscrollable

Changes in content result in modifications to the size of transition elements

Have you ever encountered a button with changing text upon being pressed? The transition in text leads to a shift in the button's width. Wouldn't it be amazing if one could smoothly transition the change in width of an element using a code snippe ...

javascriptjqueryhtmlcss

If there is data in MySQL, proceed to display the results on the page; if not, display a check

I am struggling to implement a small logic that I can't seem to figure out here. My goal is to retrieve MySQL data from the database and echo it on a .php file. Before doing so, I need to check if the data is available. If it is, then I want to proce ...

phphtmlmysqlif-statement

Choosing bookmarkable views in Angular 5 without using routes

I'm currently working on a unique Angular 5 application that deviates from the standard use of routes. Instead, we have our own custom menu structure for selecting views. However, we still want to be able to provide bookmarkable URLs that open specifi ...

javascripthtmlangular

The min-height property in CSS appears to be ineffective on Jelly Bean

In my current project developing an Android application, I have incorporated Webviews in certain activities and fragments. However, I encountered a perplexing issue when running the app on Jelly Bean (api 16 and 18) emulator - the css property min-height ...

androidcssandroid-webview

Having trouble getting the jQuery toggle function to work properly with div elements

I'm struggling with some divs that are not behaving as expected. When I click the button, it opens and changes the text to "Collapse", but when I click it again, it doesn't change the text back to "Find Support". Additionally, if I click on a dif ...

jqueryhtmlcss

What are the steps for utilizing a button instead of an input field that is not within a form?

I need assistance with setting up a navbar with a button that will submit a form in the body with the ID of album_form. Can anyone provide suggestions for what to include in the onclick attribute to achieve this functionality? <body> <header& ...

javascripthtmlforms

Targeting the landscape mode on screens of both iPhone 4 and iPhone 5 sizes using CSS3 Media Queries

I'm facing a problem with CSS3 media queries while developing a mobile site. The code I've written works perfectly on the landscape mode of an iPhone 5, but it's not quite right on an iPhone 4 or earlier in landscape mode. /* Default stylin ...

htmlcssmedia-queries

Problem with the hover functionality of the <li> tag

I'm having an issue with applying the hover property to the li element in the sidebar. The hover effect works, but the icon tag is not showing the hover effect. I want the icon to also show the hover effect along with the li's hover effect. Here ...

htmlcssbootstrap-4

Why won't divs align vertically in the center?

I'm struggling to create a navigation bar layout where the icons are centered both horizontally and vertically within their cells. http://jsfiddle.net/digorydoo/j2v5m7gr/ I can't seem to pinpoint what's causing the issue with my current la ...

htmlcsscenteringnavigationbar

How can CSS be used to prevent line breaks between elements in a web page?

div#banner>img { float: left; background-color: #4b634b; height: 265px; width: 80%; } ul { float: left; background-color: #769976; width: 162px; } <body> <div id="wrapper"> <header> <nav> <ul ...

csshtml

Alert: CSS 4.0 Warning Validation - The value "rgb(0, 0, 0, 0.4)" is not valid for the "border" property

Wrapping up my asp core 3 project, I've been addressing various warnings that have popped up. However, one particular warning has me stumped. The CSS property in question is functioning perfectly, adding a touch of transparency to the black border. Wh ...

cssasp.net-core

What is the process for utilizing Angular's emulated encapsulation attributes on HTML elements that are dynamically added to an Angular component?

Within my custom Angular component, a third-party library is dynamically adding an HTML element. I am seeking a solution that can apply Angular's encapsulation attributes to these elements regardless of the specific third-party library being used. If ...

cssangularangular-components

Stop the scrolling behavior from passing from one element to the window

I am facing an issue with a modal box window that contains an iframe. Inside the iframe, there is a scrollable div element. Whenever I try to scroll the inner div of the iframe and it reaches either the top or bottom limit, the browser window itself start ...

javascriptjqueryhtmleventsscroll

Form fields will not automatically populate with link parameters; the user must manually input the information

My form fetches data from the database using server-side code when the user inputs the "user_id" field. The User ID field is the primary field on the form, and when the user enters their user ID, all other fields retrieve the corresponding user data from t ...

javascripthtml