I have 3 columns in my footer however when I enter mobile view. The horizontal columns become stacked vertically. How can I keep them as 3 columns horizontally even when in mobile viewport?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid footer">
<div class="row">
<div class="col-xs-4 col-sm-6 col-md-7 col-lg-8">
<p class="copyright text-left pl-3">Street Scents 2018©</p>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 col-lg-2 info">
<p class="nav-link-title">SOCIAL MEDIA</p>
<ul class="links" href="https://www.instagram.com/streetscents" target="_blank"><i class="fab fa-instagram"></i> Instragram</ul>
<ul class="links" href="https://twitter.com/STREETSCENTS" target="_blank"><i class="fab fa-twitter"></i> Twitter</ul>
<ul class="links" href="https://www.youtube.com/user/FRAGRANCEFANATIC1" target="_blank"><i class="fab fa-youtube"></i> YouTube</ul>
</div>
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-2 info">
<p class="nav-link-title">CONTACT</p>
<ul class="links" href="mailto:fragrancefanatic1#yahoo.com?Subject=Hello">fragrancefanatic1#yahoo.com</ul>
</div>
</div>
</div>
Add .col-4 to each of your three columns. Bootstrap 4 introduces an additional breakpoint tier for smaller than small devices (< 576px). That should prevent stacking on mobile devices.
Related
I've made bootstrap cards that appear on two different pages. One on the landing page which I want to increase the spacing and one on the books page which I want to increase the width of the cards. Here's the code that I've written and used in both pages. The only thing that I've changed is on the 6th line from '...col-lg-3' to '...col-lg-2'. If anyone can assist me in adding the spacing and increasing the with of the card, help me if you can. d-flex justify-content-evenly doesn't work when i use col-lg-3.
<section id="about" class="ts-block" >
<div id="cards_landscape_wrap-2">
<div class="container " style="width:70%">
<div class="row d-flex justify-content-around">
#foreach($products as $product)
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer ">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div>
#endforeach
</div>
</div>
</div>
</section>
Try including d-flex justify-content-around to a direct parent containing the cards instead of
<div class="row d-flex justify-content-around">. And add margin to the card.
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 d-flex justify-content-around">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer m-2">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div
I have the following container with 3 columns using Bootstrap 4
<section id="features">
<div class="container-fluid">
<div class="row justify-content-around">
<div class="col-lg-4 col-md-12 ">
<i class="fas fa-check-circle"></i>
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="col-lg-4 col-md-12" >
<i class="fas fa-bullseye"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="col-lg-4 col-md-12">
<i class="fas fa-heart"></i>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</div>
</section>
I want to add space between them so they are more separated, however when i try to add padding or margin it breaks the row. How can i add the space maitaining the three items in the same row.
Paddings inside cols works fine. Use class px-5. You can use number form 0 to 5 in it. px means "padding x" (both left and right). Although you can use size breakpoints in it, like px-sm-3. More about padding in Bootstrap 4 here https://getbootstrap.com/docs/4.4/utilities/spacing/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section id="features">
<div class="container-fluid">
<div class="row justify-content-around">
<div class="col-lg-4 col-sm-12 px-5">
<i class="fas fa-check-circle"></i>
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="col-lg-4 col-sm-12 px-5" >
<i class="fas fa-bullseye"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="col-lg-4 col-sm-12 px-5">
<i class="fas fa-heart"></i>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</div>
</section>
I advice to use Flex to manage rows (and columns) of stuffs: it also provides methods to define inner and outer space of elements.
I have a carousel which is actually a form.
One carousel item is a multi selectbox
How can i auto increase the height on only one carousel-item as the height of the multi select box increase.
The image 1 is how i get.
Image 2 how i want it.
Much thanks for much insights. I cannot refresh the carousel. It will unset my form inputs
<div class="row no-gutters" id="mob-carousel-row" [style.height.px]="mobileCarouselRowHeight">
<div class="col-1 col-sm-1">
<a href="#carouselExampleIndicators" role="button" data-slide="prev">
<i class="fa fa-angle-left mobile-form-nav" ></i>
</a>
</div>
<div class="col-10">
<div
#plMobileCarouselForm
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
data-interval="false">
<div class="carousel-inner" role="listbox" id="mob-carousel">
<div class="carousel-item active">
<div class="form-group md-form mob inputbox">
<!-- first input box item -->
</div>
</div>
<div class="carousel-item active">
<div class="form-group md-form mob muti-select">
<!-- muti select box item need auto height -->
</div>
</div>
<div class="carousel-item active">
<div class="form-group md-form mob inputbox">
<!-- first input box item -->
</div>
</div>
</div>
</div>
</div>
<div class="col-1 col-sm-1">
<a href="#carouselExampleIndicators" role="button" data-slide="next">
<i class="fa fa-angle-right mobile-form-nav" ></i>
</a>
</div>
</div>
This is intended as a comment but I can't comment yet.
Since you haven't provided your CSS it's just guess work.
However, if you set the height to auto for the container that contains the input forms or select boxes, it will adjust itself as more options become available.
.carousel-item active {
height: auto;
}
I have an app that I'm building with Bootstrap 4. I need to center some icons underneath an image. I have a Bootply here. My code looks like this:
<div class="container">
<br>
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-3">
<img alt="Picture" src="http://cdn.bgr.com/2015/11/bill-gates.jpg" class="img-circle center-block" style="max-height:6.0rem;">
<br>
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-twitter"></i></li>
<li class="list-inline-item"><i class="fa fa-google-plus"></i></li>
<li class="list-inline-item"><i class="fa fa-linkedin"></i></li>
</ul>
</div>
<div class="col-md-9">
<div><strong>Bill Gates</strong></div>
<p>
Here is some information about Bill Gates.
</p>
</div>
</div>
</div>
</div>
</div>
My question is, how do I horizontally center the three icons underneath my image so that it looks like a centered toolbar?
On your UL tag, remove the inline-list class, it's enforcing a float.
In a Bootstrap carousel item, I have a row of images nested in Bootstrap columns. Their height varies according to the width of columns. In the same row, there are also carousel controls LEFT and RIGHT for changing the items of the carousel.
I need to have the controls left (<) and right (>) vertically centered to the row. How can this be acomplished?
I tried to remove the row class and use the dislay: table and table-cell, which aligned controls vertically, but whole responsiveness was lost.
Example here: http://testabc.borec.cz/
HTML (carousel):
<div id="monthly-tips" class="carousel slide showcase showcase-1 text-center"><!-- class of slide for animation -->
<h1>Title</h1>
<div class="carousel-inner">
<div class="item container-fluid active">
<div class="row" style="display: flex;
align-items: center;">
<div class="col-xs-1 nopadding">
<a class="carousel-control left" href="#monthly-tips" data-slide="prev">
<span class="gi gi-chevron-left"></span>
</a>
</div>
<div class="col-xs-10 col-sm-5 col-md-3">
<img src="./img/books/syn-spravce-sirotcince.jpg" class="envelope js-book1" alt="" />
</div>
<div class="hidden-xs col-sm-5 col-md-4">
<img src="./img/books/tanec-s-nepritelem.jpg" class="envelope js-book2" alt="" />
</div>
<div class="hidden-xs hidden-sm col-md-3">
<img src="./img/books/syn-spravce-sirotcince.jpg" class="envelope js-book1" alt="" />
</div>
<div class="col-xs-1 nopadding">
<a class="carousel-control right" href="#monthly-tips" data-slide="next">
<span class="gi gi-chevron-right"></span>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-1 nopadding"></div>
<div class="col-xs-10 col-sm-5 col-md-3">
<span class="bottom-shadow"></span>
</div>
<div class="hidden-xs col-sm-5 col-md-4">
<span class="bottom-shadow"></span>
</div>
<div class="hidden-xs hidden-sm col-md-3">
<span class="bottom-shadow"></span>
</div>
<div class="col-xs-1 nopadding"></div>
</div>
<div class="row info-holder">
<div class="col-xs-1 nopadding"></div>
<div class="col-xs-10 col-sm-5 col-md-3">
<p class="book-title">Syn správce sirotčince</p>
<p class="book-author">Adam Johnson</p>
</div>
<div class="hidden-xs col-sm-5 col-md-4">
<p class="book-title">Tanec s nepřítelem</p>
<p class="book-author">Ruta Sepetysová</p>
</div>
<div class="hidden-xs hidden-sm col-md-3">
<p class="book-title">Tanec s nepřítelem</p>
<p class="book-author">Ruta Sepetysová</p>
</div>
<div class="col-xs-1 nopadding"></div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div>
</div><!-- carousel monthly-tips -->
You can add a new css property align-items on your .row container like this :
CSS :
.row { // add a new class to your row and target your newest class
display: flex;
align-items: center;
}