This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 1 year ago.
I am trying to create a heading next to an image for the main banner of a web page. An example of what I'm trying to do can be found here: https://optimaninja.com/
I'm using bootstrap, and here is some simple starter code I have to begin:
BOOTSTRAP CODE:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class='container other'>
<div class="row">
<div class="col-5">
<h3>Understand Police Behavior</h3>
</div>
<div class="col-7">
<img src="pic.jpg" class="img-fluid" style="max-width: 600px;">
</div>
</div>
</div>
</div>
</body>
</html>
It yields a front page that looks like this:
What I would like to do is get my heading aligned vertically so that it is centered next to the image, and not up top.
In order to do so, I've tried different permutations of the following CSS selectors to both the other and h3 elements:
<style>
.other {
vertical-align: center;
justify-content: center;
align-items: center;
}
</style>
None of this seems to have any effect.
Thank you for your help.
You can try adding the "align-items-center" class to your "row" div (or change your .other to .row in your CSS).
use the bootstrap class of flex alignment
d-flex justify-content-center align-items-center
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class='container other'>
<div class="row position-relative">
<div class="position-absolute h-100 d-flex justify-content-center align-items-center">
<h3>Understand Police Behavior</h3>
</div>
<div class="col-12">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="img-fluid" style="max-width: 600px;">
</div>
</div>
</div>
</div>
</body>
</html>
okay just use this in your style tag
.row {
display: flex;
justify-content: center;
align-items: center;
}
and listen my tip you can not use propertys like this vertical- align: center;
justify-content: center;
align-items: center;
without discribing your dispay
Related
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
I'm trying to make a search box on left end and arrows on right end. Float is not working and the arrows are coming very close to search box. Also tried left:0px and right:0px. Could anyone help with this? Thank you.
.candidate {
display: flex;
width: 100%;
}
.candidate-search {
width: 50%;
float: left;
}
.pagearrow {
display: flex;
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="col-xl-7 col-lg-7 col-md-7">
<div class="conatiner-fluid">
<div class="row">
<div class="candidate">
<div class="candidate-search">
<input class="filter-searchbox py-2" type="search" name="search" placeholder="Search" />
</div>
<div class="pagearrow">
<span class="material-icons">arrow_back_ios</span>
<span class="material-icons">arrow_forward_ios</span>
</div>
</div>
</div>
</div>
</div>
Float property is not working on flex box property. You can try to use
justify-content to align elements
Example:
justify-content: space-between;
I want my image to be right-aligned. So I did this:
.section {
margin-bottom: var(--double-margin);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="section">
<div class="row">
<div class="col">
<img class="rounded float-right w-50" src="https://via.placeholder.com/1000x200.jpg"/>
</div>
<div class="col">
<p>So other text</p>
</div>
</div>
</div>
</div>
As the result, my image went on the left (because of w-50). So how to tell my image that it should be 50% width and aligned to right?
Here is your example and it works fine. You either need to add a reproducible example of your problem or find the difference between your code and my example. I can guess that for some reason your .col does not grow to 100% of the width that's why the image is aligned to the right side of the smaller container and for you, it looks like it's aligned to left.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<img class="rounded float-right w-50" src="https://via.placeholder.com/1000x200.png"/>
</div>
I'm trying to understand how to align children of a row or column in Bootstrap. I'm quite new to Bootstrap layouts so keep that in mind. But I'm very familiar with regular CSS flex boxes.
I want to center the buttons in the left column shown below:
My code to attempt this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>The HTML5 Herald</title>
<link rel="stylesheet" href="../css/paginator.css" />
<script type="text/javascript" src="../js/paginator.js"></script>
<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="outer-box container thick-border">
<div class="row">
<div class="col-lg-7 thin-border">
<div class="row d-flex justify-content-center">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
<div class="col-lg-1 thin-border">sdfsdf</div>
<div class="col-lg-4 thin-border">sdfsdf</div>
</div>
</div>
</body>
</html>
In case you want to see my own custom CSS:
.outer-box {
margin-top: 40vh;
width: 60vw;
}
.thick-border {
border: 5px solid black;
}
.thin-border {
border: 2.5px solid black;
}
I just don't get how you're supposed to align children properly with the Bootstrap row- and cols. Should I just ditch the grid system and only use the flex boxes instead entirely?
Thanks!
You need to upgrade your bootstrap version to atleast 4 as the classes you have used in your code works in Bootstrap version 4 or greater.
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 2 years ago.
Looks so simple, but so far I was not able to find a single answer to this.
The problem is simple, I have only one image, and I want to show this in the middle of the page and done.
Here is my code that works using only CSS:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
And on my HTML code just this:
<div class="centered">
<img src="https://via.placeholder.com/100">
</div>
So far I have not found one single answer how to to this using Bootstrap 4, can anyone help on this?
Here it is, just use 4 classes provided by the Bootstrap 4.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="d-flex justify-content-center align-items-center vh-100">
<img src="https://via.placeholder.com/100">
</div>
Use code as below
html, body {height:100%}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/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.0/js/bootstrap.min.js"></script>
<div class="d-flex h-100 align-items-center">
<img class=" m-auto" src="smiling_face_emoji.png">
</div>
Bootstrap has a h-100 property to set height to 100% so make sure it is applied to your container and row.
No other css is necessary as Bootstrap4 has the classes needed to accomplish this by itself.
HTML Code:
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<img src="smiling_face_emoji.png">
</div>
</div>
Here it is:
html{
height:100vh;
width:100vw;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
<div class="centered">
<img src="https://via.placeholder.com/100">
</div>
I'm having trouble vertically centering both my text id="WhatIsMasterRow" and image id="WhatIsMasterPhoto. I've tried wrapping it in a .container and using the bootstrap center-block, as well as some other centering classes.
<!DOCTYPE html>
<html lang="en">
<body>
<!-- What is Master Page -->
<div class="row" id="WhatIsMasterRow">
<div class="col-md-6" id="WhatIsMasterText">
<div class="row-text", id="SubHeaderTextLeft"> What is a Master? </div>
<div class="row-text", id="RegularTextLeft"> Test Text </div>
</div>
<div class="col-md-2 col-md-offset-2 center-text">
<img id="WhatIsMasterPhoto" src="Resources/Images/Peter-Limmer-boots-2.jpg">
</div>
</div>
</body>
I've tried using margin: 0 auto; as well, but it's not working.
.col-md-2 {
margin: 0 auto;
background-color: black;
}