I am working with Bootstrap. I would like to change the default div position when the screen re-sizes to sm/xs (the default position is the purple div is over red, when you do your screen/windows smaller). Basically I would like to get what the below image shows.
I have tried to change it position with push and pull, but it doesn't work.
Thanks
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="Keywords" content="">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div style="background-color:#8000ff; height:200px" class="col-md-8 col-sm-12">Example1</div>
<div style="background-color:red; height:200px" class="col-md-4 col-sm-12">Example2</div>
</div>
</div>
</body>
</html>
You can easily change the order of grid columns with .col-md-push-* and .col-md-pull-* modifier classes.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="Keywords" content="">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div style="background-color:red; height:200px" class="col-sm-12 col-md-4 col-md-push-8">Example2</div>
<div style="background-color:#8000ff; height:200px" class="col-sm-12 col-md-8 col-md-pull-4 ">Example1</div>
</div>
</div>
</body>
</html>
Related
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
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 want to have in same row a and a button. on float:left and button on float:right. So, one in one side and the other in same position on the other side.
<div class="row">
<div>
<h3>Catalogue</h3>
<div>
<i class="fa fa-search"></i>
</div>
</div>
</div>
This is my code so far. I am using bootstrap 3.
This will resolve your query.
<!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/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3>Catalogue</h3>
</div>
<div class="col-sm-6">
<div class="pull-right">
Click Me<i class="fa fa-search"></i>
</div>
</div>
</div>
</div>
</body>
</html>
Is this what you're looking for? ↓↓
<!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/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Catalogue
Click Me<i class="fa fa-search"></i>
</h3>
</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>