I have 6 columns without problem inside of div but i want to add more columns. I can't add more columns properly because of gaps between columns.I read something about margins but i couldn't do it. So how can i reduce spaces between columns? And is there anyway to resize width of columns according to number of columns? Here is my HTML code(sample for 2 columns) :`
<div class="row-fluid hideInIE8 circleStats">
<div class="span2" onTablet="span4" onDesktop="span2">
<div ID="ID1" class="circleStatsItemBox red">
<div ID="Mach_Name_1" class="header">1</div>
<span class="percent"></span>
<div class="circleStat">
<div id="g1"></div>
</div>
<div id="f1" class="footer">
<span class="number">hours</span>
</div>
</div>
</div>
<div class="span2" onTablet="span4" onDesktop="span2">
<div ID="ID1" class="circleStatsItemBox red">
<div ID="Mach_Name_2" class="header">2</div>
<span class="percent"></span>
<div class="circleStat">
<div id="g1"></div>
</div>
<div id="f1" class="footer">
<span class="number">hours</span>
</div>
</div>
</div>
</div>
Related
This is my HTML code :
<div class="container">
<div class="row">
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/300x600">
</div>
</div>
<div class="row">
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
</div>
</div>
This is the output :
https://jsfiddle.net/bnxxkLzv/
After the right banner that has height of 600 pixels , second row is starting. What i want to achieve is to make second row start below the first on the left to 300x600 banner , by lets say some fixed margin of 15px . How can this be achieved?
Here is an idea how to stack 2 rows side by side
Design the page as columns and it will be easy to stack it side by side just like nested columns
Look at this DEMO
To add margin you can declare a class wherever you deem fit and give property value
This is the starting point:
http://www.bootply.com/r88hL82f3m
<div class="container">
<div class="row">
<div class="col-xs-0 col-md-3">
</div>
<div class="col-xs-12 col-md-9 text-right">
<div id="id1">Div1 Div2</div>
</div>
</div>
</div>
I need Div1 and Div2 to split into two rows only for small screen and extra-small screen, meaning Div1 occupies first row and Div2 occupies second row.
While below bootply may look like a solution, it does not work because I don't want Div1 and Div2 to split up into columns on medium screen upwards - I want them to stay in one column on medium, large and extra-large screen.
http://www.bootply.com/RkxKSdYZ2F
Use visible-* and hidden-* classes to use two different containers.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 visible-xs visible-sm">
<div class="id1">Div1</div>
<div class="id2">Div2</div>
</div>
<div class="col-xs-12 hidden-xs hidden-sm">
<div class="id1">Div1 Div2</div>
</div>
</div>
</div>
This isn't very need, but it does the trick
<div class="container">
<div class="row">
<div class="col-xs-0 col-md-3">
</div>
<div class="col-xs-12 col-md-9 text-right">
<div id="id1" class="visible-md visible-lg col-md-12">Div1 Div2</div>
<div id="id1" class="visible-xs visible-sm col-xs-12">Div1</div>
<div id="id1" class="visible-xs visible-sm col-xs-12">Div2</div>
</div>
</div>
</div>
bootply
I'm trying to bulid grids like the photo below
IMG LINK: http://postimg.org/image/qo3b4nof1/
But i'm getting the DIV E in almost next to the D-DIV
here's my code
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="col-md-1">A</div><br/>
<div class="col-md-1">B</div><br/>
<div class="col-md-1">C</div>
</div>
<div class="col-md-11">D<br/>
<div class="col-md-1">E</div>
</div>
</div>
</div>
The break-lines i added because DIV-A and DIV-B become one piece without breaklines.
is it better to do it with table ?
You do not need to use container and row with bootstrap 3.*
I changed you code to match the provided screenshot, see this http://jsfiddle.net/Sd2zw/ .
I just use xs columns because the small screen of jsfiddle, you can replace it back by md :
<div>
<div class="col-xs-1">
<div class="col-xs-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<span class="clearfix"></span>
</div>
<div class="col-xs-11">
<div class="col-xs-12 d-container">D</div>
<div class="col-xs-12">
<div class="col-xs-1">E</div>
<span class="clearfix"></span>
</div>
</div>
<span class="clearfix"></span>
</div>
Also, use some clearfix tags to clear the float.
When I set up my rows and columns like below, the row widths are slightly different. Suggestions?
EDIT: The row widths are not different. The column width does not fill the space. The fiddle has also been update to illustrate the problem.
<div class="container">
<div class="row" style="background: red;">
<div class="col-xs-4" id="logo">
content
</div>
<div class="col-xs-8">
</div>
</div>
<div class="row">
<div class="col-xs-7 col-xs-push-3">
</div>
<div class="col-xs-3 col-xs-pull-7">
</div>
<div class="col-xs-2" style="background: #000">
content
</div>
</div>
link to fiddle: http://jsfiddle.net/PRP89/4/
I'm using Bootstrap 2.3.2 for a website which contains an accordion element with one row within it. Accordion is span6 and I expected that the row will be able to contain two span3 elements but it can't. Here is my code simplified:
<div class="span6">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<p><h3>Some text here</h3></p>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="row">
<br />
<div class="span3 offer">
<div class="offer-wrap">
This one should be on the left
</div>
</div>
<div class="span3 offer">
<div class="offer-wrap">
This one should be on the right, but is BELOW
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I was able to make them appear next to each other, but only with some nasty CSS fiddling, which only works on my screen size.
Expected behaviour: http://imgur.com/O1z4mZN
Actual result: http://imgur.com/fP568Tl
If I put that row outside of accordion element everything looks perfect.
This has to do with the margins of both the accordion and the .span classes.
My tip: never use the .row class, always use the .row-fluid class. With .row-fluid, you can always split up the available width into 12 columns.
<div class="span6">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<p><h3>Some text here</h3></p>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<br />
<div class="row-fluid">
<div class="span6 offer">
<div class="offer-wrap">
This one should be on the left
</div>
</div>
<div class="span6 offer">
<div class="offer-wrap">
This one should be on the right, but is BELOW
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>