CODEWITHSUNDEEP
htmlbootstrap-4
Brett Williams
Brett Williams

Reputation: 173

Cant seem to get rid of padding with of fluid container in Bootstrap 4

So I'm trying to add a full width (not full screen) video under my navbar using Bootstrap 4 and I cant seem to get rid of these white bars on the side (padding I assume). 

<body>
  <!-- body code goes here -->
  <div id="top-nav-fluid" class="container-fluid fixed-top">
    <div class="container">
      Bootstrap Nav code here
    </div>
    <!-- nav container -->
  </div>
  <!-- nav fluid container -->



  <div id="top-banner-vid" class="container-fluid">
    <div class="row">
      <video autoplay loop muted>
		     <source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">
		     Your browser does not support the video tag.
	   </video>

    </div>
  </div>
  <!-- The top banner video fluid container -->

I've tried doing a -15px left and right margin on the top-banner-vid fluid container but this just made a larger white space on the right side. No matter how much I adjusted the right margin it remained the same size.

I tried putting a div row inside the fluid container. This worked for the side margins but put my video in the middle of the page. I tried to fix that with alighting it to the start, but it did not move.

Not sure what else to try. Thank you very much for your time.

Upvotes: 1

Views: 1983

Answers (1)

WebDevBooster
WebDevBooster

Reputation: 14964

Add the class no-gutters to the row to get rid of the gutters.

That's how you remove that unwanted margin in Bootstrap 4.

Your content, ANY content, must then always go into a Bootstrap column.

Only Bootstrap columns may be direct children of Bootstrap rows. No exceptions.

And if you only need one column, just use the col class for that.

You may also need to add the px-0 (horizontal padding 0) to the container like so:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="top-banner-vid" class="container-fluid px-0">
    <div class="row no-gutters">
        <div class="col">
            <video class="embed-responsive embed-responsive-16by9" autoplay loop muted>
                <source class="embed-responsive-item" src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions