Topic: Removing right/left content margins

gllermaly free asked 5 years ago


My client is asking to remove right and left margins from the applications and I cant find where, this is how it looks like now :

They want to the card to use the whole page


imyke free answered 5 years ago

Hello. I personally have this issue too, on mdb-vue. Applying your solution gave me the following:

The codebase for that section is as follows:

            <mdb-container fluid class="mx-0">
                <mdb-row class="mx-0 mb-3">
                    <mdb-col class="col-md-2">
                        <mdb-card class="lte mr-auto">
                    <mdb-col class="col-md-2 offset-md-8">
                        <mdb-card class="lte ml-auto">

If there's something I'm doing wrong, please point it out.

imyke free commented 5 years ago

Think I figured it out. the no-gutters class did the trick.

Anna Morawska staff commented 5 years ago

Ok, great :) if you encounter any other problems, please open a new ticket on our support board and mark it accordingly to the technology you use - then it is easier for us to help you :)

Anna Morawska staff answered 5 years ago

Hi there, if you use MDBContainer component, you can add prop fluid to make a wrapping div full width. To remove left & right padding add custom CSS rules:

import React from 'react';
import { MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBContainer } from 'mdbreact';
import './index.css'

const CardExample = () => {
  return (
    <MDBContainer fluid>
      <MDBCard >
          <MDBCardTitle>Card title</MDBCardTitle>
            Some quick example text to build on the card title and make
            up the bulk of the card&apos;s content.
          <MDBBtn href="#">MDBBtn</MDBBtn>

export default CardExample;


      padding-left: 0;
      padding-right: 0;

B.L.o.w free commented 4 years ago

I had the same issue, and using your method gave me a horizontal scroll I didn't bargain for.I used fluid on MDBContainer as shown and in the css, rather than targeting .container-fluid, I targetted .col so .col{ padding-left: 0; padding-right: 0; } and it worked.

Piotr Glejzer staff commented 4 years ago

Thanks for suggestion. Have a nice Day


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.11.0
  • Device: Macbook pro 2013
  • Browser: chrome
  • OS: macos sierra
  • Provided sample code: No
  • Provided link: Yes