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>
Related
So there two columns , i wanna fit my image inside my first column so my second column can go down!
enter image description here
my HTML :
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="hero-image container-fluid">
<img class="man-with-laptop img-fluid"
src="https://demo.templateflip.com/super/images/illustrations/hello3.svg" alt="">
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="hero-text-area container-fluid">
<p>HELLO!</p>
</div>
</div>
</div>
</div>
Try it like this below and see what happens.... 1 container, 1 row.
Also, it looks like you're adding a lot of your own CSS I can see from your class types. I think your added CSS is messing about with your layout and confusing Bootstrap.
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-sm-12">
<img class="man-with-laptop img-fluid" src="https://demo.templateflip.com/super/images/illustrations/hello3.svg" alt="">
</div>
<div class="col-lg-6 col-sm-12">
<p>HELLO!</p>
</div>
</div>
</div>
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/
i m trying to center align three divs using bootstrap. i have a div with class container and it has three divs in it. i am trying to center align these three divs in the browser. i can get them to the center but they appear centered left. below is the code
<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 d-flex h-100">
<div class="row align-items-center">
<div class="col col-4">
1 of 2
</div>
<div class="col col-4">
2 of 2
</div>
<div class="col col-4">
Extra
</div>
</div>
</div>
CHange your code to
<div class="container d-flex align-items-center h-100">
<div class="row">
<div class="col col-4">
1 of 2
</div>
<div class="col col-4">
2 of 2
</div>
<div class="col col-4">
Extra
</div>
</div>
Ok, so i have figured out what was the issue. And here is the code below. Both the container and the row div are to be set to h-100 and .d-flex class applied to the row div.
<div class="container h-100">
<div class="row align-items-center d-flex h-100">
<div class="col col-lg-3">
1 of 2
</div>
<div class="col col-lg-6">
2 of 2
</div>
<div class="col col-lg-3">
Extra
</div>
</div>
</div>
<div class="container h-100">
<div class="row align-items-center text-center">
<div class="col col-4 mx-auto">
1 of 2
</div>
<div class="col col-4 mx-auto">
2 of 2
</div>
<div class="col col-4 mx-auto">
Extra
</div>
</div>
</div>
I used the mx-auto class on your divs, I've also added the text-center class to center the text for effect.
See pen - https://codepen.io/buzztnt/pen/MWKVZpB
You can write code like this
<div class="container">
<div class="row text-center">
<div class="col-sm-4">1 of 2</div>
<div class="col-sm-4">2 of 2</div>
<div class="col-sm-4">Extra</div>
</div>
</div>
I have the following (kind of) code :
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="min-height: 100vh;">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row">
<div id="logo-frame" class="col d-flex justify-content-center align-items-center">
<img src="https://via.placeholder.com/1000x300" class="img-fluid overflow-auto">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
</div>
The image is of loaded dynamically and can be of any size and aspect ratio.
I want the div #logo-frame to :
take up all vertical space available (the container has min-height: 100vh but I'm not sure how to have the div eat it all up with flexbox) and pad the image with whitespace if required
have the image inside centered horizontally and vertically (I think I got it covered with justify-content-center align-items-center)
show a scrollbar if the height becomes too big to show the image (e.g with https://via.placeholder.com/1000x2000) but only on the image, not on the full page (I think the overflow-auto is enough, but not sure...)
How can I achieve this behavior easily with flexbox ?
Thanks
UPDATE
The following code is working.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="height : 100vh">
<div class="row h-100">
<div class="col-8 h-100">
<div class="card h-100">
<div class="card-body d-flex flex-column h-100">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row h-100 overflow-auto">
<div id="logo-frame" class="col d-flex justify-content-center align-items-center">
<img src="https://via.placeholder.com/1000x300" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
</div>
</div>
Can someone help me understand :
if it is possible to not have to cascade down the h-100 ?
why if I put min-height:100vh instead of height:100vh, it does not work ?
why if I don't put d-flex flex-column on the card-body element, it does not work
if there's a better way to make this work ?
Have you considered using the "max-height" css attribute in the parent container in conjunction with an auto scroll on overflow?
Update per your request
<!-- Add Slimscroll library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js" rel="stylesheet" />
Refactored Markup
<div class="container-fluid" style="min-height: 100vh;">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row">
<!-- as indicated in style attribute: Add a class w/these attribs/values -->
<div id="logo-frame" style="max-height: 1000px; overflow: hidden;" class="col d-flex justify-content-center align-items-center">
<!-- you might need to remove the css selector: overflow-auto from the class attrib (Test it) -->
<img src="https://via.placeholder.com/1000x1200" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
Instantiate Slimscroll on load
$(document).ready(function () {
$('#logo-frame').slimScroll({
// According to slimscroll documentation - leave height empty
height: '',
width: '100%',
alwaysVisible: false
});
})
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.