Full Width colour sections but not full width page content

Question

I am using Bootstrap but under the roots.io wordpress template using a 'wrapperless theme'

i am trying to achieve this http://roots.io/ - where there are sections of colour but the page content itself isn't full width.

the answer I have been given is to make the container class 100% - but this just makes all the content full width.

Im really stuck and ive been trying to figure this out for hours. - I know that sounds noobish and it is, but I can't get past this point.

all the page templates take their its style from base.php, code here

    <?php get_template_part('templates/head'); ?>
<body <?php body_class(); ?>>

  <!--[if lt IE 8]><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.', 'roots'); ?></div><![endif]-->

  <?php
    do_action('get_header');
    // Use Bootstrap's navbar if enabled in config.php
    if (current_theme_supports('bootstrap-top-navbar')) {
      get_template_part('templates/header-top-navbar');
    } else {
      get_template_part('templates/header');
    }
  ?>

  <div class="wrap container" role="document">
    <div class="content row">
      <div class="main <?php echo roots_main_class(); ?>" role="main">
        <?php include roots_template_path(); ?>
      </div><!-- /.main -->
      <?php if (roots_display_sidebar()) : ?>
        <aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
          <?php include roots_sidebar_path(); ?>
        </aside><!-- /.sidebar -->
      <?php endif; ?>
    </div><!-- /.content -->
  </div><!-- /.wrap -->

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

</body>
</html>

so Im just not sure how to get past it in any of the page templates

score 3 · Accepted Answer · edited May 23 '17 at 10:31

About the first part of your question: "100% width colored parts".

Cause Bootstrap use the box-sizing: border-box model every html-element gets 100% width of its parent by default. So wrap your .container div's in other element (div, header, etc). This wrapper is a direct child of the body and gets 100% width. See: http://bootply.com/87196

<header role="banner" class="banner">
  <div class="container" style="background-color:red;">
    Header example
   </div>
</header>

<div style="background-color:blue;">Elements get 100% width by default</div>

The second part about your page templates. The code you show use the get_template_part(). This function is a core function of WordPress. See http://codex.wordpress.org/Function_Reference/get_template_part#Using_loop.php_in_child_themes. You will find where your templates should be located. But i think read http://roots.io/roots-101/#theme-templates first.

score 0 · Answer 2 · answered Oct 12 '13 at 06:52

Thank you, I had a few solutions offered to me yesterday also, in case anyone else looks at this.

my own was simply to remove the .container class from the base.php file. - this just stopped the content of every page being constrained in a container by default. - this way I was able to add sections to the page at full browser width, and add .container inside them to constrain the actual content.

lines 16 and 17 of original base.php

<div class="wrap <?php if ( ! is_front_page() ): ?>container<?php endif; ?>" role="document">
    <div class="content <?php if ( ! is_front_page() ): ?>row<?php endif; ?>">

In app.less

.home .main {
   padding: 0;
}

Then add your sections like so:

<section class="semantic-section-class">  
   <div class="container">
      <!-- your content -->
   </div>
</section>

Full Width colour sections but not full width page content

2 Answers2