I'm attempting to correctly vertically align offsetting elements using Twitter Bootstrap with a fluid grid. (Note: Grid is customized to 30 columns)
Considering the red boxes, this is the attempted div placement: http://imgur.com/IkB2G
This is the current actual placement with my code: http://imgur.com/oJ2mG
Here is the code I am using. Unsure how to get the lower red box to move into the empty space above it, per the images.
<div class="container-fluid nomargin">
<div class="row-fluid span30 nomargin"><div style="height:10px"></div></div> <!-- Vertical spacing between menu and content-->
<div class="row-fluid">
<div class="span4"></div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
<div class="span6 white-box">
<!--Body content-->
<div style="height:300px"></div>
</div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
</div>
You need to think of it as 2 columns, and in the left column you have nested rows. I can't make out the proper sizes from the code you posted. But hopefully this code will give you some inspiration.
<div class="row">
<div class="span18">
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
</div>
<div class="span12">
This is the content on the right side.
</div>
</div>
Related
I am trying to adapt a layout on Bootstrap that I got from the designer. Two columns in the content has a small spacing, that I couldn't achieve with direct column-spacing (as it gives too much gap). Thus, I tried wrapping everything into a row and adding sub-columns inside my main columns. Here in the code, it's more clear:
<div class="container">
<div class="col-md-12 banner"></div>
<div class="row">
<div class="col-md-8">
<div class="col-md-12 leftSide">
</div>
<div class="col-md-12 leftSide">
</div>
</div>
<div class="col-md-4 rightSide">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Now the spacing seems good but as I wrapped it in a row (I think), the right panel overflowed more then the banner.
It can be seen more clear on the fiddle: http://www.bootply.com/gMBrLvaK5C
The problem is the 'rightSide' panel.
How can I keep that spacing between 'leftSide' and 'rightSide', and fix the overflowing of the right column (because the spacing gets too much if I try achieving spacing with columns)? Or what is the best way to achieve that?
this is my personal solution, instead of add a class on the columns, create a div inside of a column, then you can place a div.banner and div.block like my example:
http://www.bootply.com/PEIiDnp9VD
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="banner"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="block"></div>
</div>
<div class="col-md-4">
<div class="block"></div>
</div>
</div>
</div>
if you want less space between the columns you can simply override Bootstrap col-md-* class by adding a class on the columns changing the padding left and right.
First of all, you need to follow proper wrapping of rows and columns. If you want consistency you need to make sure all columns are wrapped into a row.
<div class="row">
<div class="col-md-8 leftSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-4 rightSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Then apply custom margins and styling to elements inside of the columns, not columns themselves.
http://www.bootply.com/g6eLHRd1tH
I have an angular application which included UI-Bootstrap and I have an issue with responsiveness.
Index.html:
<body>
<div ng-include="'partials/common/loginHeader.html'" ng-show="!userInfo"></div>
<div ng-include="'partials/common/userHeader.html'" ng-show="userInfo"></div>
<div class="main">
<div class="main-inner">
<div class="container" ui-view>
</div>
</div>
</div>
<!--<div ng-include="'partials/common/footer.html'"></div>--> <!-- footer -->
</body>
</html>
Partial view:
<div class="row">
<div class="span6">
<div class="widget widget-nopad">
<div class="widget-header">...Content inside DIV...</div>
<div class="widget-content">...Content inside DIV...</div>
</div>
</div>
<div class="span6">
<div class="widget>...Content inside DIV...</div>
<div class="widget widget-table action-table">
<div class="widget-header">...Content inside DIV...</div>
<div class="widget-content">...Content inside DIV...</div>
</div>
</div>
</div>
I am just showing the DIV structure in my partial view. The webpage looks normal in normal laptop view. But with increase in height and width of the screen, the content inside the <div class="row"> remains same and leaves a huge space outside it blank.
How can i alter the <div class="row"> so that it will stretch and make use of the blank space inside <div class="main">?
I will add more pictures to get a clear understanding of DIV's (DIV's have been highlighted in blue)
Div.main-inner :
Div.row :
In normal laptop resolution :
Is there any way that i achieve this design but still using the bootstrap griding system?
I want to make that design. In the sides of the div there should be an accordion like div so that i can click to close the div. I tried using col-md-5 but the grid is to much space just for side panel like. I just want a small div in right side and left side.
What about putting the text <div> inside the <div class="col-md-6">
It would be something like this :
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-1">
<!-- text -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-offset-11 col-md-1">
<!-- text -->
</div>
</div>
</div>
</div>
</div>
I have a container that contains two rows. I want there to be a border around the container (not between the two rows). When I tried to set a border around the container, it gave me a border between the two rows - not sure what I should be doing differently here.
<div class="container-fluid" style="border:1px solid #cecece;"
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Text here </div>
</div>
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Buttons here </div>
</div>
</div>
Your code is almost perfectly fine.
Look at first line of it - > is missing.
See working example below.
http://jsfiddle.net/864cw2fn/
<div class="container-fluid" style="border:1px solid #cecece;">
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Text here </div>
</div>
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Buttons here </div>
</div>
</div>
<div class="container-fluid table-bordered">
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Text here </div>
</div>
</div>
I am really struggling with twitter bootstrap. I have the following spans, which add up to 12, yet the thrid item appears on a separate line.
<div class="container">
<div class="row">
<div class="span6 offset6">
<div class="span2">Contact</div>
<div class="span2">About Us</div>
<div class="span2">Blog</div>
</div>
</div>
</div>
Here is what I get...
Your typo is span 6, it should be span6
<div class="span 6 offset6">
Should be:
<div class="span6 offset6">
Not doing so will place a small div to the left of your three span3's, thus moving them a bit sideways.
Updated: You will need to place the div's in their seperate row or row-fluid div's to align them properly.
<div class="row">
<div class="span6 offset6"></div>
</div>
<div class="row">
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>