I'm using bootstrap-4, I don't understand why justify-content-around works for flex-row and not flex-column?
I applied flex-column justify-content-around for the div.item2 and it's not working. But when I use flex-row justify-content-around for div.main it works!
How can i make it work?
I have used css only for color purpose. Here is my code:
.main{background-color:pink;}
.item1{background-color:red;}
.a{background-color:green;}
.b{background-color:yellow;}
.c{background-color:blue;}
<head>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<div class="main d-flex flex-row justify-content-around bd-highlight">
<div class="item1 d-flex p-2 bd-highlight">Flex item 1</div>
<div class="item2 d-flex flex-column justify-content-around bd-highlight">
<div class="a p-2 bd-highlight">Flex item 2.1</div>
<div class="b p-2 bd-highlight">
<h2 class="price-text">Flex item 2.2</h2>
<p>fermentum iaculis eu</p>
<p>lectus vestibulum mattis</p>
<p>cursus in hac</p>
<button class="btn btn-lg btn-block btn-outline-dark" type="button">Sign Up</button>
</div>
<div class="c p-2 bd-highlight">Flex item 2.3</div>
</div>
</div>
</body>
The justify-content property aligns the flexible container's items
when the items do not use all available space on the main-axis
https://www.w3schools.com/cssref/css3_pr_justify-content.asp
In your case the items use all available space (The height of .item2 = the height of the content inside = No available space = No visual change).
Very simple code example to show this: add some height to .item2 (600px for example):
.main{background-color:pink;}
.item1{background-color:red;}
.a{background-color:green;}
.b{background-color:yellow;}
.c{background-color:blue;}
aside{
border: 5px solid green;
height: 600px;
}
#stroke{
border: 5px solid red;
}
<head>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<div class="main d-flex flex-row justify-content-around">
<main class="item1 d-flex p-2 bd-highlight">Flex item 1</main>
<aside class="item2 d-flex flex-column justify-content-around">
<div class="a p-2 bd-highlight">Flex item 2.1</div>
<div id="stroke" class="b p-2 bd-highlight">
<h2 class="price-text">Flex item 2.2</h2>
<p>Nested item 1</p>
<p>Nested item 2</p>
<p>Nested item 3</p>
<button class="btn btn-lg btn-block btn-outline-dark" type="button">Sign Up</button>
</div>
<div class="c p-2 bd-highlight">Flex item 2.3</div>
</aside>
</>
</body>
Related
I want to switch columns order using bootstrap and jQuery on click.
I've done this for the left button, but it doesn't work:
$("#left").on("click",
function() {
$("#A").removeClass('order-1').addClass('order-2');
$("#B").removeClass('order-2').addClass('order-1');
console.log("1 done")
},
function() {
$("#A").removeClass('order-2').addClass('order-1');
$("#B").removeClass('order-1').addClass('order-2');
}
);
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="arrow position-absolute top-50 start-0 translate-middle-y ps-2" id="left">left</div>
<div class="arrow position-absolute top-50 end-0 translate-middle-y pe-2" id="right">right</div>
<div class="col-6 bg-success d-flex align-items-end order-1" id="A">one
</div>
<div class="col-6 bg-primary d-flex align-items-end order-2" id="B">two
</div>
Here you go...
There are a few problems.
You tagged this questions as bootstrap-4, but used bootstrap-5 in your code.
Bootstrap classes order-1 and order-2 were not even working because you need to wrap col classes with a row class.
Use jQuery toggleClass to change classes.
See the snippet below.
$(document).ready(function() {
$(".col-6").click(function() {
$("#A").toggleClass("order-1 order-2");
$("#B").toggleClass("order-2 order-1");
});
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-6 bg-success d-flex align-items-end order-1" id="A">one</div>
<div class="col-6 bg-primary d-flex align-items-end order-2" id="B">two</div>
</div>
I am trying to build custom video control.
Here is my code:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
video {
transform: scale(-1, 1);
object-fit: cover;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body class="p-1">
<div class="border-top border-primary container-fluid">
<div class="h-25 row">
<div class="border-left border-bottom border-primary col-6 d-flex flex-column p-1" style="box-sizing:border-box">
<div class="bg-primary h-75 text-white">
sdfsfd
</div>
<div class="bg-secondary h-25 text-danger">
9080
</div>
</div>
<div class="border-left border-bottom border-right border-primary col-6 d-flex flex-column p-1">
<video id="remoteView" autoplay muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="row">
<div class="align-items-center border-left border-bottom border-right border-primary col-12 d-flex flex-row justify-content-center p-0">
<div class="btn-group-toggle d-flex justify-content-center p-1">
<button class="btn-sm btn btn-lg btn-success">A</button>
</div>
<div class="btn-group-toggle d-flex justify-content-center p-1">
<button class="btn-sm btn btn-lg btn-success">B</button>
</div>
<div class="btn-group-toggle d-flex justify-content-center p-1">
<button class="btn-sm btn btn-lg btn-success">C</button>
</div>
</div>
</div>
</div>
</body>
</html>
The upper left cell cannot be displayed correctly when the Chrome browser window is minimized.
However, in the Firefox browser, the problem does not exist.
How can I fix it?
video { height: 100vh; min-height: 100%; }
You can get more details about video fullscreen, following this How to - Fullscreen Video
Try pressing Ctrl+Shift+R.
In most cases it will fix the problem.
I have tried to use a bootstrap search box in my code that is supposed to be rendered like this:
But for some reason it does not render correctly in my layout which is something like this:
Here is my html code for this basic layout. Is there anything I can do so the button renders corrctly on the search box?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Weather Dashboard</title>
</head>
<body>
<div class="container">
<div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div>
<div class="row" id="secondRow">
<div class="col col-lg-3">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search"
aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div class="col">
2 of 3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>
You can check the below code. or below youtube link for the better explanation:
https://youtu.be/34Ee-HLtMgU
Only fontawesome library was missing.
I have added one more search box. try to add submit button instead of adding span tag. This is the best practice.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Weather Dashboard</title>
</head>
<body>
<div class="container">
<div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div>
<div class="row" id="secondRow">
<div class="col col-lg-3">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search"
aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="input-group mt-3">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="col">
2 of 3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>
I don't know if you missed this point, but you didn't include the "fontAwesome" CDN link. You need to use it to display the search icon. I also interpreted some of your code to create the image. You can check it.
And if you want search input to cover the entire line, you should use col-lg-12 instead of col-lg-3. The Bootstrap grid system uses a 12 column system. You must know that. https://getbootstrap.com/docs/4.4/layout/grid/
I used bootstrap's own classes to set border and icon background color. warning color for your situation
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/dc0c634418.js" crossorigin="anonymous"></script>
<div class="container">
<!-- <div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div> -->
<div class="row" id="secondRow">
<div class="col col-lg-12">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control border border-warning my-0 py-1 amber-border" type="text" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3 bg-warning" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<!-- <div class="col">
2 of 3
</div> -->
</div>
</div>
First try changing fa fa-search in order to the icon display.
in this line => idk if u can use amber try using bg-warning (this is bootstrap), but if you want the exact color i would use css.
and maybe it is grey because the icon is not there.
I am trying to give border to div with bootstrap 4 border. With only border property it is appearing weird while with other properties no border is showing up. Please find the code snippet below.
I have tried with the beta 2 version also.
Let me know if I am missing something.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<!-- Just created a contianer to test the border class -->
<div class="container">
<div class="text-center">
<h1> Testing bootstrap 4</h1>
</div>
<div class="row mt-2">
<div class="col-12">
<!-- Testing span with class border -->
<span class="border">
<div class="text-primary">Testing Bootsrap 4 Border </div>
</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-0">Testing Bootsrap 4 Border 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-top-0">Testing Bootsrap 4 Border top 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-right-0">Testing Bootsrap 4 Border right 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-12">
<span class="border border-light">testing border light</span>
</div>
<div class="col-sm-12"> col 2</div>
</div>
</div>
</body>
</html>
For bootstrap border to work, you have to add the border class. So for example, when you write <span class="border-right-0"> It is stating that no border should be to the right. You haven't stated a border to begin with though so no border is going to show. What you need to do is <span class="border border-right-0">.
It's the Subtractive border so first, you will need a border so you need to include the border class first.
<span class="border border-top-0"></span>
To see it in more effect try this:
<span class="border border-top-0 p-2 border-primary">Border</span>
Using contextual classes and padding utilities you can easily get the difference.
Hey you just need to add some classes for showing the border i.e. border border-primary, border border-secondary etc.
And class "border border-0" means no border.
In class="border border-light", "border-light" is another contextual border color.
Below are useful classes:
A list of contextual border color you can use the below classes:
border-primary
border-secondary
border-white
border-dark
border-light
border-info
border-warning
border-danger
border-success
If you want to get easier then try https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp or https://v4-alpha.getbootstrap.com/utilities/borders/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<title>Home</title>
</head>
<body>
<!-- Just created a contianer to test the border class -->
<div class="container">
<div class="text-center">
<h1> Testing bootstrap 4</h1>
</div>
<div class="row mt-2">
<div class="col-12">
<!-- Testing span with class border -->
<span class="border">
<div class="text-primary">Testing Bootsrap 4 Border </div>
</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-0 border border-primary">Testing Bootsrap 4 Border 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border border-primary border-top-0">Testing Bootsrap 4 Border top 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border border-danger border-right-0">Testing Bootsrap 4 Border right 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-12">
<span class="border border-light">testing border light</span>
</div>
<div class="col-sm-12"> col 2</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
This question already has answers here:
Vertical alignment in Bootstrap 4
(2 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 5 years ago.
Reading the Bootstrap docs you can get to the alignment examples section.
It tells you can use use flexbox alignment utilities to vertically and horizontally align columns as Bootstrap CSS classes align-items-start, align-items-center and align-items-end but when I'm trying it the content is not vertically aligned as expected with a full height container, see the following code:
html,
body {
height: 100%;
}
.fill {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: lightblue;
}
.col {
border: 1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container fill">
<div class="row align-items-start">
<div class="col text-center">
align-items-start
</div>
</div>
<div class="row align-items-center">
<div class="col text-center">
align-items-center
</div>
</div>
<div class="row align-items-end">
<div class="col text-center">
align-items-end
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
I expected to have align-items-center content on the vertical middle and align-items-end at the bottom of the container.
What I'm doing wrong or what I misunderstood?
In order to vertically align items in flex-container you need to give height to flex-container.
.row{
min-height:100px;
}
html,
body {
height: 100%;
}
.fill {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: lightblue;
}
.col {
border: 1px solid red;
}
.row{
min-height:100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container fill">
<div class="row align-items-start">
<div class="col text-center">
align-items-start
</div>
</div>
<div class="row align-items-center">
<div class="col text-center">
align-items-center
</div>
</div>
<div class="row align-items-end">
<div class="col text-center">
align-items-end
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>