Problem With Page structure and page width

Hi, I’m new to sage and I’ve faced a problem which has made me really confused.
I wanted to make a static page which has some post sliders and brief news about my self, so I started to insert my codes in front-page.php but every thing was a bit smaller than full width. I searched into the codes and figured out that I have to mage some changes in my base.php but again I have no good result.


use Roots\Sage\Setup;
use Roots\Sage\Wrapper;


<!doctype html>
<html <?php language_attributes(); ?>>
  <?php get_template_part('templates/head'); ?>
  <body <?php body_class(); ?>>
    <!--[if lt IE 9]>
      <div class="alert alert-warning">
        <?php _e('You are using an <strong>outdated</strong> browser. Please <a href="">upgrade your browser</a> to improve your experience.', 'sage'); ?>
<?php putRevSlider( "mood" ) ?>
<main class="main">
          <?php include Wrapper\template_path(); ?>
        </main><!-- /.main -->
	<div class="wrap" roll="document">
        <?php if (Setup\display_sidebar()) : ?>
          <aside class="sidebar">
            <?php include Wrapper\sidebar_path(); ?>
          </aside><!-- /.sidebar -->
        <?php endif; ?>



Description: Header was Fully width so I added my rev slider in base and it also was ok but when I write any thing in any div like row or container the problem occurs again


<?php get_template_part('templates/page', 'header'); ?>
<div class="wrap">
		<div class="row">
			<div class="twelve columns center"  style="background-color:#ffffff">

<a href="#home"><i class="fa fa-home icon small"></i></a>
<a href="#home"><i class="fa fa-home icon medium"></i></a>
<a href="#home"><i class="fa fa-home icon"></i></a>
<a href="#home"><i class="fa fa-home icon big"></i></a>



the result:

the white bar is not Full width

whats the problem
thank you so much

Well, I’m not sure what “twelve columns center” is - you’re using Bootstrap, right?

Assuming you are using Bootstrap, you’re missing a container.

Columns (.col-*) live in rows (.row). You can’t have a column without a row.
Rows live in a container. (.container or .container-fluid). You can’t have a row without a container.

Also, you can’t nest containers.

So - -




This is old, but a good read on how the Bootstrap grid is set up, and why it works.

In your case, you would just simply need to enclose your row in a container.

<div class="container">
  <div class="row">
    <div class="col-sm-12">

      <!-- **** Your Stuff  Here **** -->

    </div> <!-- end column -->
  </div> <!-- end row -->
</div><!-- end container -->