I'm trying to vertical align text (<span class="align-middle">middle</span>) in the middle of a div.
This is my code:
<div class="col-4 shadow product-added">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-5">
<div class="row">
<img src="<?php echo $OTHERIMAGE1; ?>" class="">
</div>
</div>
<div class="col-7">
<span class="align-middle">middle</span>
</div>
</div>
</div>
</div>
</div>
Why isn't the text aligning as it should?
It is actually working but it is doing it inside the span because align-middle only works with inline elements.
You should use it on the parent div but with the class d-flex align-items-center
<div class="col-7 d-flex align-items-center">
I saved it on a JSfiddle while adding height to the row to see if it would work correctly:
https://jsfiddle.net/vca42kxo/2/
Related
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 is the code:
<div class="container">
<div class="w-100 row">
<div class="d-none d-md-block col-md-1"></div>
<div class="col-md-10 row">
<div class="col-md-3 border">
<span class="float-md-right">Float right
</span>
</div>
<div class="col-md-3 border">
Align to left
</div>
<div class="col-md-3 border">
<span class="float-right">Float right
</span>
</div>
<div class="col-md-3 border">
Align to left
</div>
<div class="col-md-3 border">
<span class="float-right h3">Not floating rightside:
</span>
</div>
<div class="col-md-3 border">
Align to left
</div>
<div class="d-none d-md-block col-md-1"></div>
</div>
</div>
Please see this example here: https://jsfiddle.net/4p81h0mo/
Please view it on a large screen.
In the 2nd row there is a cell with text that wraps to a new line, but the space after first line is reserved so it doesn't float to right.
I have also tried d-flex + ml-auto, which only works when there is no line break too.
I'm trying to simply center justify and align two bootstrap columns inside a container. The columns are in different rows.
The grid layout is
<body style="height: 100vh;">
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
the cards are just to outline the containers.
I'm aware there are MANY questions on vertical alignment, and I may have missed the one that contains the answer I need. But my take away from most of them is that the parent needs to have some height.
The following works just fine if you have only one row, because you can center the column in the 100% height row. But if you have two rows, it doesn't so well, since each column is centered in its own row, and the rows are each the height of the window.
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
I wish I could just move the justify-content-center align-items-center up to the container, but alas that doesn't seem to do anything.
So, please help me, how can I place these flush, one on top of the other, smack in the middle of the screen?
Here's a good way to do this using Bootstrap's build in flexboxes.
<div class="container d-flex h-100 flex-column">
<div class="flex-grow-1"></div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM A</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM B</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM C</div>
</div>
</div>
<div class="flex-grow-1"></div>
</div>
We have two buffer flex rows, with flex-grow-1. Each of these rows will expand (with the same weight) to fill the top and bottom portions equally. Each of the content rows in the middle will have the height of their content.
The end result is the ITEM cards centered both vertically and horizontally on the screen. Because they are within individual rows, you can adjust margins/padding as necessary (by default they cards end up next to each other vertically.
Example screenshot of the above code in bootstrap
You could potentially do this one with one row + column and an internal flexbox, but that gives you less control over how the individual cards appear in relation to each other.
EDIT: d-flex makes the container a flex container around it's child rows, and flex-column makes the children render and stretch vertically rather than horizontally.
Simplest solution is to make the rows 50% height instead...
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
Demo: https://www.codeply.com/go/7POJtgNaQI
Or, the flexbox method would be to use Bootstrap flex-grow-1 class. Also you don't need the height on the body. Just use min-vh-100 on the container...
<div class="container d-flex flex-column min-vh-100">
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
https://www.codeply.com/go/n1eL2Jakuo
Always give the height through the inner element height, If I will give the height on container class element, it won't work, so let the container depend on the inner element's height, So try like this.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
<div class="col-12" style="min-height: 180px;">
<div
class="row bg-success position-absolute w-100 h-100 d-flex flex-row justify-content-center align-items-center">
<div class="col-6 pr-2">
<div class="card text-center">
hello
</div>
</div>
<div class="col-6 pl-2">
<div class="card text-center">
world
</div>
</div>
</div>
</div>
</div>
Hope you will understand this tiny mess, and so it would help you.
I have looked at the documentation of boostrap 4.
To center the content horizontally we could use justify-content-center class.
for example
i have 4 sub elements in a div like images and text, i want to center them all at once but its not working using above class. is it achievable?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="content col-12 col-sm-6 d-flex justify-content-center ">
<div class="photo-wrapper">
<img src="#" alt="">
</div>
<div class="text-wrapper">
<div class="title">
Title
</div>
<div class="position">
Position
</div>
<div class="phones">
Phone
</div>
</div>
</div>
<div class="col-12 col-sm-6 p-0 d-flex justify-content-center justify-content-sm-start">
See profile
</div>
It should look like below image but it doesn't.
Image link
You have to use it in a row class, for instance:
<div class="row justify-content-center">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>