Increase width of bootstrap theme

By Ketanhrathod on 27 Aug 2014 at 12:07 UTC

Hello,
I am using bootstrap theme in drupal, and have created a slideshow in it. I want the slideshow to be full width of the screen. But the its only upto the themes width. Please help me to increase the width of bootstrap theme to screen width keeping it responsive

Comments

Im assuming you have HTML,

PiersShepherd commented 28 August 2014 at 16:25

Im assuming you have HTML, CSS and some php knowledge.

Im assuming you have created a slideshow using a view and have placed it into a region in the page.

Its very likely that this region is being printout out inside a div with class="container" somewhere. The container class is what sets the width of the page.

How if you want your slider to be full width, you are going to have to place the slider into a region that is outside the container div.

This is what your markup might look like at the moment

<body>
  <div class="container">
    <header></header>
    <nav class="navbar"></nav>
    <div>Your slider</div>
    <footer></footer>
  </div>
</body>

But this is what you need it to look like

<body>
  <div class="container">
    <header></header>
    <nav class="navbar"></nav>
  </div>

  <div>Your slider</div>

  <div class="container">
    <footer></footer>
  </div>
</body>

Note that the div with the slider inside it is not placed inside any elements with the 'container' class.

So....

1. Define a new region in your .info file. (clear cache)
2. Open page.tpl.php in your theme directory.
3. Alter your markup to reflect a similar structure above.
4. Print out your new region