How do I make the row element take up the entire width?
Question
I am fairly new to bootstrap and I am trying to figure out some code for a test website. I have ran into an issue with bootstrap, I setup a element and put 2 elements into it. On the left is a paragraph (which I plan on changing to a larger element later), and on the right is an image (I don't think the dimensions matter). I noticed that the row element was not taking up full width of the screen and figured this was because of the elements it was inside of. I went into my CSS file to troubleshoot, set the row class' width to 100%, and went back to my site and opened up Chrome's dev tools. I noticed that the container div had a right and left margin on both sides which caused the row div to take up less space and center itself within the element of the container. I set both the left and right values for margin to 0px and went back to the site. The left margin had disappeared and although Chrome's inspect was showing there was no right margin either, it still appeared when I hovered over the container element. I don't think it is a specificity error as the left margin disappeared but not the right. I'm truly stumped. As I mentioned, I'm fairly new to Bootstrap so the issue may be in plain sight. I checked to make sure I typed all of my syntax correctly for margin right and it looked normal to me. The code I'm showing you, however, is without the modifications I made to the container and the row. The code I'm showing you is normal (apart from the container being centered).
If there are some odd spacing issues, I apologize. I manually spaced 4 times for each line of code so if there are 4 spaces where there shouldn't be, my apologies.
.header .jumbotron { color: #fff; background-color: #a1ff7c; font-family: Roboto Condensed; margin-bottom: 0px; } .navbar-default { background-color: #78c45a; border: 0px; font-family: Roboto Condensed; } .gallery .container { font-family: Roboto Condensed; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar- nav > .active > a:focus { color: white; /*BACKGROUND color for active*/ background-color: #78c45a; } .navbar-default .navbar-nav > .active > a:hover { background-color: #5a9344; color: #fff; } .navbar-default .navbar-nav > li > a { color: #fff; } .navbar-default .navbar-nav > li > a:hover { color: #fff; background-color: #5a9344; } .navbar-default .navbar-brand { color: #fff; } .navbar-default .navbar-brand:hover { background-color: #5a9344; color: #fff; } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .navbar-default .navbar-toggle { border: 0px; } .navbar-default .navbar-toggle:hover { background-color: #5a9344; ; } p { font-family: Roboto Condensed; }
<html lang="en"> <head> <title>Hope's Seed</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" h ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <link href="CSS/style.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css? family=Roboto+Condensed" rel="stylesheet"> </head> <body> <div class="header"> <div class="jumbotron text-center"> <h1>Hope's Seed</h1> <p>You're Not Alone</p> </div> </div> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="hopesseed.html">Hope's Seed</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#">About</a> </li> <li><a href="#">Sponsors</a> </li> <li><a href="#">Donate</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">More</a> </li> </ul> </div> </div> </nav> <div class="Intro"> <div class="container"> <div class="row"> <div class="col-sm-6"> <p>Enriching the lives of children who are medically fragile and terminally ill.</p> </div> <div class="col-sm-3"> <img src="Images/image1.png" class="img-responsive"> </div> </div> </div> </div> <div class="gallery"> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3>Family Support</h3> <p>Hope's Seed is here to support you.</p> </div> <div class="col-sm-4"> <h3>Volunteer Opportunities</h3> <p>Hope's Seed has many ways to volunteer.</p> </div> <div class="col-sm-4"> <h3>Giving Opportunities</h3> <p>Enriching the lives of Texas children who are medically fragile and terminally ill.</p> </div> </div> </div> </div> </body> </html>
2 answers
solution1
1 2017-02-13 05:15:47
Try use 'container-fluid'
<title>Hope's Seed</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<body>
<div class = "header">
<div class="jumbotron text-center">
<h1>Hope's Seed</h1>
<p>You're Not Alone</p>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="hopesseed.html">Hope's Seed</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">More</a></li>
</ul>
</div>
</div>
</nav>
<div class="Intro">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Enriching the lives of children who are medically fragile and terminally ill.</p>
</div>
<div class="col-sm-3">
<img src="Images/image1.png" class="img-responsive">
</div>
</div>
</div>
</div>
<div class = "gallery">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h3>Family Support</h3>
<p>Hope's Seed is here to support you.</p>
</div>
<div class="col-sm-4">
<h3>Volunteer Opportunities</h3>
<p>Hope's Seed has many ways to volunteer.</p>
</div>
<div class="col-sm-4">
<h3>Giving Opportunities</h3>
<p>Enriching the lives of Texas children who are medically fragile and terminally ill.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Live demo - https://jsfiddle.net/f39wurmn/1/
solution2
0 2017-02-13 04:29:11
Hope this helps
set margin:0 for body in css. Some browsers has a default margin
body
{
margin:0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.