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">
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>
Im using a bootstrap template and I need to center two element in the team section.
The elements are inside a div class="col-md-3 col-sm-3 col-xs-12" and this one is inside a div class="team-top" and this one is inside a div class="row". I'm still kinda newbie with bootstrap so I find difficult to find which classes I have to modify.
Each element has an image and text describing each one of the team members.
actual situation
here's the code.
<div id="team" class="our-team-area area-padding">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="section-headline text-center">
<h2>Nuestro Equipo</h2>
</div>
</div>
</div>
<div class="row">
<div class="team-top">
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="single-team-member">
<div class="team-img">
<a href="#">
<img src="img/team/1.jpg" alt="">
</a>
<div class="team-social-icon text-center">
<ul>
<li>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="team-content text-center">
<h4>Daniel Cárdenas</h4>
<p>Músico, Ingeniero en y Cofundador de Conectarte Studio</p>
</div>
</div>
</div>
<!-- End column -->
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="single-team-member">
<div class="team-img">
<a href="#">
<img src="img/team/2.jpg" alt="">
</a>
<div class="team-social-icon text-center">
<ul>
<li>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="team-content text-center">
<h4>Ignacio Weisser</h4>
<p>Músico, Ingeniero en Sonido y Cofundador de Conectarte Studio</p>
</div>
</div>
</div>
<!-- End column -->
</div>
</div>
</div>
</div>
<!-- End Team Area -->
I've tried
.team-top{
text-align:center;
margin: 0 auto;
display: block;
}
.team-top{
left: 0;
right: 0;
margin: 0 auto;
}
.team-top{
margin-right: auto;
margin-left: auto;
}
and adding classes to div class="row" and div class="col-md-3 col-sm-3 col-xs-12" and div class="single-team-member" but I still believe I have to add CSS to div class="team-top"
Any help would be appreciated
To position or reorder columns in a bootstrap row, you can use Push, Pull or Offset (bootstrap doc).
Offset adds a left margin to a column.
<div class="row">
<div class="col-md-3 col-sm-3 col-sm-offset-3 col-xs-12"></div>
<div class="col-md-3 col-sm-3 col-xs-12"></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>
how to make two buttons in one line using the bootstrap in the mobile display ? i use this code, but in the mobile view it displays 2 line.
<div class="row" style="margin-top:50px">
<div class="col-md-12 col-centered">
<div class="col-md-3"></div>
<div class="col-md-3 text-center">
<i class="fa fa-file-text-o"></i><br/>
<h3>Ajukan Izin</h3>
</div>
<div class="col-md-3 text-center">
<i class="fa fa-file-text-o"></i><br/>
<h3>Ajukan Cuti</h3>
</div>
<div class="col-md-3"></div>
</div>
</div>
You have to add to your button divs the classes: col-xs-3 aswell to adjust it on mobile. On tablet views its col-sm-3
Check this Fiddle
For a full reference to breakpoints in bootstrap check:
Bootstrap Grid
You have to use the class col-sm-* in order to target small devices
Edit:
<div class="row" style="margin-top:50px">
<div class="col-md-12 col-sm-12 col-centered">
<div class="col-md-3 hidden-sm"></div>
<div class="col-md-3 col-sm-6 text-center">
<i class="fa fa-file-text-o"></i><br/>
<h3>Ajukan Izin</h3>
</div>
<div class="col-md-3 col-sm-6 text-center">
<i class="fa fa-file-text-o"></i><br/>
<h3>Ajukan Cuti</h3>
</div>
<div class="col-md-3 hidden-sm"></div>
</div>
</div>
I edited wlalele's answer a little. The changes required here is adding extra class(col-xs-3) for smaller mobile device screens.
<div class="row" style="margin-top:50px">
<div class="col-md-12 col-sm-12 col-centered">
<div class="col-md-3 hidden-sm col-xs-3"></div>
<div class="col-md-3 col-sm-6 col-xs-3 text-center">
<i class="fa fa-file-text-o"></i><br/>
<h3>Ajukan Izin</h3>
</div>
<div class="col-md-3 col-sm-6 col-xs-3 text-center">
<i class="fa fa-file-text-o"></i><br/>
<h3>Ajukan Cuti</h3>
</div>
<div class="col-md-3 hidden-sm col-xs-3"></div>
</div>
</div>
i've a bug when choosing the tablet layout.
It works like a charm on smartphones and desktop but my buttons aren't centered anymore on tablet.
Here's my code :
<body>
<header class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="assets/img/maison.png" alt="logo" class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
<h1 class="text-center">La maison de l'architecte</h1>
</header>
<nav class="">
<div id="left" class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<img src="assets/img/city1.jpg" alt="Nos réalisations">
</div>
<div id="side1" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="assets/img/side1.jpg" alt="Nos projets">
</div>
<div id="side2" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="assets/img/side2.jpg" alt="Notre ambition">
</div>
</nav>
<footer class="text-center">
<a class="btn btn-primary" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</footer>
</body>
Just add the row class to the nav <nav class="row">
see fiddle https://jsfiddle.net/g74Ep/472/