KevinM
Reputation: 329
Bootstrap 4 - justify content center on flexbox child (override flex parent container)
Using Bootstrap 4, I'm trying to center an img at the botton middle of the main div. However, it does not center.
How it should be:
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- 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="css/bootstrap.min.css">
<style>
section.masthead2{
background-color:orange;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:80vh;
}
.gear {
height: 50px;
}
.botonhome{
background-color:#eb6626;
color: #ffffff;
padding-left:2em;
padding-right:2em;
font-family:'Josefin Sans', sans-serif;
font-weight:500;
border-radius:0.5em;
font-size:1.2em;
}
</style>
</head>
<body>
<section class="container-fluid masthead2 d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-12 d-flex justify-content-center">
<h1 class="textoprincipal ">Lorem Ipsum is simply dummy text of the printing</h1>
</div>
<div class="col-12 d-flex justify-content-center">
<a class="btn botonhome mr-3" routerLink="/backoffice/job" routerLinkActive="active" role="button">Testing1</a>
<a class="btn botonhome" routerLink="/backoffice/jobs" routerLinkActive="active" role="button">Testing2</a>
</div>
</div>
<div class="row d-flex align-self-end ">
<div class="col-12">
<img class="gear text-center" src="https://upload.wikimedia.org/wikipedia/commons/1/13/Cog%2C_Web_Fundamentals.svg">
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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="js/bootstrap.min.js"></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>
Since the main container-fluid has d-flex both subsequents div rows are place one beside each other horizontally.
Below is how it would look like without d-flex in the main container-fluid (used a background color for the gear to differentiate)
After d-flex is applied in the main container-fluid (since I need to align and justify the main title and buttons centered) the gear icon image is positioned on the left corner due to d-flex in main container.
How would I made this element d-block override from it's main container-fluid so I can then move it at the bootom middle of the div?
Can this be achieved via Bootstrap classes?
I can not make two main container-fluid, since the background will be an image.
Upvotes: 3
Views: 2946
Answers (3)
Khushbu Vaghela
Reputation: 619
You can achieve this by bootstrap 3
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
Using class="text-center"
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
section.masthead2{
background-color:orange;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100vh;
}
.gear {
height: 50px;
}
.botonhome{
background-color:#eb6626;
color: #ffffff;
padding-left:2em;
padding-right:2em;
font-family:'Josefin Sans', sans-serif;
font-weight:500;
border-radius:0.5em;
font-size:1.2em;
}
</style>
</head>
<body>
<section class="container-fluid masthead2 d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-12 d-flex text-center">
<h1 class="textoprincipal ">Lorem Ipsum is simply dummy text of the printing</h1>
</div>
<div class="col-12 d-flex text-center">
<a class="btn botonhome mr-3" routerLink="/backoffice/job" routerLinkActive="active" role="button">Testing1</a>
<a class="btn botonhome" routerLink="/backoffice/jobs" routerLinkActive="active" role="button">Testing2</a>
</div>
</div>
<div class="row d-flex align-self-end ">
<div class="col-12 text-center">
<img class="gear text-center" src="https://upload.wikimedia.org/wikipedia/commons/1/13/Cog%2C_Web_Fundamentals.svg">
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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="js/bootstrap.min.js"></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>Upvotes: 0
Hari17
Reputation: 489
Now I've the posted the answer with img tag also...please check it...
I've posted the answer but you want to change it to class corresponding to your class given in your img tag.
NOTE :
The below code snippet is an example of a Buttontag.In your case change it to img. Now I've included img Tag also in the below example
.gear {
height: 50px;
position:absolute;
margin-left:50%;
margin-right:50%;
transform: translateX(-50%);
} <img class="gear" src="http://www.clker.com/cliparts/2/5/7/f/1297719143988960365gear_red.png" style="width:50px;height:50px;"/>Upvotes: 1
Khushbu Vaghela
Reputation: 619
You need to wrap image in <div> and give text-align:center to it
.imgcenter{
text-align: center;
}<section class="container-fluid d-flex align-items-center">
<div class="row d-flex justify-content-center" style="text-align: center;">
<div class="col-12">
<h1 class="d-flex justify-content-center">Lorem Ipsum is simply dummy text of the printing</h1>
</div>
<div class="col-12 d-flex justify-content-center">
<a class="btn mr-3" routerLink="/backoffice/job"
routerLinkActive="active" role="button">Testing1</a>
<a class="btn botonhome" routerLink="/backoffice/jobs"
routerLinkActive="active" role="button">Testing2</a>
</div>
</div>
<div class="imgcenter">
<img class="d-flex align-self-end justify-content-center" src="http://www.clker.com/cliparts/2/5/7/f/1297719143988960365gear_red.png" width= '50'>
</div>
</section>Upvotes: 0
Related Questions
- Vertically center a flex item whos parent is flex-column
- Flex justify-content center and left/right align items
- How to stack flex children over each other
- Bootstrap 4 Center element using Flexbox
- justify content between doesnt work in parent flex
- justify-content to center using Flex Box
- Centering flex items on wrap with Bootstrap
- Flexbox div not centering inside another div
- Flex justify-content: center overwrite
- Centering columns in flexbox