Problem With Page structure and page width

sage
1

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.
base.php:

    <?php

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="http://browsehappy.com/">upgrade your browser</a> to improve your experience.', 'sage'); ?>
      </div>
    <![endif]-->
    <?php
      do_action('get_header');
      get_template_part('templates/header');
    ?>
<?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; ?>



	</div>

    <?php
      do_action('get_footer');
      get_template_part('templates/footer');
      wp_footer();
    ?>

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

front-page.php:

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

				<p>test</p>
<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>
			</div>

		</div>

	</div>

the result:

Screen_Shot_2015_11_03_at_21_34_44.png1366×768 232 KB

the white bar is not Full width

whats the problem
thank you so much

2

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 - -

container

row

column’

This is old, but a good read on how the Bootstrap grid is set up, and why it works.
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-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 -->