Remove Margins in Homepage

1

Hello, I created a separate homepage file.

Is there way to remove the margins on both sides and in between the navigation bar? I still need it to be responsive though. See attached screenshot.

2

You did not give us much info. Go to
http://getbootstrap.com/getting-started/
see Examples (their HTML) and use one.

3

Are you looking to do this only on the home page?

To remove the bottom margin add the following CSS to app.less:

.navbar {
   margin-bottom: 0;
}

/*or just to target the home page */
.home .navbar {
   margin-bottom: 0;
}

The standard theme wrapper (base.php) adds a .container class to to the .wrap div. Bootstrap sets a max-width on all containers depending on the viewport width. If you would like to make all .container elements take up 100% of the browser width then it is as simple as:

.container {
   max-width: 100% !important;
}

I do not suggest doing this unless you are ready to add padding and/or max-wdith to many different elements to provide a nice experience. Bootstrap set these values for a reason.

I would suggest rewriting the HTML to conform to your needs. If you take a look at the http://roots.io home page you will see that to achieve the full width background colours of the various sections of this page, they had to remove the .container class from the the .wrap div (mentioned above) and add a new child .container div to each section to wrap and center the content and provide the auto margins.

The HTML for your home page might look something like this then:

<section class="intro-slider">...</div>
<section class="main-content">
   <div class="container">
      *Page content*
   </div>
</section>

You probably don’t want every page to look exactly like this so you should create a new wrapper for the home page. There are ways to manually override the wrapper if you look through Roots 101 docs or you can try out the excellent Roots Wrapper Override plugin (http://roots.io/plugins/roots-wrapper-override/) which will make it much easier to use different base templates

With the plugin, all you have to do is copy base.php and name is something like base-home.php make your html customizations and optionally add the following comment to the top so that the plugin shows the ‘nice name’ in the drop down select

<?php
/*
Base Template: Custom home page
*/
?>

Let me know if you need any more help.

Tamara

4

Thank you for the useful replies. It is basically for homepage only. I manage to put a conditional statement inside base.php to detect the pages. It will show slider if homepage without the container wrap class.