This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 1 year ago.
I am trying to vertical align the 2 rows I have inside the container-fluid, they are already aligned horizontally. The goal is to have it in the middle of the screen.
<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Mapa Gravida</title>
<style>
html, body {
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid h-100">
<div class="row justify-content-center align-items-center">
<p>O seu email foi enviado com sucesso, deseja criar outro mapa?</p>
</div>
<div class="row justify-content-center align-items-center">
<button type="button" class="btn btn-dark mr-3" onclick="redirectToCardioMap()">Mapa Cardio</button>
<button type="button" class="btn btn-dark" onclick="redirectToPregnantMap()">Mapa Gravida</button>
</div>
</div>
</body>
</html>
preview
You can first add d-flex class to your parent div and align the two rows vertically and horizontally using align-items-center and justify-content-center. Then you can wrap both your rows inside a div. Try below code :
<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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Mapa Gravida</title>
<style>
html, body {
height: 100%;
}
</style>
</head>
<body>
<div class="d-flex container-fluid h-100 align-items-center justify-content-center">
<div >
<div class="row align-items-center">
<p>O seu email foi enviado com sucesso, deseja criar outro mapa?</p>
</div>
<div class="row justify-content-center align-items-center">
<button type="button" class="btn btn-dark mr-3" onclick="redirectToCardioMap()">Mapa Cardio</button>
<button type="button" class="btn btn-dark" onclick="redirectToPregnantMap()">Mapa Gravida</button>
</div>
</div>
</div>
</body>
</html>
Related
I would like to put my button at the top right at the same height as the title.
Here is an example:
enter image description here
My result for now
enter image description here
I think I have a problem with my divs? The button does not want to be placed at the top right.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
<h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
<button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</body>
</html>
You can use rows and columns to keep content aligned in bootstrap. Rows have 12 columns so here I've used 10 columns for the heading and 2 columns for the button and aligned the button right.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
<div class="row">
<div class="col-10 my-2">
<h2 class="text-start">Signalétique de SOLVAY BE (Euronext Brussels)</h2>
</div>
<div class="col-2 my-2 text-right">
<button type="button" (click)="goBack()" class="btn btn-primary">Retour</button>
</div>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</div>
</body>
</html>
You could use position:absolute or float:right to make it in the right corner:
button{
position: absolute;
right:20px;
top:90px;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
<h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
<button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</body>
</html>
or use float:right:
button{
float: right
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
<h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
<button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</body>
</html>
So I'm just sandboxing how responsive flex and shrink works in Bootstrap. Below is my code. Nothing seems to work. I've tried using different breakpoints such as lg/md/sm but to no luck. Would appreciate any guidance.
<!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">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<div class="container-fluid">
<div class="row bd-highlight">
<div class="col border border-2 flex-md-shrink-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0">Flex item 2</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Since .col is flex: 1 0 0% columns will grow, but not shrink so your test isn't doing anything to override .col. You could change flex-grow to override the .col behavior...
<div class="container-fluid">
<div class="row">
<div class="col border border-2 flex-md-shrink-1 flex-md-grow-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0 flex-md-grow-0">Flex item 2</div>
</div>
</div>
https://codeply.com/p/0pUmeIxKEX
Try to use only d-flex and not combine it with bootstrap's grid system (.col and .row)
Here is the modified example:
<!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">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
<style>
.item-container {
width: 100%;
}
.item {
flex-basis: 100%;
flex-shrink: 200px;
}
.item-shrink {
flex-shrink: 3;
}
</style>
</head>
<body>
<div class="item-container d-flex bd-highlight">
<div class="item item-shrink border border-2">Flex item 1</div>
<div class="item border border-2">Flex item 2</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I have been trying various combinations for the past one two hours and I am unable to get this basic thing right. I am using Bootstrap 4 and I have an image and a login dialog just beneath it.
I took the basic boiler plate code from Bootstrap 4 and tried to do alignment using
https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment
https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment
but in vain. I request you to tell me what part I a missing.
Here is my html file.
<!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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<title>Hey - A group chat messenger!</title>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-4">
<img src="hey_logo.png" id="logo" class="img-fluid">
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
<button type="submit" class="btn btn-primary">Login with Google</button>
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
<small id="subtextMessage" class="form-text text-muted">Say Hey! to new beginnings</small>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</script>
</body>
</html>
Thanks,
Pavan.
The above problem can be resolved by using a separate row with centre-aligned content for each element (image, button, text) inside a column.
Here is the working code:
<!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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<title>Hey - A group chat messenger!</title>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-3">
<div class="row justify-content-md-center">
<img src="/hey-logo.png" id="logo" class="img-fluid">
</div>
<div class="row justify-content-md-center">
<button type="submit" class="btn btn-primary">Login with Google</button>
</div>
<div class="row justify-content-md-center">
<small id="subtextMessage" class="form-text text-muted">Say Hey! to new beginnings</small>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</script>
</body>
</html>
Output:
A button is an inline-block element in Bootstrap. Try using the text-center.
<div class="row">
<div class="col-4 text-center">
<button type="submit" class="btn btn-primary">Login with Google</button>
</div>
</div>
If it looks not fine (for example the image is not symettric), then give the col-4 some padding on the left or right side.
I am working on the site with bootstrap 4 and the button in the showcase is not getting the colour i am giving to it.
HTML
<button class="btn btn-primary btn-lg text-white ">book me </button>
CSS
btn-primary {
background: coral;
}
Provide more specific classes or use !important.
.btn-primary.btn-lg.text-white {
background-color: coral;
}
<!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">
<!-- our css -->
<link rel="stylesheet" href="./app.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,300,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<title>Aurora Grove</title>
</head>
<body>
<section id="showcase">
<div class="header container text-white d-flex d-flex align-items-center flex-column py-4 border hight-showcase justify-content-center">
<button class="btn btn-primary btn-lg text-white ">book me </button>
</div>
</section>
</body>
new to Bootstrap and having some issues with nested columns. for som reason they are disproportionate. First pair of nested columns are "compressed" in half but those in the second are proportioned just fine. see below.
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">.col-sm-6
<div class="row">
<div class="col-sm-3" style="background-color:lightcyan;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lightgray;">.col-sm-3</div>
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
<div class="row">
<div class="col-sm-3" style="background-color:lightcyan;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lightgray;">.col-sm-3</div>
</div>
</div>
</div>
</body>
</html>
Any help on how to fix the alignment would be really appreciates. if this is just a limitation then i guess a new layout will be in order...
thanks,
Marc
There are couple of mistakes in your code. First is that your text is showing col-xs-6 for the nested columns on the left but you are actually setting them col-xs-6 that's why they were covering half of the width only.
Second one is that you are closing the right div col-xs-4 before including nested div.
Here's is your working code:
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-8" style="background-color:lavender;">.col-sm-8
<div class="row">
<div class="col-sm-6" style="background-color:lightcyan;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lightgray;">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4
<div class="row">
<div class="col-sm-6" style="background-color:lightcyan;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lightgray;">.col-sm-6</div>
</div>
</div>
</div>
</div>
</body>
</html>