My knowledge of CSS is quite limited and I am fairly new to it. In my MVC application, I am using a theme that relies on Bootstrap.
In the _layout view of my application, I have the following code:
<div class="container body-content">
@Html.Partial("_alerts")
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year -myApp</p>
</footer>
</div>
I assume that all views are wrapped by the container body-content class, which works well for most content as it does not display in full width.
However, my homepage (landing page) contains a slider, and due to the container body-content class, it does not display in full width. Here's how my home page starts:
<div class="fullwidthbanner-container" style="overflow:visible">
<div class="fullwidthbanner">
<ul>
<!-- Slide 1 -->
<li data-transition="slideright">
...
...
...
</div>
And here is the CSS class for fullwidthbanner-container:
.fullwidthbanner-container {
width: 100%!important;
max-height: 550px!important;
position: relative;
padding: 0;
overflow: hidden!important;
margin:0px 0 0px;
}
How can I prevent my home page from being wrapped by container body-content? Any guidance would be greatly appreciated, and feel free to ask if more details are needed.