Reputation: 403
Bootstrap 4 row extends outside of container
I decided to try using bootstrap and opted for version 4.
So I have a pretty good template structured out and noticed that the row for the main content extends out past the bounds of the container div. It is the only row on the page that does that.
I tried changing spacing with margin or padding on either/both elements and it didn't seem to change anything.
I also tried containing the main content inside of a section tag, since the other two rows are contained within header/footer tags and they remain within the bounds. This also did not work.
I highlighted the container just to show its bounding box. I also have the padding removed from it in this screenshot, it is the same problem either way though.
<!doctype html>
<html lang="en">
<head>
<title>Air Technology West</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- fontawesome CDN embed -->
<script src="https://use.fontawesome.com/f13a1bd68c.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<!-- Header area -->
<header class="pt-3 px-3">
<div class="row">
<div class="col-md-6">
<a href="#"><img class="logo" src="img/logo1.png"></a>
</div>
<div class="col-md-6">
<ul class="contact-info">
<li class="ph-local"><i class="fa fa-phone fa-fw"></i> xxx-xxx-xxxx</li>
<li class="ph-fax"><span class="fnt-sm">Fax: </span><i class="fa fa-fax fa-fw"></i> xxx-xxx-xxxx</li>
</ul>
</div>
</div><!--END ROW-->
</header>
<nav class="navbar navbar-expand-md nav-main d-flex flex-row">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-main-toggle" aria-controls="nav-main-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars fa-2x"></span><span class="btn-collapse"> MENU</span>
</button>
<div class="collapse navbar-collapse" id="nav-main-toggle">
<div class="nav navbar-nav mr-auto">
<p class="nav-item"><a class="nav-link px-3" href="#">Home</a></p>
<p class="nav-item"><a class="nav-link px-3" href="#">About Us</a></p>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Compressors</a>
<a class="dropdown-item" href="#">Spray Equipment</a>
<a class="dropdown-item" href="#">Parts & Accessories</a>
<a class="dropdown-item" href="#">All Major Products</a>
</div>
</li>
<p class="nav-item"><a class="nav-link px-3" href="#">Services</a></p>
<p class="nav-item"><a class="nav-link px-3" href="#">Contact Us</a></p>
</div>
</div>
</nav>
<!--===========END header area==============-->
<!--===========CAROUSEL area================-->
<div id="carousel-main" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-main" data-slide-to="0" class="active"></li>
<li data-target="#carousel-main" data-slide-to="1"></li>
<li data-target="#carousel-main" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<a href="#"><img class="d-block w-100" src="img/headline_compressors.PNG" alt="First slide"></a>
</div>
<div class="carousel-item">
<a href="#"><img class="d-block w-100" src="img/headline_spray.PNG" alt="Second slide"></a>
</div>
<div class="carousel-item">
<a href="#"><img class="d-block w-100" src="http://via.placeholder.com/720x300" alt="Third slide"></a>
</div>
</div><!--END CAROUSEL INNER-->
<a class="carousel-control-prev" href="#carousel-main" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-main" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--===========END carousel area============-->
<!--===========PAGE content==============-->
<section id="page-content">
<div class="row">
<aside class="col-md-3">
<div class="card mt-3">
<a href="#">
<img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
<div class="card-body">
<p class="card-text">Service</p>
</div>
</a>
</div>
<div class="card mt-3">
<a href="#">
<img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
<div class="card-body">
<p class="card-text">Products</p>
</div>
</a>
</div>
<div class="card mt-3">
<a href="#">
<img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
<div class="card-body">
<p class="card-text">Parts & accessories</p>
</div>
</a>
</div>
</aside>
<article class="main col-md-9 col-sm-12 px-3 mt-3">
<p>This is the main content area</p>
</article>
</div><!--END ROW-->
</section><!--END PAGE CONTENT-->
<!--============END page content===============-->
<!--=============footer area===============-->
<footer class=" my-3 px-3">
<div class="row">
<div class="col-sm-6">
<h3 class="border-bottom">Quick links</h3>
<nav class="nav row nav-footer">
<a class="nav-link col-md-4 col-sm-6" href="#">Products</a>
<a class="nav-link col-md-4 col-sm-6" href="#">Services</a>
<a class="nav-link col-md-4 col-sm-6" href="#">About Us</a>
<a class="nav-link col-md-4 col-sm-6" href="#">Contact Info</a>
<a class="nav-link col-md-4 col-sm-6" href="#">Directons</a>
<a class="nav-link col-md-4 col-sm-6" href="#">Site Map</a>
</nav>
</div>
<div class="col-sm-6 contact-info">
<h3 class="border-bottom">Contact Info</h3>
<p class="ph-local"><i class="fa fa-phone fa-fw"></i> xxx-xxx-xxxx</p>
<p class="ph-fax"><span class="fnt-sm">Fax: </span><i class="fa fa-fax fa-fw"></i> xxx-xxx-xxxx</p>
<p class="address"><i class="fa fa-map-marker fa-fw"></i> ADDRESS</p>
</div>
</div><!--END ROW-->
</footer>
<!--==============END footer area================-->
</div><!--===============END CONTAINER===============-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
Edit: add styles.css file.
html{
font-family: verdana, helvetica, sans-serif !important;
}
nav a{
color: black;
list-style: none;
text-align: center;
text-transform: uppercase;
}
.nav .nav-link, .nav .dropdown-item {
color: black;
}
.dropdown-toggle{
color: black;
}
.nav a:hover{
border-bottom: 3px solid black;
margin-bottom: -3px;
}
.nav a:active{
background-color: grey;
color: white;
}
.navbar{
padding: .1rem;
}
.navbar-toggler{
margin-left:auto;
margin-right: auto;
}
/*********************3. LAYOUT********************/
#carousel-main{
position:relative;
}
.carousel-button-right{
position: absolute;
bottom: 2rem;
right: 25%;
}
.carousel-button-left{
position: absolute;
bottom: 2rem;
left: 25%;
}
.carousel-button-center{
position: absolute;
bottom: 30px;
right: 50%;
}
/*********************4. MODULES*******************/
/********4.1 HEADER *********/
.logo{
height: auto;
max-width: 100%;
}
.contact-info{
list-style: none;
text-align: right;
}
.fnt-sm{
font-size: .75rem;
}
.ph-local{
font-size: 1.75rem;
}
/********4.2 MAIN NAV********/
.btn-collapse{
font-size: 2.2rem;
font-weight: bold;
}
/********FOOTER********/
.border-bottom{
border-bottom: 1px solid black;
}
/*********************5. STATES********************/
/*********************6. THEME*********************/
body{
background-image: url("../img/escheresque_ste.png");
background-repeat: repeat;
}
header, footer, .navbar, .main{
background-color: white;
}
@media (max-width: 767px) {
header *{
text-align:center;
}
nav .nav-item{
text-align: center;
}
aside{
display: none;
}
}
@media (max-width: 575px) {
footer *{
text-align: center;
}
footer nav .nav-item{
text-align: center;
}
}
@media (min-width: 576px) {
footer.contact-info *{
text-align: right;
}
}
Upvotes: 28
Views: 55111
Answers (8)
Reputation: 90028
tl,dr: - wrap .row(s) in .container-fluid
To counter the negative margins of .row, without losing the gutters (column default horizontal padding) and without messing up the mobile, place the .row(s) in a wrapper with at least 15px right and left padding, such as .container, .container-fluid, .navbar, .card-body, etc...
Important: .row changes its negative margins responsively, but both .container and .container-fluid account for that, as they were designed to work together.
Upvotes: 2
Reputation: 1
I think it is better to add .row{width:100%} to your css this way you don't have to change padding of col inside your row it is working for me no more overflow
Upvotes: 0
Reputation: 11
Bootstrap adds an automatic horizontal spacing to row classes. So override it by setting the horizontal space (i.e. margin) to 0, just like;
<div class="row mx-0">
....
</div>
Upvotes: 1
Reputation: 31
Adding mx-0 to the overflowing element will solve your problem.
Upvotes: 3
Reputation: 8915
Considering above answers, sometimes you need to edit default CSS property in your project.
so if your want to Apply no-gutters or any CSS property, you can simply change that property on main CSS / SASS file like this:
.row {
margin: 0;
}
this hack will remove no-gutters margin from all row in your project!
Upvotes: 0
Reputation: 1140
Adding the 'no-gutters' class class='row no-gutters' to your bootstrap 4 rows is also a nice way to get rid of margins and paddings.
The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.
https://getbootstrap.com/docs/4.1/layout/grid/#no-gutters
Upvotes: 30
Reputation: 511
The .row in bootstrap is giving a margin right and left of -15px, override it with a in-line style="margin: auto" and you should be fine.
The aside has a default padding left and right of 15, so in your case you should set the padding-left to 0 making the content fit the grid properly.
<section id="page-content">
<div class="row" style="margin: auto">
<aside class="col-md-3" style="padding-left: 0">
<div class="card mt-3">
<a href="#">
<img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
<div class="card-body">
<p class="card-text">Service</p>
</div>
</a>
</div>
<div class="card mt-3">
<a href="#">
<img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
<div class="card-body">
<p class="card-text">Products</p>
</div>
</a>
</div>
<div class="card mt-3">
<a href="#">
<img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
<div class="card-body">
<p class="card-text">Parts & accessories</p>
</div>
</a>
</div>
</aside>
<article class="main col-md-9 col-sm-12 px-3 mt-3">
<p>This is the main content area</p>
</article>
</div><!--END ROW-->
</section><!--END PAGE CONTENT-->
Upvotes: 44
Reputation: 142
use the class mr-0 instead of style="margin-right: 0" that's the bootstrap 4 way.
Upvotes: 9
Related Questions
- How to have a column extend past container bootstrap
- Extend bootstrap row outside the container
- Row sticking out of body
- Twitter bootstrap table extends outside container on right
- Why does nested Row/Column extend past container
- Bootstrap 4 big margin in parent container
- CSS Bootstrap Column goes outside row?
- Bootstrap row hanging out past containing div
- Bootstrap Row Exceeds Container-Fluid
- Why is my bootstrap row overspilling it's container