I am trying to understand how to reset boostraps columns.
If I did this:
Col-md-6
Col-md-4
How would I then create a new row where the columns start back at 1 and not 11.
I don't understand where (or if) I should use clearfix
Many thanks
David
If the third col-md is greater than 2, Bootstrap makes automatically a new row, because (4 + 6 + (x > 2)) > 12. Than you don't need a clearfix.
If the third column is col-md-1 or col-md-2, you can use a clearfix to clear the current flow and set the column into a new line:
<div class="row">
<div class="col-md-4">
col-md-4
</div>
<div class="col-md-6">
col-md-6
</div>
<div class="clearfix"></div>
<!-- New row -->
<div class="col-md-2">
col-md-2
</div>
</div>
New line automatically (4 + 6 + 6 = 16) > 12:
<div class="row">
<div class="col-md-4">
col-md-4
</div>
<div class="col-md-6">
col-md-6
</div>
<div class="col-md-6">
col-md-6
</div>
</div>
Clearfix can also be used to show columns only at a specific device width, for example:
<div class="clearfix visible-xs-block">
only visible in xs and a block element
</div>
Related
On my website www.asistaliavalencia.com, on the main page, I have a button bar. I would like to be able to arrange them so that they are all in the same row.
What html code can I add?
<div class="boxes-home">
**<section class="container">
<div class="row no-margin-negative justify-content-center">
<div class="col-sm-6 col-md-3 text-center pt-20-mb">**
<a href="https://asistaliavalencia.com/cuidadora-ancianos-valencia-por-horas/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-1.png">
<p>Cuidadora de mayores por horas</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<a href="https://asistaliavalencia.com/cuidadora-de-ancianos-interna-en-valencia/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-2.png">
<p>Cuidadora de mayores interna</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<a href="https://asistaliavalencia.com/servicio-acompanamiento-en-hospitales-valencia/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-3.png">
<p>Servicio de acompañamiento en hospitales</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<a href="https://asistaliavalencia.com/servicios-quiropracticos-ancianos-valencia/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-4.png">
<p>Servicios quiroprácticos</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<a href="https://asistaliavalencia.com/adaptacion-reforma-vivienda/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-4.png">
<p>Adaptación y reforma de la vivienda</p>
</div>
</a>
</div>
</div>
</section>
</div>
You can see here an image of my problem
bootstrap row can only consist of 12 "col"s, you have 5 elements with size 3, you need to change all col-3 to col-2 and they will fit the row
or you can delete all size used from bootstrap and set sizes via % values of width attribute
Reduce the gap by playing with first from...
<div class="col-sm-6 col-md-3 text-center">
to
<div class="col-sm-2 col-md-1 text-center">
Keep playing with the spacing. Possibly do for last two before adjusting all.
Also add a "width:225px" to
.boxes-home .box-home {
width:225px
}
in .css file.
Instead of the col-md-3 class for those divs, use col-md-2 for all of them, and add col-md-offset-1 only to the first of those five divs.
That way the boxes will be two columns wide each, with an offset of one column for the first div (and therefore one column space after the last one), which centers those 5 boxes: 1 + 2 + 2 + 2 + 2 + 1 = 12 columns alltogether
I'm having trouble with the bootstrap grid system. The div below <div class="col-xs-12 col-md-4"> should be on the right side while the other divs are on the left. Currently the first two column divs are correct and rendering at the top, but then the third column div doesn't render until the bottom of the image rather than alongside it. I need them to display correctly, what can I do?
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-7">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<div class="col-xs-12 col-md-4">
<img src="images/tie.png">
</div>
<div class="col-xs-12 col-md-7">
<div class="loginText">
Get information about your Connect plan
<br><br>
If you have any problems logging in, please contact your account manager for help.
<br><br>
</div>
</div> <!-- cols -->
</div> <!-- row -->
</div> <!-- container -->
It looks like this
The third div needs to be moved up under the first div, but it's currently below the height of the second div.
Bootstrap's framework is build on a 12 column layout.
So
col-md-7 + col-md-4 + col-md-7 = 18 columns exceeding the 12 column limit, hence pushing the third div to the next line.
You can fix it by changing the col-md's to col-md-5 + col-md-2 + col-md-5 like this:
<div class="row">
<div class="col-xs-12 col-md-5">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<div class="col-xs-12 col-md-2">
<img src="images/tie.png">
</div>
<div class="col-xs-12 col-md-5">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div> <!-- cols -->
</div>
Your question isn't very clear but from what I understand, col-md-7 plus col-md-4 plus col-md-7 equal 18, 6 more than the allotted 12. So it will go onto the next line.
The bootstrap grid system always adds to 12 in a row. you have md-7 and md-4 that's only 11.
you need to change
<div class="col-xs-12 col-md-4">
to
<div class="col-xs-12 col-md-5">
now you have 7+5 =12.
So, according to your updated question, you want the text on the left and the image on the right. You can do that as follows:
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row">
<div class="col-xs-12">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<!-- div below is hidden in xs -->
<div class="col-md-12 hidden-xs">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<img src="images/tie.png">
</div>
<!-- div below is shown only in xs -->
<div class="col-md-12 visible-xs">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div>
</div>
I want a Bootstrap column to resize buttons nicely when the screen type changes. But the buttons end up with no space between them and and two separate lines (on the small screen).
How do I get them to resize into smaller buttons, and not split onto a new line?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example!</div>
<div class="panel-body">
<div class="form-group">
<div class="col-xs-3 col-xs-offset-4">
Add Item
</div>
<div class="col-xs-3">
Remove Item
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you want the same styling for small devices as well as large devices, you can omit the md styling and just use sm. If the width get's really small, you can remove the offset and use that gained width on the elements instead on xs widths.
To fix the buttons being cut off, remove the btn-block class.
Demo
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-3 col-xs-6">
Add Item
</div>
<div class="col-sm-3 col-xs-6">
Remove Item
</div>
</div>
As a side note, if you want the buttons to be centered here, use offset 3 instead of 4.
If i am clear then try my updated code.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-3 col-xs-6 text-center">
Add Item
</div>
<div class="col-sm-3 col-xs-6 text-center">
Remove Item
</div>
</div>
You could use col-xs-3 instead of col-md-3 and col-xs-offset-4 instead of col-md-offset-4
Remember that bootstrap grid row is of 12 column, so what ever offset or column you are using it should add up to 12 and to target small screen devices such as mobile use col-xs-*. Everything else is fine.
<div class="form-group">
<div class="col-xs-3 col-xs-offset-6">
Add Item
</div>
<div class="col-xs-3">
Remove Item
</div>
</div>
I have a grid of images set out in rows of 4 columns which I want to change to rows of two columns. I thought this would do it: col-lg-3 col-xs-2 but it doesn't.
Where am I going wrong?
Code:
.test-content{
width:100%;
height:100px;
background:lightblue;
}
<div class="row">
<div class="col-lg-3 col-xs-2">
<div class="test-content">content</div>
</div>
<div class="col-lg-3 col-xs-2">
<div class="test-content">content</div>
</div>
<!-- It's like I should have a closing div here for the first row, and open another row just for col-xs-2, but obviously I can't do this for col-lg-3 -->
<div class="col-lg-3 col-xs-2">
<div class="test-content">content</div>
</div>
<div class="col-lg-3 col-xs-2">
<div class="test-content">content</div>
</div>
</div>
Fiddle: http://jsfiddle.net/41ry7qvk/
Bootstrap is working with a grid divided in 12 parts.
col-lg-3 means its width is 3/12. So if you want 2 rows you need col-lg-6.
The same for xs:
col-xs-3 means its width is 3/12. So if you want 2 rows on xs-screen, you need col-xs-6.
The bootstrap grid system has 12 grids. So instead of col-xs-2 you should write col-xs-6 to have 2 images on a row.
I have a row with three columns.
First one is size 1 offset 0,
Second one is size 6 offset 1
last one is size 1 offset 8
What expect to get is the following:
[Col1][Col2 ][Col3]
but instead I get:
[Col1][Col2 ]
[Col3]
Here is my html:
<div class="list-group">
<a href="#" class="list-group-item itemlisting">
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-1">
<img src="http://blog.bleepie.com/images/2010/05/week-16-logo-post-to-facebook/logo.png" class="img-rounded imglogo hidden-xs">
</div>
<div class="col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-8 col-xs-offset-1 middleColumn">
<h4>Software Developer</h4>
<p>Shell Corporation</p>
</div>
<div class="col-lg-1 col-lg-offset-8 col-md-1 col-md-offset-8">
<p>Calgary</p>
</div>
</div>
</a>
</div>
This happens when I resize my screen to a width greater than 991px. I've been trying to play around with the offset and the column widths but I've had little luck with aligning everything correctly. Any help would be appreciated.
cols - including offset cols - need to add up to 12. Your lg col set is adding up to 19. Switching the last col-lg-offset from 8 to 1 cleared the problem. See http://bootply.com/79908 or the code below.
<div class="list-group">
<a href="#" class="list-group-item itemlisting">
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-1">
<img src="http://blog.bleepie.com/images/2010/05/week-16-logo-post-to-facebook/logo.png" class="img-rounded imglogo hidden-xs">
</div>
<div class="col-lg-1 col-lg-offset-8 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-8 col-xs-offset-1">
<h4>Software Developer</h4>
<p>Shell Corporation</p>
</div>
<div class="col-lg-1 col-lg-offset-1 col-md-1 col-md-offset-8">
<p>Calgary</p>
</div>
</div>
</a>
</div>
PS - inline elements should not contain block elements, so wrapping all of those divs with an <a> goes against the spec. I don't think any browser will complain, it is just bad form.
PPS - I didn't bother to fix any of your md, sm, or xs cols either, so be sure to take a look at those and make sure you are staying =12 cols.
You don't the offset classes in 2nd and 3rd divs. The content before these divs offsets it already.