Menu
If you want to have a true 100% width element, simply put a w-100 class on your div without container . In your case, when you are using a container , switch it to a fluid one by replacing it with container-fluid , and adding a p-0 class as well. It will, but it is not against Bootstrap's rules.
For Bootstrap 3, you would need to use a custom wrapper and set its width to 100%.
.container-full {
margin: 0 auto;
width: 100%;
}
Here is a working example on Bootply
If you prefer not to add a custom class, you can acheive a very wide layout (not 100%) by wrapping everything inside a col-lg-12 (wide layout demo)
Update for Bootstrap 3.1
The container-fluid class has returned in Bootstrap 3.1, so this can be used to create a full width layout (no additional CSS required)..
Bootstrap 3.1 demo
This is the complete basic structure for 100% width layout in Bootstrap v3.0.0. You shouldn't wrap your <div class="row"> with container class. Cause container class will take lots of margin and this will not provide you full screen (100% width) layout where bootstrap has removed container-fluid class from their mobile-first version v3.0.0.
So just start writing <div class="row"> without container class and you are ready to go with 100% width layout.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Basic 100% width Structure</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
<script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-3 red">Test content</div>
<div class="col-md-9 green">Another Content</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
To see the result by yourself I have created a bootply. See the live output there. http://bootply.com/82136 And the complete basic bootstrap 3 100% width layout I have created a gist. you can use that. Get the gist from here
Reply me if you need more further assistance. Thanks.
Using Bootstrap 3.3.5 and .container-fluid, this is how I get full width with no gutters or horizontal scrolling on mobile. Note that .container-fluid was re-introduced in 3.1.
Full width on mobile/tablet, 1/4 screen on desktop
<div class="container-fluid"> <!-- Adds 15px left/right padding -->
<div class="row"> <!-- Adds -15px left/right margins -->
<div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
<!-- Full-width for mobile -->
<!-- 1/4 screen width for desktop -->
</div>
</div>
</div>
Full width on all resolutions (mobile, table, desktop)
<div class="container-fluid"> <!-- Adds 15px left/right padding -->
<div class="row"> <!-- Adds -15px left/right margins -->
<div>
<!-- Full-width content -->
</div>
</div>
</div>
You're right using div.container-fluid and you also need a div.row child. Then, the content must be placed inside without any grid columns.
If you have a look at the docs you can find this text:
- Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
- Use rows to create horizontal groups of columns.
Not using grid columns it's ok as stated here:
- Content should be placed within columns, and only columns may be immediate children of rows.
And looking at this example, you can read this text:
Full width, single column: No grid classes are necessary for full-width elements.
Here's a live example showing some elements using the correct layout. This way you don't need any custom CSS or hack.
In BOOTSTRAP 4 you can use
<div class="row m-0">
my fullwidth div
</div>
... if you just use a .row without the .m-0 as a top level div, you will have unwanted margin, which makes the page wider than the browser window and cause a horizontal scrollbar.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With