Tips on eliminating margins from rows on smartphones using bootstrap version 4.5

In my project, I am utilizing bootstrap 4.5 and aiming to create an edge-to-edge view for mobile devices.

Here is the layout I currently have:

<div class="container">
  <div class="row">
     <div class="col-md-9>...</div>
     <div class="col-md-3>...</div>
</div>

While it looks fine on desktop, there is too much padding on mobile, and I want the content to appear edge-to-edge.

https://i.sstatic.net/iR7g0.png

I've attempted to use no-gutters on the row, as well as removing padding from the container, but it adversely affects the desktop version's appearance.

cssbootstrap-4

Answer №1

<div class="container mx-0 mx-sm-3">
  <div class="row">
     <div class="col-md-9">...</div>
     <div class="col-md-3">...</div>
     </div>
</div>

mx-0 adjusts the container margin to 0 on the x-axis, then mx-sm-3 readjusts it to 3 (1rem) for small screens and larger (sm, md, lg, xl)

Learn more about Spacing in Bootstrap here

Answer №2

I managed to resolve the issue by creating custom media queries like so:

@media screen and (min-width: 600px) { // setting default row and cols values for non-mobile screens
  .row {
    margin-left: -15px;
    margin-right: -15px;
}

  .row [class*='col']{
    padding-left: 15px;
    padding-right: 15px;
  }

}

.row {  // adjusting rows margin and cols padding to 0 for mobile screens
  margin-left: 0;
  margin-right: 0;
}

.row [class*='col']{
  padding-left: 0;
  padding-right: 0;
}

Additionally, I included this in the container class 

class="container px-0 px-sm-3"

You can see the outcome here:

https://i.sstatic.net/Qnurx.png

Answer №3

To customize the layout, you have two options: create your own media query or utilize the predefined spacing classes in Bootstrap here

class="p-0" translates to padding: 0 !important;

Answer №4

To incorporate spacing adjustments in your HTML code, consider utilizing the p-sm-0 and p-0 classes. Alternatively, for mobile devices specifically, you can implement a media query targeting the container class and set its padding to zero in the CSS.

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

Issue with navigation bar small box alignment on the left side

Hey there! I'm relatively new to bootstrap and html, and I've encountered an issue with my navbar setup. When I create my navbar, a small box appears on the left side of my screen. Here's an example <head> <meta charset="ut ...

htmlcssbootstrap-4

Carousel with multiple column slides in Bootstrap 4

I am having an issue with my carousel where I want it to rotate rows with multiple columns (col-4) instead of using images. The carousel is functioning, but the columns are displaying vertically rather than 3 side by side as intended. Can anyone help me fi ...

bootstrap-4carousel

Angular - attach event listener to Bootstrap dropdown menu

Looking to add an overlay on the screen behind a menu when it's expanded, but unsure of how to do this with Bootstrap. Any suggestions on listening for when the menu expands? Here is my current menu code: <link rel="stylesheet" href="https://st ...

javascriptjqueryhtmlbootstrap-4

The Bootstrap 5 navigation bar remains fully expanded and does not collapse as intended

I'm having trouble getting the navbar to collapse on my landing page created using react and bootstrap. Here is the code for my header component: import React from 'react'; import logo from '../images/logonoBG.png'; export default ...

cssreactjsbootstrap-5

jQuery - Comparing Nested and Unnested Transition and Animation Event Handlers/Listeners

At the moment, I am working on a block of code that triggers every time a specific ajax call is made. The snippet I'm using looks like this (although it might throw an error due to absence of html or css - but that's not my concern as I just wan ...

javascriptjqueryhtmlcss

Which tools are best suited for Xamarin development?

Recently, I've been contemplating how to style my app. One common approach is using CSS, but the question that lingers in my mind is whether it's truly compatible and if I should begin utilizing CSS. Is there perhaps a different language that wou ...

androidcssiosxamarinstyling

Dynamically adjust the label position based on the button position

