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
Related
In my post section of the web site which I am creating I have 4 columns with post in each post with different height based on it's contents . bootstrap 4 grid system. As per photo under
When I resize the 4th column re-arrange.
As u can see on the above image the 4th column is shifted under number 1 but its align base on the height of the 3rd column. I want to be stacked like the photo bellow.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row pt-3 port-folio-margins pb-5 pr-4 pl-4">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
</div>
So the question is how to achieve that CSS formatting with Bootstrap or without bootstrap . I have tried putting "float" using "flex wrap" also "clearfix" without result.
Bootstrap has a built in utility for this problem you can use cards and wrap them in card columns. See the documentation here
This is a tricky issue that is often just worked around. Web-pages are much easier to code in grids, so things tend to be in columns and rows. In your example, when wrapped the row needs to be tall enough to contain your third item. That means that if the fourth item sat where you want it, it would be within the cell of the first item.
You can use something like Masonary, which I believe calculates top and left positions as you resize. Or I think you can use flex and a whole lot of wrapper divs, but that will get messy and be horrible maintenance. It's so messy I've never got it into production, either because I lost my mind trying, or hated the thought of maintaining it when it was working in just a small example.
Masonary allows a fairly simple layout
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
</div>
JSFiddle example
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 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>
I'm working on my own project.My menu have 6 buttons.
I did it with Bootstrap but when i open in Iphone web browser, the menu comes one row - one button.
I want to show two buttons for a row.
Maybe i can't explain my problem, so i added a screenshot.
here is the image;
1
Thanks for everything,
here is my code below;
<div class="box first">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="center">
<a href="orders.php"><img src="img/logo/siparis.png" width="78px" height="78px">
<h4 style="text-align:center">Sipariş takibi</h4></a>
</div>
</div>
<!--/.col-md-4-->
<div class="col-md-4 col-sm-6">
<a href="http://www.example.com/example-sifre-yenileme.html">
<div class="center">
<img src="img/logo/email_unut.png" width="78px" height="78px">
<h4 style="text-align:center">Şifre değiştirme</h4></a>
</div>
</div>
<!--/.col-md-4-->
<div class="col-md-4 col-sm-6">
<div class="center">
<a href="orderhasar.php"> <img src="img/logo/hasar.png" width="78px" height="78px">
<h4 style="text-align:center">Hasarlı sipariş destek talebi</h4></a>
</div>
</div>
<!--/.col-md-4-->
</div>
<!--/.row-->
</div>
You mean you want all the menu items to show side by side horizontally?
If so, you need to add a XS class declaration for mobile:
<div class="col-md-4 col-sm-6 col-xs-2">
With col-xs-2, it will fit 6 items in a row (12 total columns, 2 columns per menu item, 6 menu items).
You might have to play with the size of the items then!
EDIT:
To show a 2 button row, add col-xs-6 instead.
<div class="col-md-4 col-sm-6 col-xs-6">
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.