I've created a 16 column layout with 960gs with a div class="grid_12" (main) and after that grid_4 (right) (12+4...)
Inside that grid_12 I wanted a three column style (3 pcs. grid_4). But the grid_4 boxes don't fit inside the grid_12, the last box drop into a second row.
Shouldn't the 960gs framework be able to do this layout for me, have i missed anything?
Thanks in advance.
<div class="container_16">
...
<div id="main" class="grid_12">
<div class="grid_12">
<div class="grid_4"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
</div>
<div id="right" class="grid_4">
</div>
</div>
...
</div>
Found out that I needed to add alpha and omega classed to the first and last grid_4 box. Now it works.
<div id="main" class="grid_12">
<div class="grid_4 alpha">
</div>
<div class="grid_4">
</div>
<div class="grid_4 omega">
</div>
</div>
Related
I am trying to create a css grid inside another css grid look like it's parent grid. The size of the inner grid is smaller by 20 and 100 pixels but it won't align like the parent grid. Please check out the codepen. Thank you.
CODEPEN: https://codepen.io/centem/pen/oNvZLgP?editors=1100
<div class="grid-page">
<div class="header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-grid">
<div class="inner-header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="inner-menu">MENU</div>
<div class="inner-content">
CONTENT
</div>
<div class="inner-footer">FOOTER</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>
Replace the class inner-grid with the inner-grid-page. No CSS is defined for inner-grid class but I can see grids defined for inner-grid-page. Let me know if it works
<div class="grid-page">
<div class="header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-grid-page">
<div class="inner-header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="inner-menu">MENU</div>
<div class="inner-content">
CONTENT
</div>
<div class="inner-footer">FOOTER</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>
I have bootstrap grid
<div class="container">
<div class="row">
<div class="col-sm-1">Column 1</div>
<div class="col-sm-2">Column 2</div>
<div class="col-sm-1">Column 3</div>
</div>
<div ng-repeat="Item in Items">
<div class="row">
<div class="col-sm-2">{{Item.Field1}</div>
<div class="col-sm-4">{{Item.Field2}}</div>
<div class="col-sm-6">{{Item.Field3}}</div>
</div>
</div>
</div>
It should display a 3-column grid, instead the columns are displayed as rows. What am I doing wrong?
So your first row is the like the "header" and the next row are the records. Your header is 1-2-1 but your records are 2-4-6 => it won't line up. To keep it from stacking even on small screens you can do col-xs-x instead.
<div class="row">
<div class="col-xs-3">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-3">Column 3</div>
</div>
<div ng-repeat="Item in Items">
<div class="row">
<div class="col-xs-3">{{Item.Field1}</div>
<div class="col-xs-6">{{Item.Field2}}</div>
<div class="col-xs-3">{{Item.Field3}}</div>
</div>
</div>
I'm assuming you want them to always line up. Bet way to do that will be this:
<div class="container">
<div class="row">
<div class="col-sm-2">Column 1<br>
{{Item.Field1}}
</div>
<div class="col-sm-2">Column 2<br>
{{Item.Field2}}</div>
<div class="col-sm-2">Column 3<br>
{{Item.Field3}}</div>
</div>
</div>
Alternatively, you can replace the br and wrap the elements in divs and display: block;
Working example here:
http://www.bootply.com/tb10AKqzM1
Having put in the code myself, it actually does work. It will put in rows when the viewport size is below the small viewing size (so xs, extra small size). If you want to view it on all viewing sizes then you would have to add xs instead of s to all your classes.
I'm trying to layout a page element using bootstrap 3 as it's base. I've been ok with most of the layout but I'm having trouble with a particular layout I'm trying to create.
Using the standard container > row > column approach the first row only contains an image, the second row a nav type panel which is meant to sit beneath the image. Instead it's appearing at the top.
Looking at it with chrome the first row appears to have no height, despite the image.
There's something I'm missing or don't understand here.
Update
The image in the main container is absolutely positioned with -50% top to handle an oversized image. The main container is set to relative.
Here's an image of what I'm trying to create (90% there)
I've created a jsfiddle here: http://jsfiddle.net/longestdrive/vt24K/
the html is below:
<div id="hole-stats-modal">
<div class="container" >
<div class="row">
<div class="col-sm-12">
<!-- image -->
<img src="http://downssiteassets.s3.amazonaws.com/content/articles/th_downs%20golf%20503.JPG" class="img-responsive course-image" />
</div>
</div>
<!-- hole stat panel -->
<div id="hole-stats-panel" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- side stats -->
<h3>Hole Detail</h3>
<p>Content for this panel</p>
</div>
</div>
</div>
</div>
<!-- hole text info -->
<div id="course-guide" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-1">
<h3 id="hole-n-2" >3</h3>
</div>
<div id="hole-description" class="col-sm-8 ">
<p>Some text here</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="hole-navigation">
<div class="container">
<div class="row">
<ul class="unstyled list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The hole stat panel and hole info panel correctly appear where I expect them to but the nav panel does not
Any help appreciated
I think you had way more containers and rows than are needed. I recreated what you are looking for using a lot less elements.
you really only need two rows, one for the image and one for the bottom nav.
jsFiddle Demo
<div id="hole-stats-modal">
<div class="container">
<div class="row">
<div class="col-sm-12"> <!--optional-->
<div class="image"> <!-- Relative Pos with image as background -->
<div class="right-overlap transparent-back">...</div><!-- Absolute Pos to right-->
<div class="bottom-overlap transparent-back">...</div><!-- Absolute Pos ro bottom-->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"><!--optional-->
<div class="hole-navigation">
</ul></ul> <!--Nav-->
</div>
</div>
</div>
</div>
</div>
Problem:
Trying to create a layout using Bootstrap 3 that consist of two columns on the left of the page and one main column to the right of the two columns. The two columns on the left should be on top of each other.
Code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 1</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 2</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Main column</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 280px;"></div>
</div>
</div>
</div>
</div>
</div>
Output:
Current code produce two columns next to each other on top the main column.
Desired output:
You should use a div with class .col-sm-4 and .col-sm-8 respectively as the parent div for the two column layout you want to use and then create the desired widgets within those divs.
Check out my JSFiddle: http://jsfiddle.net/nJtX9/9/
Please make sure to enlarge the results window to see the correct layout. Otherwise it will stack the div containers for responsive purposes.
You are using 2 col-md-4 meaning is taking 8 columns already + using col-md-8 = 16 columns, bear in mind bootstrap can contain 12 columns per row,
so the way to go around this is use col-md-2 instead of col-md-4
Hope i make this clear.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:gray">
<div class="row" style="background-color:aliceblue">
<h1>col1----row1</h1>
</div>
<div class="row">
<h1>col1----row2</h1>
</div>
</div>
<div class="col-sm-6" style="background-color: aqua">
<h1>col2-----row<br />col2---row<br />col2---row</h1>
</div>
</div>
</div>
I have a layout with two columns, and in the first column I have sub columns. So something like:
<div class="row">
<div class="span8">
<div class="row">
<div class="span1"></div>
<div class="span4"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
</div>
</div>
<div class="span4">
</div>
</div>
When the page is resized to be smaller, I would like the two outer columns to stack on top of each other, but not the inner columns as they always need to be on the same line i.e. once the page is resized below the width of the span8 it then introduces a horizontal scroll bar.
Is this possible?
<div class="row">
<div class="span8 container-fluid">
<div class="row-fluid">
<div class="span1 offset2"></div>
<div class="span4"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
</div>
</div>
<div class="span4">
</div>
</div>
If you use a fluid layout inside of span8, the content in it should stay on the same line.
And, I don't know if you're aware, but a row is always 12 columns, even if it's in a span8.
I hope you know what I mean. Sorry for my bad english.