user6321125 user6321125 - 6 months ago 60
CSS Question

asp mvc default application generated remove white spaces

So when a mvc project is genereted it has his default master page and partial views like the register and login views.The problem is that the master page is genereted with default white spaces on the left side of the page and on the right side.My question is : Where is that margin space code written and how to remove it?As simple as it looks I just can't seem to find it.

Site.css is left with its default values:

body {
padding-top: 50px;
padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}


And my indes.cshtml is alsaw pretty simple:

@{
ViewBag.Title = "Home Page";
}

<div id="mapa">
<h1>ASP.NET</h1>
</div>

<div id="content">
<div class="main-nav-wrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</div>
</div>


enter image description here

I tried adding margin-left:0 and margin-right:0 to the body-content class but it just moves the child page to the left and maintains the size of it.

Answer

The whitespace is there because, by default, an ASP.NET MVC project created through Visual Studio uses the Bootstrap CSS Framework. I recommend you learn to use it - it will make your front-end development magnitudes easier.

Addressing your question, you'll find that the content with the "whitespace" either side is nested in a div which has the class container. Removing this class and using container-fluid will remove the whitespace and make the container full-screen-width instead.

Don't try to override the margin set on containers by Bootstrap, you'll ruin Bootstrap's styling elsewhere.

Comments