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.
Related
<div class="col-xs-12" style="padding:0px">
<div class="col-xs-6 pull-left">
<div class="col-xs-12"><strong>Cooking Details</strong></div>
<div class="col-xs-12">
<span class="col-xs-6 pull-left">Ingredient</span>
<span class="pull-right col-xs-6 " style="padding-right:0px">Quantity</span>
</div>
<div>
<div>
Pull-right works fine for cooking details line, but for ingredient and quantity I am unable to format it with pull-right/float: right.
I am expecting quantity to be at the end of the div it is in. It is getting the 50% width but float:right is not working
Bootstrap 3: https://www.codeply.com/p/OSJMu17P9a
<div class="col-xs-12" style="padding:0px">
<div class="col-xs-12"><strong>Cooking Details</strong></div>
<div class="col-xs-6">
<span class="pull-left">Ingredient</span>
<span class="pull-right" style="padding-right:0px">Quantity</span>
</div>
</div>
Bootstrap 4: https://www.codeply.com/p/BrGeGl9mZi#
<div class="col-12" style="padding:0px">
<div class="col-12"><strong>Cooking Details</strong></div>
<div class="col-6">
<span class="float-left">Ingredient</span>
<span class="float-right" style="padding-right:0px">Quantity</span>
</div>
</div>
I'm not sure if you wanted something like this. When you add the col you have to use a div with row class a wrapper
#EDITED: WAY BETTER SOLUTION
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<div style="padding: 0px;">
<h4>
<strong>Cooking Details</strong>
</h4>
<div>
<span class="pull-left">Ingredient</span>
<span class="pull-right">Quantity</span>
</div>
</div>
Or Bootstrap 4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div>
<h4>
<strong>Cooking Details</strong>
</h4>
<div>
<span class="float-left">Ingredient</span>
<span class="float-right">Quantity</span>
</div>
</div>
In this case, I need the text in Line 1 and Line 2 to be left aligned without the gap in the left appearing in line 2 regardless of the device size.
I tried to apply m-1, p-1, text-left, and even negative padding but none of those removed the leading space in line 2. Thanks.
JSFiddle containing problem code Here
<h4>Line 1-Header4 </h4>
<div class="container-fluid">
<h4> Line2-Header4 </h4> <!-- HERE IS THE ISSUE -->
<div class="row zz-border-Top2
border-bottom border-primary text-center bg-light">
<div class="col-sm-1 font-weight-bold text-dark bg-warning">
<h6>Text1</h6>
</div>
<div class="col-sm-2">
<h6> Text 2 </h6>
</div>
<div class="col-sm-9 text-left" style="color:navy;">
<h6>Text 3</h6>
</div>
</div>
</div>
You need to use row inside the container to compensate the padding added by the container with the negative margin of the row
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<h4>Line 1-Header4 </h4>
<div class="container-fluid">
<div class="row">
<h4> Line2-Header4 </h4> <!-- HERE IS THE ISSUE -->
</div>
<div class="row zz-border-Top2
border-bottom border-primary text-center bg-light">
<div class="col-sm-1 font-weight-bold text-dark bg-warning">
<h6>Text1</h6>
</div>
<div class="col-sm-2">
<h6> Text 2 </h6>
</div>
<div class="col-sm-9 text-left" style="color:navy;">
<h6>Text 3</h6>
</div>
</div>
</div>
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.
I'm working on a project using Bootstrap 4. I have a row that consists of three columns. My code looks like this:
<div class="row">
<div class="col-md-4 center-block">
<div>
<i class="glyphicon glyphicon-time center-text"></i><br />
<h3>On Time</h3>
<h4>Just for you</h4>
</div>
</div>
<div class="col-md-4 center-block">
<i class="glyphicon glyphicon-star center-text"></i><br />
<h3>Excellent Service</h3>
<h4>When you need it</h4>
</div>
<div class="col-md-4 center-block">
<i class="glyphicon glyphicon-heart center-text"></i><br />
<h3>We want to be your favorite</h3>
<h4>Why not?</h4>
</div>
</div>
I need to center the content within each column. However, all of the content is left-aligned and I do not know why. As the code shows, I'm using the center-block and center-text classes. Yet, they do not seem to be working. What am I doing wrong?
You need to use text-center instead of center-block.
There is no default Bootstrap class such as center-text and the class needs to be used for the parent container, not along with any child element.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 text-center">
<div>
<i class="glyphicon glyphicon-time"></i><br />
<h3>On Time</h3>
<h4>Just for you</h4>
</div>
</div>
<div class="col-md-4 text-center">
<i class="glyphicon glyphicon-star"></i><br />
<h3>Excellent Service</h3>
<h4>When you need it</h4>
</div>
<div class="col-md-4 text-center">
<i class="glyphicon glyphicon-heart"></i><br />
<h3>We want to be your favorite</h3>
<h4>Why not?</h4>
</div>
</div>
So I'm trying to have two jumbotrons indicating two portals into my site. On a medium-large screen they appear side by side with spacing in between. On a tablet or mobile device I would like the jumbotrons to be stacked. The docs on the bootstrap 3 make this automatically happen when I shrink the page, however this isn't happening to me. I'm not sure what i'm doing wrong, I'm really new to bootstrap. Right now when it becomes a medium sized screen the white space disappears and they get squeezed side by side.
My html looks like this:
<div class="container-fluid">
<div class="row">
<div class="container special">
<div class="clearfix visible-sx"></div>
<div class="jumbotron text-center col-md-5 col-md-offset-1">
<h1>Become a Screener</h1>
<p>Yahh a screener.</p>
<a class="btn btn-danger" href="{% url 'screener_info' %}">More Info</a>
</div>
<div class="jumbotron text-center col-md-5 col-md-offset-1">
<h1>Have your books screened</h1>
<p>yah an author.</p>
<a class="btn btn-success" href="{% url 'author_info' %}" role="button">More Info</a>
</div>
</div>
</div>
</div>
Try changing your code to this:
<div class="container-fluid">
<div class="row">
<div class="container special">
<div class="clearfix visible-sx"></div>
<div class="col-sm-5 col-md-offset-1">
<div class="jumbotron text-center">
<h1>Become a Screener</h1>
<p>Yahh a screener.</p>
<a class="btn btn-danger" href="{% url 'screener_info' %}">More Info</a>
</div>
</div>
<div class="col-sm-5 col-md-offset-1">
<div class="jumbotron text-center">
<h1>Have your books screened</h1>
<p>yah an author.</p>
<a class="btn btn-success" href="{% url 'author_info' %}" role="button">More Info</a>
</div>
</div>
</div>
</div>
</div>
Simply create a div around jumbotrons with md-5 and offset class.