I'm in the process of learning bootstrap, and I seem to be stuck at one of the most basic things - vertical alignment of columns. I am trying to get content to be anything but aligned at the top, but failing miserably.
I rewrote my code multiple times, but got no result. I started a new html document with just the code from bootstrap's documentation, but everything is still aligned at the top of the document. What am I missing here?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container text-center">
<div class="row align-items-end">
<div class="col">
should be bottom - One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
You're looking for the align-items-start class in Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container text-center vh-100">
<div class="row align-items-center h-100">
<div class="col">
should be bottom - One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
To align all the items inside a grid we have multiple classes.
1. All the item's text starts from the start with align-items-start
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container text-center">
<div class="row align-items-start">
<div class="col">
should be bottom - One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
All the items aligned vertically at the center with the align-items-center class
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container text-center">
<div class="row align-items-center">
<div class="col">
should be bottom - One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
```
**All text elements will be aligned at the end of the grid with align-items-end class **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container text-center">
<div class="row align-items-end">
<div class="col">
should be bottom - One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
you can see all the alignments classes here
https://getbootstrap.com/docs/5.0/utilities/flex/#align-items
Related
I am trying to center the content of a column using Bootstrap. This is my current code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<!-- CODE -->
<header>
<div class="container-fluid">
<div class="row">
<!-- LEFT -->
<div class="col-md-6 p-md-5 p-4" style="background-color: lime;">
<div> <!-- THIS SHOULD BE IN THE CENTER -->
<h1>Welcome</h1>
<h2>to my web!</h2>
</div>
<div> <!-- THIS SHOULD BE IN THE BOTTOM -->
<p>Icons</p>
</div>
</div>
<!-- RIGHT -->
<div class="col-6 d-md-block d-none" style="background-color: red"></div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I have tried using d-flex justify-content-center, as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<!-- CODE -->
<header>
<div class="container-fluid">
<div class="row">
<!-- LEFT -->
<div class="col-md-6 p-md-5 p-4 d-flex justify-content-center" style="background-color: lime;">
<div> <!-- THIS SHOULD BE IN THE CENTER -->
<h1>Welcome</h1>
<h2>to my web!</h2>
</div>
<div> <!-- THIS SHOULD BE IN THE BOTTOM -->
<p>Icons</p>
</div>
</div>
<!-- RIGHT -->
<div class="col-6 d-md-block d-none" style="background-color: red"></div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
But this is not working...
How can I do to put the elements correctly inside the column?
You can add “ align-items-center” to the class, if that still doesn’t work, make sure you’re not adding different margins to left and right of the section, but justify-content-center and align-items-center will work fine
Adding d-flex flex-column h-100 to the child, with an align-items-center solves the scenario.
I want a specific display depending on whether I have an image or not in a row bootstrap.
I want when I have an image and text content, I can have in the same row for a column size 4 my image and right my text content with a column size of 8
enter image description here
According to the display below and if the image is not there I can have instead of the image the content.
<div class="container ">
<div class="row ">
<div class="col-md-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-md-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
How can I do it
use align-items-center as class in parent div. here is the snippet
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container ">
<div class="row align-items-center">
<div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
use align-items-center as class in parent div. here is the snippet
and if you want to remove image then you have to add style of some specific height so it will align all items in center according to the height.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container ">
<div class="row align-items-center">
<div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
I'm using bootstrap 4 to build a website. When using google chrome's device toggle toolbar, my website's homepage isn't able to display the screen properly on any of the handheld devices; I need to scroll to see all three posters. But If I click onto movie1, all the content is displayed perfectly(no scrolling needed). Both the files use the same css file.
I've made sure to include this code in both the html files:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and this into the css file:
#media (min-width: 768px) and (max-width: 992px){
}
#media (min-width: 480px) and (max-width: 767px) {
}
This is the code for the head of the homepage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0">
<link rel="icon" href="movie-symbol-of-video-camera_icon-icons.com_72981.png">
<link rel="stylesheet" href="style.css">
<title>indextest</title>
<style>
</style>
</head>
This is the code for the head of the movie1 html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="icon" href="../static/images/movie-symbol-of-video-camera_icon-icons.com_72981.png">-->
<link rel="icon" href="movie-symbol-of-video-camera_icon-icons.com_72981.png">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
Not sure why one page is working and the other isn't. Any ideas on how to fix this?
Fig below: Content not displayed properly; need to scroll to see rest of the page
Fig below: content fits perfectly; no scrolling needed
I dont know what you want, exactly. But, if you are using bootstrap 4 then use bootstrap 4 classes for responsive screen and use CSS media query for another view using its class or make your own class to implement view acc. to you.
I have added some example by using your screen which is responsive for
all screen's using bootstrap 4 grid classes and other classes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Home Page</h1>
<div class="row">
<div class="col-1">
<img src="www.google.com">
</div>
<div class="col-11">
<p>A movie poster for movie 1</p>
</div>
</div>
<div class="row">
<div class="col badge badge-success my-2 mx-2">Netflix</div>
<div class="col badge badge-success my-2 mx-2">Amazon Prime</div>
<div class="col badge badge-success my-2 mx-2">Hulu</div>
<div class="col badge badge-success my-2 mx-2">Disney+</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Home Page</h1>
<div class="row">
<div class="col-1">
<img src="www.google.com">
</div>
<div class="col-11">
<p>A movie poster for movie 1</p>
</div>
</div>
<div class="row">
<div class="col badge badge-success my-2 mx-2">Netflix</div>
<div class="col badge badge-success my-2 mx-2">Amazon Prime</div>
<div class="col badge badge-success my-2 mx-2">Hulu</div>
<div class="col badge badge-success my-2 mx-2">Disney+</div>
</div>
</div>
</body>
</html>
I have a sidebar in admin panel. And I try for this sidebar height be 100%, but I did not solve my problem.
<html class="h-100">
<head>
<title>Admin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body class="h-100">
<div class="row h-100">
<div class="col-md-2 h-100 bg-dark" id="sidebar"></div>
<div class="col-md-10"></div>
</div>
</body>
</html>
add this to your style sheet
#sidebar{
height:100vh;
}
Full Code
<html>
<head>
<title>Admin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-2 bg-dark" id="sidebar"></div>
<div class="col-md-10"></div>
</div>
</body>
</html>
I can't find what I did wrong. The syntax looks okay but Netbeans shows an error every time I call a class from bootstrap. Is something wrong with my settings? Help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style=" background-image : url('2.png'); background-repeat: repeat;">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-12">
<img src="logo_final.png" alt="logo" style="width:100px; height:100px; margin-left: 45%;"><br/> <br/>
</div>
</div>
</div>
Check https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css this link on your browser find col-12 class. It is not present there so it's not working.
You can replace col-12 with col-lg-12 and align-items-center with text-center as below snippet. It's working in below snippet.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style=" background-image : url('2.png'); background-repeat: repeat;">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<img src="https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg?sz=48" alt="logo" style="width:100px; height:100px;"><br/> <br/>
</div>
</div>
</div>
</body>
Try changing this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
To this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>