• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 76
  • Last Modified:

seven column bootstrap layout

1. how would one create a seven column bootstrap layout?

2. how can i detect when columns have decreased to 1 column?

thanks
0
dgrafx
Asked:
dgrafx
  • 2
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The key is everything needs to add up to 12.  At minimum you can everything col-xs-1.  Or adjust some columns wider as long as they add up to 12

http://jsbin.com/buqoli/1/edit?html,output
  
<div class="row">
<div class="col-xs-2 red">one</div>  
  <div class="col-xs-1 blue">two</div>  
  <div class="col-xs-2 green">three</div>  
  <div class="col-xs-3 purple">four</div>  
  <div class="col-xs-1 black">five</div>  
  <div class="col-xs-2 red">six</div>  
  <div class="col-xs-1 purple">seven</div>
</div>  

Open in new window

But this goes against the reason to use bootstrap and you will see that 7 columns is too many for the xs size screen especially when you have some columns wider than col-xs-1.

The better way would be to make your seven columns for the next bigger size screen and let the xs go to one column.
http://jsbin.com/buqoli/2/edit
<div class="row">
  <div class="col-sm-2 red">one</div>  
  <div class="col-sm-1 blue">two</div>  
  <div class="col-sm-2 green">three</div>  
  <div class="col-sm-3 purple">four</div>  
  <div class="col-sm-1 black">five</div>  
  <div class="col-sm-2 red">six</div>  
  <div class="col-sm-1 purple">seven</div>  
</div>

Open in new window

or go to 2 columns for the xs size
http://jsbin.com/buqoli/3/edit
<div class="row">
  <div class="col-xs-6 col-sm-2 red">one</div>  
  <div class="col-xs-6 col-sm-1 blue">two</div>  
  <div class="col-xs-6 col-sm-2 green">three</div>  
  <div class="col-xs-6 col-sm-3 purple">four</div>  
  <div class="col-xs-6 col-sm-1 black">five</div>  
  <div class="col-xs-6 col-sm-2 red">six</div>  
  <div class="col-xs-6 col-sm-1 purple">seven</div>  
</div>

Open in new window


The columns change based on media queries that have break points at <768px, >768px, >=992px, and >=1200px http://getbootstrap.com/css/#grid 

The classes will work on their own so there is no reason to do any detection.  If you need to do something in javascript then you can detect the width using jquery or javascript.  In jquery https://api.jquery.com/width/ 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demo</title>
  <style>
  body {
    background: yellow;
  }
  button {
    font-size: 12px;
    margin: 2px;
  }
  p {
    width: 150px;
    border: 1px red solid;
  }
  div {
    color: red;
    font-weight: bold;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="getp">Get Paragraph Width</button>
<button id="getd">Get Document Width</button>
<button id="getw">Get Window Width</button>
<div>&nbsp;</div>
<p>
  Sample paragraph to test width
</p>
 
<script>
function showWidth( ele, w ) {
  $( "div" ).text( "The width for the " + ele + " is " + w + "px." );
}
$( "#getp" ).click(function() {
  showWidth( "paragraph", $( "p" ).width() );
});
$( "#getd" ).click(function() {
  showWidth( "document", $( document ).width() );
});
$("#getw").click(function() {
  showWidth( "window", $( window ).width() );
});
</script>
 
</body>
</html>

Open in new window

0
 
dgrafxAuthor Commented:
Thanks
Q: what does the xs or the md stand for as in col-xs-10?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
xs= extra small, sm = small, md=medium, lg = large.  The code below will render the div to be 50% on a extra small screen (6 columns out of 12) and it will be 16.6% wide on a small screen (2 columns out of 12).

 <div class="col-xs-6 col-sm-2 red">one</div>  

Open in new window


Read up on the how this works so it will be second nature to you.  This is the most important part of bootstrap http://getbootstrap.com/css/#grid
0
 
dgrafxAuthor Commented:
Thanks a lot - I appreciate it!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now