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

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

This is the complete basic structure for 100  width layout in Bootstrap v3 0 0  You shouldn t wrap your  lt div class  row  gt  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  lt div class  row  gt  without container class and you are ready to go with 100  width layout      lt  DOCTYPE html gt   lt html gt     lt head gt       lt title gt Bootstrap Basic 100  width Structure lt  title gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt  -- Bootstrap -- gt       lt link rel  stylesheet  href  http   netdna bootstrapcdn com bootstrap 3 0 0 css bootstrap min css  gt    lt  -- HTML5 shim and Respond js IE8 support of HTML5 elements and media queries -- gt   lt  -- if lt IE 9  gt     lt script src  http   getbootstrap com assets js html5shiv js  gt  lt  script gt     lt script src  http   getbootstrap com assets js respond min js  gt  lt  script gt   lt   endif -- gt   lt style gt       red          background-color  red             green          background-color  green         lt  style gt   lt  head gt   lt body gt       lt div class  row  gt           lt div class  col-md-3 red  gt Test content lt  div gt           lt div class  col-md-9 green  gt Another Content lt  div gt       lt  div gt       lt  -- jQuery  necessary for Bootstrap s JavaScript plugins  -- gt       lt script src    code jquery com jquery js  gt  lt  script gt       lt  -- Include all compiled plugins  below   or include individual files as needed -- gt       lt script src  http   netdna bootstrapcdn com bootstrap 3 0 0 js bootstrap min js  gt  lt  script gt   lt  body gt   lt  html gt    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

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

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

[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