Home How can i make full width responsive div section using bootstrap?
Reply: 2

How can i make full width responsive div section using bootstrap?

Drew
1#
Drew Published in 2018-01-12 19:34:18Z

How can I make the yellow section fullwidth? I tried section and div container fluid within bootstrap and no luck. I think there are fixed dimensions in the parent css that I can’t override. I just want to make a responsive div section fullwidth so I can use a background color or image background. Thanks in advance.

Page in question: http://dev.dragonscaletech.com/our-story/

<div class="container" style="background-color: yellow;">
<div class="row">
<div class="col-12 text-center">
  <h2>Reaching the Root of the problem..</h2>
  <h4>Scrubbing your back daily has always been so uncomfortable & 
 unrealistic, until now!</h4>
  <p>The fact that it allowed easy & hands-free access to the absolute hardest to reach area of the human body, meant that we needed to make it count & go after the root of the problem.</p>
  <p>We constantly neglect our back when we shower.</p>
  <p>Every other solution to this widespread hygiene shortcoming requires a full range of arm & body mobility, which frankly, not everyone has.</p>
  <p>Something as common as having sore muscles from last night's work out or even having too much muscle, can limit you from using any of these "alternatives-on-a-stick". Age, injury & disability can make it impossible.</p>
  <p>Once we understood the core issue, we got to work.</p>
</div>

Jitendar Kumar
2#
Jitendar Kumar Reply to 2018-01-12 19:57:54Z

Bootstrap container does have 15px padding and row have - 15px margin. So either add class row to your section or give - 15px margin to your yellow section. Hope that will work or try question with code next time for quick response.

Drew
3#
Drew Reply to 2018-01-12 20:58:52Z

Found this code after a ton of searching on google. Fixed my issue.

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
 }

https://coderwall.com/p/hkgamw/creating-full-width-100-container-inside-fixed-width-container

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.323862 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO