100 width Twitter Bootstrap 3 template

Question

I am a bootstrap newbie and I have a 100  wide template that I want to code with bootstrap  The first column begins at the left corner and I have a Google map the stretches to the rightmost  I thought I could do this with container-fluid class  but that doesn t seem to be available any longer  I have no idea how to achieve that layout with bootstrap 3  I am using the Geometry PSD template from themeforest  the link here if you want to see the layout   http   themeforest net item geometry-design-for-geolocation-social-networkr 4752268

User · Answer

This is the complete basic structure for 100% width layout in Bootstrap v3.0.0. You shouldn't wrap your <div class="row"> with container class. Cause container class will take lots of margin and this will not provide you full screen (100% width) layout where bootstrap has removed container-fluid class from their mobile-first version v3.0.0.

So just start writing <div class="row"> without container class and you are ready to go with 100% width layout.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Basic 100% width Structure</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
  <script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
</style>
</head>
<body>
    <div class="row">
        <div class="col-md-3 red">Test content</div>
        <div class="col-md-9 green">Another Content</div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

To see the result by yourself I have created a bootply. See the live output there. http://bootply.com/82136 And the complete basic bootstrap 3 100% width layout I have created a gist. you can use that. Get the gist from here

Reply me if you need more further assistance. Thanks.

User · Answer

For Bootstrap 3  you would need to use a custom wrapper and set its width to 100     container-full     margin  0 auto    width  100       Here is a working example on Bootply  If you prefer not to add a custom class  you can acheive a very wide layout  not 100   by wrapping everything inside a col-lg-12  wide layout demo   Update for Bootstrap 3 1  The container-fluid class has returned in Bootstrap 3 1  so this can be used to create a full width layout  no additional CSS required     Bootstrap 3 1 demo

User · Answer

Using Bootstrap 3 3 5 and  container-fluid  this is how I get full width with no gutters or horizontal scrolling on mobile  Note that  container-fluid was re-introduced in 3 1   Full width on mobile tablet  1 4 screen on desktop   lt div class  container-fluid  gt   lt  -- Adds 15px left right padding -- gt      lt div class  row  gt   lt  -- Adds -15px left right margins -- gt       lt div class  col-md-4 col-md-offset-4  style  padding-left  0  padding-right  0  gt   lt  -- col classes adds 15px padding  so remove the same amount -- gt         lt  -- Full-width for mobile -- gt         lt  -- 1 4 screen width for desktop -- gt       lt  div gt     lt  div gt   lt  div gt    Full width on all resolutions  mobile  table  desktop    lt div class  container-fluid  gt   lt  -- Adds 15px left right padding -- gt     lt div class  row  gt   lt  -- Adds -15px left right margins -- gt       lt div gt         lt  -- Full-width content -- gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

You re right using div container-fluid and you also need a div row child  Then  the content must be placed inside without any grid columns  If you have a look at the docs you can find this text         Rows must be placed within a  container  fixed-width  or  container-fluid  full-width  for proper alignment and padding    Use rows to create horizontal groups of columns       Not using grid columns it s ok as stated here         Content should be placed within columns  and only columns may be immediate children of rows       And looking at this example  you can read this text      Full width  single column  No grid classes are necessary for full-width elements    Here s a live example showing some elements using the correct layout  This way you don t need any custom CSS or hack

User · Answer

In BOOTSTRAP 4 you can use   lt div class  row m-0  gt  my fullwidth div  lt  div gt        if you just use a  row without the  m-0 as a top level div  you will have unwanted margin  which makes the page wider than the browser window and cause a horizontal scrollbar

[html] 100% width Twitter Bootstrap 3 template

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to layout

Examples related to twitter-bootstrap-3