I am currently developing an interface that allows users to change the position of buttons and add a label text under the button. However, I am facing an issue where the label is not always centered below the button due to variations in the size and number ...

htmlcssangulardynamiclabel

Troubleshooting Bootstrap v4.4: Issues with Collapse Transition

I'm trying to add Bootstrap Collapse to my table data. However, when I click the button, the table data collapses, but without any transition effect. I've double-checked that I have included jQuery, used collapse (not collapse in), and added aria ...

htmljquerycssbootstrap-4

Is it possible to create a responsive Bootstrap width?

Currently, I have a button with a width set to w-25. However, as the screen size decreases, I want to dynamically adjust the width without the initial 25 value. I attempted to use w-sm-25, but unfortunately, that did not produce the desired result. Is th ...

bootstrap-4

Thundercss and @personalized media

After installing lightningcss and configuring the vite config, I defined lightningcss and customMedia as true. import browserslist from "browserslist"; import { browserslistToTargets } from "lightningcss"; return defineConfig({ ...

cssconfigvitemedialighting

Tips for aligning text to match the starting point of other text

Currently, the text appears as follows: Lorem ipsum dolor sit amet consectetur adipiscing elit vitae orci elementum dictum I want it to look like this: Lorem ipsum dolor sit amet consectetur adipiscing elit vitae orci elementum dictum I ...

htmlcssreactjsstyled-components

A design with three columns that stretch to 100% height using CSS styling

I can't seem to figure out the CSS for this layout. Here is the HTML code I have: <body> <div id="main"> <div id="left"> menu </div> <div id="middle"> </div> ...

csslayoutmultiple-columns

Eliminate the whitespace separating two div elements

How do I eliminate the empty space between the header and wrapper div elements? Check out this DEMO fiddle. Below is the HTML code: <div id="container"> <div id="header"> <div id="logo"> </div> <div ...

htmlcss

Tips for positioning a chat box at the bottom of a v-card's visible area

My goal is to create a chat app using Vuejs 3 and Vuetify 3, but I'm encountering an issue aligning the chatbox with the v-card component. Instead of being positioned at the bottom of the v-card, the chatbox (green) appears at the bottom of the page. ...

javascriptcssvue.jsflexboxvuetify.js

Struggling to make css selector acknowledge the margins on the right and left

I am trying to style two inner divs within a containing div by floating the first one to the left and the second one to the right. Additionally, I want to add a margin of 15px on the left for the first div and on the right for the second div. The challenge ...

htmlcss

Displaying jQuery content tabs with excessive whitespace visible

My project utilizes a jQuery content tab plugin featuring 6 tabs with different content sections (Company, The founders, Team, Accolades, Careers, Philosophy). I am encountering an issue in Chrome where clicking on the Company tab after any other tab res ...

jqueryhtmlcss

Adding an input-group-addon class in Bootstrap 4 to enhance the form

Embarking on a new project, I made the decision to upgrade to Bootstrap 4. While working on creating a form, I noticed that the 'input-group-addon' class was not functioning properly. I am perplexed as to why this is the case, as the class works ...

csstwitter-bootstrapformsbootstrap-4twitter-bootstrap-4

When the Button is clicked, scroll the element to the top position

I want to include an "ADD COMMENT" button on my page. When clicked, a form will be displayed for users to add comments. I would like the form to automatically scroll to the top position of the page so that users do not have to manually scroll down to vie ...

javascriptphphtmlcss

Tips for displaying a PNG image correctly within the navbar

I'm facing an issue with adding a logo to the navigation bar, as the logo I want to use doesn't display correctly. Even after trying to adjust the width and height, it continues to stretch inappropriately and the text on the image remains unread ...

htmlcssbootstrap-5

Ways to insert a gap underneath every line

Hello, I'm struggling to create space below each line of code. I've tried using the br tag and margin property, but it didn't work. Can anyone help me with this? I'm not sure if the current HTML structure is correct or if I should swit ...

htmlcssrowlinespace