I am trying to add bunch of elements inside a div using bootstrap
I have something like
<div class="row">
<div class="col-xs-8">
//contents
</div>
<div id="forms" class="col-xs-4">
<div class="title">My first app</div> //no stretch
<div class="form-group"> //stretch to the edge
//contents
</div>
<div class="form-group"> //stretch to the edge
//contents
</div>
</div>
</div>
My problem is the form-group has default margin-left:-15px and margin-right:-15px css. so the form looks so stretch to the edge of the forms div.
I can manually set margin:0 to override the css for those forms, but I am not sure if that's the best practice in bootstrap. Can anyone help me about it? Thanks!
Use the container class
Bootstrap:
container
row(s)
col(s)
When you skip one lvl you are most likely to get stuck on the margins
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
<div class="container">
<div class="row">
<div class="col-xs-8">
//contents
</div>
<div id="forms" class="col-xs-4">
<div class="title">My first app</div> //no stretch
<div class="form-group"> //stretch to the edge
//contents
</div>
<div class="form-group"> //stretch to the edge
//contents
</div>
</div>
</div>
</div>
Related
I would like to be able to divide a bootstrap gid even more. Without to much hassle or workarounds. What is the best way of creating column 1/24 of a grid.
Fiddle to understand better what I mean: https://jsfiddle.net/Lmm1ra7d/
<div class='row'>
<div class="col-xs-8">8/12</div>
<div class="col-xs-4">4/12</div>
</div>
<br/>
Now I need to transform this to a 0.5/12 => 1/24 What would be the best approach without a hacky fix. Also not to break the responsiveness.
This is the smallest column bootstrap can make 8.3333%
<br/>
<br/>
<div class='row'>
<div class="col-xs-1">1/12</div>
<div class="col-xs-11">11/12</div>
</div>
<br/>
What I really want would be 4%
<br/>
<br/>
<div class='row'>
<div style="width:3%; display: inline-block;">1/24</div><div style="width:96%;display: inline-block;">23/24</div>
</div>
You can just nest another column setup in the col-*-1. If the padding on the nested row/columns is unwanted you can just add a class to override the padding.
<div class="row">
<div class="col-xs-1">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
</div>
you can nest a row in a column, so basically you divide your main row in other rows. For example
<div class="row">
<div class="col-sm-3">
<!-- now you have 1/4 -->
<div class="row">
<div class="col-sm-3">
<!-- now you have 1/4 of 1/4 -->
</div>
</div>
</div>
</div>
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
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 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>
I'd have two "sections" in which I am using the bootstrap 3 scaffolding to style. I am having a hard time figuring out how I might have these maintain their column spacing while still be centered on the middle of the page. For example right now it is
<content><content> ---<space>---
and i want
---<space>--- <content><content> ---<space>---
Here is what i've got.
<div class=".container-fluid" id="aboutContent">
<div class="col-md-3">
<img src="../imgs/pic.jpg" alt="Joe Brunett" id="aboutPicture"/>
</div>
<div class="well col-md-4" id="desc">
<p> text<p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
</div>
Offsets can be used to center a div but remember that it'll work only for even columns
<div class="col-md-8 col-md-offset-2"></div>
You can even change the break-point by replacing
<div class="col-md-6 col-md-offset-3"></div>
with
<div class="col-sm-6 col-sm-offset-3"></div>