This question already has answers here:
How to add spacing between columns?
(36 answers)
Closed 4 years ago.
I'm trying to create spacing between my bootstrap columns, but it doesn't seem to be doing it automatically. Is there a specific way or class that I need to be adding to the columns?
<div class="row row_padding">
<div class="col-sm-4 text-center">
<div class="col-sm-11">1</div>
</div>
<div class="col-sm-4 text-center">
<div class="col-sm-11">2</div>
</div>
<div class="col-sm-4 text-center">
<div class="col-sm-11">3</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center bdr">
<div class="col-xs-4 m-1 p-1 w-25 border border-secondary">#1</div>
<div class="col-xs-4 w-25 m-1 p-1 border border-secondary">#2</div>
<div class="col-xs-4 m-1 p-1 w-25 border border-secondary">#3</div>
</div>
</div>
I think col-md-offset or same like that classes will work for you. :-)
Related
This question already has answers here:
How to align div to bottom inside div with Bootstrap?
(4 answers)
Bootstrap element to bottom with flexbox
(1 answer)
How can I align a flex-row to bottom in a card?
(1 answer)
Closed 18 days ago.
I want to view multiple articles on a page. I used Bootstrap 5 cards to make it look great. Everything worked out fine as I wanted, but the only thing which bothers me is that the read more link is not at the bottom of the card. I tried adding a d-flex, and used align-bottom, but nothing put the text at the bottom
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card p-2">
<div class="row g-3">
<div class="col-5">
<img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100">
</div>
<div class="col-7">
<div class="card-body h-100 p-0 m-0">
<span class="card-text mb-1 small">463</span>
<h6 class="card-title custom-text-truncate">How a responsive website can boost user satisfaction</h6>
<div class="d-flex align-items-end">
Read more ->
</div>
</div>
</div>
</div>
</div>
Group the tile and text to one div to let the flex container have only 2 child items and set the flex container flex-column and justify-content-between (it means one item at the top of the container and the other at the very bottom).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card">
<div class="row g-3">
<div class="col-5">
<img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100" />
</div>
<div class="col-7">
<div class="d-flex flex-column justify-content-between card-body h-100 p-0 m-0">
<div>
<!-- Grouping title and text by this div -->
<div class="card-text mb-1 small">463</div>
<div>
<h6 class="card-title custom-text-truncate">
How a responsive website can boost user satisfaction
</h6>
</div>
</div>
<div>
Read more ->
</div>
</div>
</div>
</div>
</div>
You can achieve this by setting the .card-body to use a flex layout and change its direction to column and then finally add a margin-top: auto for the read more link. When utilizing Bootstrap's utility classes, the result would be as follow:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card p-2">
<div class="row g-3">
<div class="col-5">
<img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100" />
</div>
<div class="col-7">
<!-- Add class names of `d-flex` and `flex-column` -->
<div class="card-body h-100 p-0 m-0 d-flex flex-column">
<span class="card-text mb-1 small">463</span>
<h6 class="card-title custom-text-truncate">
How a responsive website can boost user satisfaction
</h6>
<!-- Add `mt-auto` -->
<div class="d-flex align-items-end mt-auto">
Read more ->
</div>
</div>
</div>
</div>
</div>
This question already has answers here:
Remove padding from columns in Bootstrap 3
(26 answers)
Closed 2 years ago.
I want to remove margins between hello and dd how could i do it.
<div className="container border border-primary">
<div className="row">
<div className="">A </div>
<div className="col">
<div className="row justify-content-between m-0 p-0">
<p>hello</p>
<p>hello</p>
</div>
<div className='row m-0 p-0'>
dd
</div>
</div>
</div>
</div>
You have to remove the margin of the <p> elements to remove the space between the rows.
You have three possibilities to solve this:
Using Bootstrap utility class .m-0 on the <p> elements itself.
A custom CSS rule to remove the margin of the <p> elements.
Using a <span> element instead of a <p> element.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container border border-primary">
<div class="row">
<div>A</div>
<div class="col">
<div class="row justify-content-between m-0 p-0">
<p class="m-0">hello</p>
<p class="m-0">hello</p>
</div>
<div class='row m-0 p-0'>dd</div>
</div>
</div>
</div>
You can use .no-gutters from the Bootstrap grid system.
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
I have below text link list appearing in a col-md-3. I want to appear them as right-justified. See attached image below.
Current Coding is like below with "text-right" in the col-md-3, I tried text-justify too didn't seem to be working,
Any idea on how to make this the way i wanted as the image?Should i use a '<ul>' or '<li>' instead?
<div class="col-md-3 mt-2 text-right">
<div class="row mt-3">
<div class="col-md-12">
<b>View Profile</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<b>Send Message</b>
</div>
</div>
....
<div class="row mt-3">
<div class="col-md-12">
<b> View Proposal </b>
</div>
</div>
</div>
Don't use text-right on the container. Instead, turn the col-md-12 divs into col-md-6 and use an offset i.e. offset-6. Now the element takes up 6 columns and is offset 6 columns, which puts it to the right of it's parent element.
More information about offsets can be found about halfway down the Bootstrap Grid documentation.
Here's the code demonstrating how to do this:
<div class="col-md-3 mt-2 container">
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b>View Profile</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b>Send Message</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b> View Proposal </b>
</div>
</div>
</div>
Here it is on Codepen
I Just updated my Codepen: https://codepen.io/shnigi/pen/jOWmqLe
It really depends how you want to place your grids and how much content they are going to have.
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>View Profile</b>
</div>
</div>
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>Send Message</b>
</div>
</div>
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>View Proposal</b>
</div>
</div>
Here I have created three rows which all span 12 columns. Then inside the rows I have element which spans 3 columns and has offset of 9 totalling 12 columns. Then I have placed text-right to make the text float on right inside the 3 column element.
This question already has answers here:
Center flex item in container, when surrounded by other flex items
(2 answers)
Closed 4 years ago.
With utilising d-flex, justify-content-center and flew-grow-1, I achieved the desired result with 3 divs.
<div class="row bg-primary d-flex justify-content-center">
<div class="col-auto">
LEFT
</div>
<div class="col-auto flex-grow-1 text-center">
Middle
</div>
<div class="col-auto">
Right
</div>
</div>
I want to achieve the same effect with 2 divs while Middle one is forced to be the exact center. However, if I try to remove the 'Right' element, it can't calculate the center.
<div class="row bg-primary d-flex justify-content-center">
<div class="col-auto">
LEFT
</div>
<div class="col-auto flex-grow-1 text-center">
Middle
</div>
</div>
Is there a way to force "Middle" to be exact center and Left or Right divs take space from Middle as they need? Kind of like all the positions of Left and Middle are same as in the first image but 'Right' div is not there.
Fiddle http://jsfiddle.net/4a7tLf0m/
I can achieve the same effect with giving specified column size (col-3 instead of col-auto) but I don't like the fact that I need to be explicit. Is this the only way to go?
Keep the right/left div as invisible when not required. That way middle will always occupy the exact same position as when the other 2 divs are not there.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row bg-primary d-flex justify-content-center">
<div class="col-auto">
LEFT
</div>
<div class="col-auto flex-grow-1 text-center">
Middle
</div>
<div class="col-auto">
Right
</div>
</div>
<hr/>
<div class="row bg-primary d-flex justify-content-center">
<div class="col-auto">
LEFT
</div>
<div class="col-auto flex-grow-1 text-center">
Middle
</div>
<div class="col-auto invisible">
Right
</div>
</div>
<hr/>
<div class="row bg-primary d-flex justify-content-center">
<div class="col-auto invisible">
LEFT
</div>
<div class="col-auto flex-grow-1 text-center">
Middle
</div>
<div class="col-auto">
Right
</div>
</div>
</div>
I want my sign in box to only fill 8 of the columns that bootstrap provides. Currecntly this is what I have written for the div:
<div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-xs-8 tile">
However this is the current result I'm getting...
Any Ideas?
There is no col-xs-8 class in bootstrap 4.1. this is new class in bootstrap 4.1 for small devices col-8. Try This
<div class="row">
<div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-8 tile">
</div>
</div>
You have to put inside the container and then make the offset
<div class="col-md-8 offset-md-2">
Note: I'm not sure whether this will answer your question or not 'cause you didn't provide the question clearly.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<label>Email</label><br>
<input type="email" class="form-control">
<label>Password</label><br>
<input type="password" class="form-control">
<br>
<button type="submit" class="btn btn-outline-primary btn-sm">Login</button>
</div>
</div>
</div>
You have to put inside the container and then make the offset of xs class like this
<div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-xs-8 col-xs-offset-2 tile">
You need to Wrap it into a Row.
<div class="row">
<div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-xs-8 tile">
....Your Input stuff etc...
</div>
</div>
You probably also want justify-content-center so your content (input) is in the center of
the page.
More Infos