I am new to bootstrap. I want to place 2 icons side by side on any screen size. It works properly on medium devices, but when I run it on mobile devices the icons are placed one below other and not side by side. Also, my margins are not working on smaller devices.
<div class="row text-center">
<div class="col-sm-6 xs-my-20 col-md-6">
<i class="fab fa-facebook-f icons"></i>
</div>
<div class="col-sm-6 xs-my-20 col-md-6">
<i class="fab fa-facebook-f icons"></i>
</div>
</div>
Simply use col-xs-6 like this:
<div class="container">
<div class="row text-center">
<div class="col-xs-6">
<i class="fab fa-facebook-f icons"></i>
</div>
<div class="col-xs-6">
<i class="fab fa-facebook-f icons"></i>
</div>
</div>
</div>
And if you upgrade to bootstrap V4 simply do this:
<div class="container">
<div class="row text-center">
<div class="col">
<i class="fab fa-facebook-f icons"></i>
</div>
<div class="col">
<i class="fab fa-facebook-f icons"></i>
</div>
</div>
</div>
I'm not sure if xs-my-20 is a custom class you have created but you should be able to add col-xs-6 and it will allow the two icons to be displayed side by side in any size screen.
if xs-my-20 is a custom class you may have some css that is affecting display such as margins etc.
You also don't need to add col-md-6. If you use col-xs-6 it will include xs and above (xs,sm,md,lg). as with all col sizes. for example col-md-6 already applies col-md-6 and col-lg-6 without you having to write it.
Hope this helped.
<div class="container">
<div class="row text-center">
<div class="col-xs-6">
<i class="fab fa-facebook-f icons"></i>
</div>
<div class="col-xs-6">
<i class="fab fa-facebook-f icons"></i>
</div>
</div>
</div>
Related
I'm trying to center two columns in a row in Bootstrap and no matter what offset or centering, they won't stay on same line in center of full-width column on md size or above
Tried col-md-6 offset and adding row-center and column-center classes, nothing has worked
Here's the full footer code - I want the email and tel to be on one line on larger screens and the two social icons alongside each other on the next row. It wraps nicely to display on mobile, just the larger screens I need some help with.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="container-fluid footer-container">
<div id="footer" class="row">
<div class="col-md-12">
<div id="action" class="row">
<div class="col-md-12">
<btn class="footer-button">
BOOK NOW!</h5>
</btn>
</div>
</div>
<div id="contact-methods" class="row">
<div class="col-md-6">
<a class="send-email" href="mailto:bookings#samanthaharris.ca" target="-blank"><i class="fas fa-envelope-square" aria-hidden="true"></i>
<h5>Email Samantha</h5></a>
</div>
<div class="col-md-6">
<a class="call" href="tel:905-749-5700"><i class="fas fa-mobile-alt" aria-hidden="true"></i><h5>905-749-5700</h5></a>
</div>
</div>
<div class="row row-center">
<div class="col-md-6 col-center"><a class="insta" href="https://www.instagram.com" target="-blank"><i class="fab fa-instagram" aria-hidden="true"></i></a>
</div>
<div class="col-md-6 col-center"><a class="facebook" href="https://www.facebook.com" target="-blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</footer>
Add the 'text-center' class to your rows.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div id="footer" class="row">
<div class="col-md-12">
<div id="action" class="row text-center">
<div class="col-md-12">
<btn class="footer-button">
BOOK NOW!</h5>
</btn>
</div>
</div>
<div id="contact-methods" class="row text-center">
<div class="col-md-6">
<a class="send-email" href="mailto:bookings#samanthaharris.ca" target="-blank"><i class="fas fa-envelope-square" aria-hidden="true"></i>
<h5>Email Samantha</h5>
</a>
</div>
<div class="col-md-6">
<a class="call" href="tel:905-749-5700"><i class="fas fa-mobile-alt" aria-hidden="true"></i>
<h5>905-749-5700</h5>
</a>
</div>
</div>
<div class="row text-center">
<div class="col-md-6 col-center"><a class="insta" href="https://www.instagram.com" target="-blank"><i class="fab fa-instagram" aria-hidden="true"></i>
</a></div>
<div class="col-md-6 col-center"><a class="facebook" href="https://www.facebook.com" target="-blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
According to docs try this way:
<div class="row justify-content-center">
<div class="col-*"></div>
<div class="col-*"></div>
</div>
I have one div that is a row and inside a few more rows with two col classes each. But what is strange is the first two col-3 classes take different width than the next two col-3 classes which makes the element un-aligned one on top of another. The code is bellow
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row p-3 w-100">
<h5 class="text-center w-100">Color Legend</h5>
<div class="row">
<div class="col-3 w-100">
<i class="far fa-circle circle px-2"></i>
</div>
<div class="col-9 w-100">
<p>Not visited topic</p>
</div>
</div>
<div class="row">
<div class="col-3 w-100">
<i class="far fa-circle circle px-2" style="color:#016fc9;"></i>
</div>
<div class="col-9">
<p>Visted topic</p>
</div>
</div>
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#00bfa5"></i>
</div>
<div class="col-9">
<p>Visted topic, pop-up question <strong>successfully</strong> answered.</p>
</div>
</div>
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#f44336"></i>
</div>
<div class="col-9">
<p>Visted topic, pop-up question <strong>failed</strong> after visting.</p>
</div>
</div>
</div>
Here is a screen of the result
https://i.stack.imgur.com/LRgqd.png
You are breaking the .row > .col hierarchy. Meaning col should have .row as a parent and vice versa. In your case, you have .row as parent and child, which is why you had to give .w-100. Please try the below code.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row p-3">
<div class="col-12">
<h5 class="text-center">Color Legend</h5>
</div>
<div class="col-12">
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2">I</i>
</div>
<div class="col-9">
<p>Not visited topic</p>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#016fc9;">I</i>
</div>
<div class="col-9">
<p>Visted topic</p>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#00bfa5">I</i>
</div>
<div class="col-9">
<p>Visted topic, pop-up question <strong>successfully</strong> answered.</p>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#f44336">I</i>
</div>
<div class="col-9">
<p>Visted topic, pop-up question <strong>failed</strong> after visting.</p>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="container">
<div class="blocks">
<h2 style="text-align: center">Extra Information</h2>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!</div>
<br><br><br>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-exchange fa-2x" aria-hidden="true"></i><br>Interaction</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-question-circle fa-2x" aria-hidden="true"></i><br>Information</div>
</div>
</div>
</div>
</div>
It looks like Image 1
How can I make it look like image 2 but with 2 columns, because mine is all stuck with eachother:
First, you can't have more than 12 col by row, so your code is wrong.
Second, please, don't use the "I'll put every class and it'll work" as suggested by my fellow, Bootstrap work on a cascade way, you just have to set on the "until the smallest screen" you want.
If you want 2 col even in xs-, then just use the col-xs-6, no need to set the sm- / md- / lg-.
And last, I don't really understand what you want, this ?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container">
<div class="blocks">
<h2 style="text-align: center">Extra Information</h2>
<div class="row">
<div class="col-xs-6"><i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later</div>
<div class="col-xs-6"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback</div>
</div>
<div class="row">
<div class="col-xs-6"><i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?</div>
<div class="col-xs-6"><i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!</div>
</div>
<div class="row">
<div class="col-xs-6"><i class="fa fa-exchange fa-2x" aria-hidden="true"></i><br>Interaction</div>
<div class="col-xs-6"><i class="fa fa-2x" aria-hidden="true"></i><br></div>
</div>
</div>
</div>
</div>
In bootstrap, .col-md- class is used for medium screens, .col-xs- means extra small and col-sm for small screens
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="wrapper">
<div class="container">
<div class="blocks">
<h2 style="text-align: center">Extra Information</h2>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later
<br>
<i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?
<br>
<i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!
</div>
</div>
</div>
</div>
</div>
I am using bootstrap list-group to display links to itunes, amazon and google play. Each link is its own list-group-item. I would like for all of these items to be centered inline with one another. How do I do this?
<!-- Download badges -->
<div class="container-fluid">
<div class="row">
<div class="list-group">
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
<a href="http://hyperurl.co/cplq6c" class="list-group-item" target="_blank">
<i class="fa fa-apple fa-2x" aria-hidden="true"></i>itunes</a>
</div>
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
<a href="http://hyperurl.co/1qcfl6" class="list-group-item" target="_blank">
<i class="fa fa-amazon fa-2x" aria-hidden="true"></i>amazon</a>
</div>
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
<a href="http://hyperurl.co/mb95g4" class="list-group-item" target="_blank">
<i class="fa fa-google fa-2x" aria-hidden="true"></i>google play</a>
</div>
</div>
</div>
</div>
To be more clear, I would like to have the list-group centered on the page.
Use the col-lg-offset-* classes. Demo. You need it on your first column.
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2 col-lg-offset-3">
...
</div>
Change
<div class="container-fluid">
to
<div class="container">
Bootstrap rows and columns do not display properly on phones and other small devices.
Screenshot on mobile device
.
For tablets and bigger displays, this works properly.
Code
<div class="col-xs-5 col-sm-1"><i class="fa fa-mobile" aria-hidden="true"></i></div>
<div class="col-xs-7 col-sm-3">ww</div>
<div class="col-xs-5 col-sm-1"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
<div class="col-xs-7 col-sm-3">ww</div>
<div class="col-xs-5 col-sm-1"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
<div class="col-xs-7 col-sm-3">ww</div>
I made a temporary fix - I set the same height for these divs. But I don't think that will be always good solution.
After Temporary fix (align added on pic below)
How to resolve this problem in better way?
The problem stems from your floats not clearing. This is very common in Bootstrap layouts since almost all elements are floated and so they have included a helper class to deal with it.
<div class="clearfix">
You insert it in between items which would break to a new line in a specific breakpoint. So, in your case, after the first two "ww" divs for your xs breakpoint.
To only have it affect your xs breakpoint we add another Bootstrap helper class:
<div class="clearfix visible-xs">
More info on these helper classes can be found in the Bootstrap documentation:
Clearfix, Visibility Classes
Full example here:
i {
font-size: 30px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-5 col-sm-1"><i class="fa fa-mobile" aria-hidden="true"></i>
</div>
<div class="col-xs-7 col-sm-3">ww</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-5 col-sm-1"><i class="fa fa-envelope-o" aria-hidden="true"></i>
</div>
<div class="col-xs-7 col-sm-3">ww</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-5 col-sm-1"><i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
<div class="col-xs-7 col-sm-3">ww</div>
To get proper benefit of bootstrap you should enclose each of 12 grid column in a row div. For example,
<div class="row">
<div class="col-xs-5 col-sm-5"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
<div class="col-xs-7 col-sm-7">ww</div>
</div>
You need to wrap each one of those column groups in 12 column rows. Your cols need to add up to 12 in each row for each breakpoint you add a class for. If you dont wrap them each in a row, they will auto wrap after 12 columns - but you need to make sure that the cols you want on the same row always adds up to 12.
ie.
<div class="row>
<div class="col-xs-7 col-sm-9">ww</div>
<div class="col-xs-5 col-sm-3"><i class="fa fa-mobile" aria-hidden="true"></i></div>
</div>
<div class="row>
<div class="col-xs-7 col-sm-9">ww</div>
<div class="col-xs-5 col-sm-3"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
</div>
<div class="row>
<div class="col-xs-7 col-sm-3">ww</div>
<div class="col-xs-5 col-sm-9"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
</div>
This would also work with a bit less control of the layout (but you need to define ALL breakpoints - not just small and XS in your classes).
<div class="row>
<div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-mobile" aria-hidden="true"></i></div>
<div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
<div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
</div>