I'm trying to center the items in <main> but there is a gap (I couldn't figure the reason) between the <h1> and <h3> element. Can somebody help to figure out why this gap occurs? TIA
It was perfectly aligned so probably I messed up while fixing navbar and the first version is not working anymore. I've also inspect page and it doesn't show anything between these items they all inside the <main> but nothing between them.
<!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">
<!-- adding Google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Roboto&display=swap" rel="stylesheet">
<!-- adding bootstrap -->
<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">
<!-- https://favicon.io/emoji-favicons/money-mouth-face/ -->
<link href="/static/favicon.ico" rel="icon">
<link href="/static/index.css" rel="stylesheet">
<title>{% block title %}Welcome{% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-light container-fluid d-flex align-items-top justify-content-start">
<a class="navbar-brand" href="/"><img href="index.html" src="/static/ladybug.png" width="30" height="30" class="d-inline-block align-left" alt=""></a>
<a class="navbar-brand" href="/login">Login</a>
<a class="navbar-brand" href="/register">Register</a>
</nav>
{% block main %}
<main class="container-fluid d-flex align-items-center justify-content-center h-100 w-100">
<div class="row align-items-center h-100">
<h1 class="text-center col-12">Need help with debug your code?</h1>
<section class="text-center col-12">
<h3 class="d-inline-flex p-2"><strong>Find a study mate to solve problems quicker</strong></h3>
<div>
<center><hr></center>
</div>
<button type="button" class="btn btn-danger">Join Us Today!</button>
</section>
</div>
</main>
{% endblock %}
<footer class="row footer">
<p class="text-center col-12 ">EDX Harvard | CS50 2019 | Final Project</p>
</footer>
</body>
</html>
I mainly used bootstrap but here my css
body,
html
{
margin: 0;
width: 100%;
height: 100%;
background: url(/static/images/girl_2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbar-brand
{
font-family: 'Anton', sans-serif;
font-size: 3vmin;
}
h1
{
padding: 0px;
font-family: 'Anton', sans-serif;
font-size: 6vmin;
margin: 0;
color: #295696;
text-shadow: 0.1vmin 0.1vmin #6f8bb3;
}
h3
{
font-family: 'Roboto', sans-serif;
font-size: 3vmin;
padding: 10px;
color: #fec345;
background-color: #295696;
}
hr
{
border-color: #eb3461;
border-width: 3px;
max-width: 90px;
margin: 10px;
}
and the screenshot for the gap I couldn't figure out:
<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">
<!-- adding Google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Roboto&display=swap" rel="stylesheet">
<!-- adding bootstrap -->
<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">
<!-- https://favicon.io/emoji-favicons/money-mouth-face/ -->
<link href="/static/favicon.ico" rel="icon">
<link href="/static/index.css" rel="stylesheet">
<title>{% block title %}Welcome{% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-light container-fluid d-flex align-items-top justify-content-start">
<a class="navbar-brand" href="/"><img href="index.html" src="/static/ladybug.png" width="30" height="30" class="d-inline-block align-left" alt=""></a>
<a class="navbar-brand" href="/login">Login</a>
<a class="navbar-brand" href="/register">Register</a>
</nav>
{% block main %}
<div class="container-fluid d-flex align-items-center justify-content-center h-100 w-100">
<div class="row justify-content-center">
<header class="text-center col-12">
<h1><strong>Need help with debug your code?</strong></h1>
</header>
<section class="text-center col-12">
<h3 class="d-inline-flex p-2"><strong>Find a study mate to solve problems quicker</strong></h3>
<div>
<center><hr></center>
</div>
<button type="button" class="btn btn-danger">Join Us Today!</button>
</section>
</div>
</div>
{% endblock %}
<footer class="row footer">
<p class="text-center col-12 ">EDX Harvard | CS50 2019 | Final Project</p>
</footer>
</body>
</html>
Related
Whats up friends, great friday for yous!
So I been rebuilding the website for the company I work to learn HTML+CSS.
Just doing a replica of the original website and its been going great.
So I am having some issues on the the footer right now, the items are mixing on smaller screens.
On the image below you can see (1) how it is and the desired result and (2) what is happening with me.
Here is my code:
.footer {
color: #fff;
height: 140px;
background: linear-gradient(180deg, #130936, #130936) no-repeat center;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 70%;
}
p, p a {
text-decoration:none;
color: hsla(0, 0%, 100%, 0.72);
letter-spacing: 0.3px;
font-size:14px;
}
.footer-brand {
width: 136px;
background: url(https://i.ibb.co/zbq2q4D/pngwing-com-1.png) left center no-repeat;
border: 0;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
i {
color: #fff;
font-size: 30px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
}
<!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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<footer class="footer">
<div class="container-md h-100">
<div class="row align-items-center h-100 row-cols-4">
<div class="col-3"><img class="footer-brand" src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png" alt=""></div>
<div class="col-3">
<p class="p1">+44 (0) 700 677 1336</p>
<p>info#companyIwork.com</p>
</div>
<div class="col-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-3">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
I do appreciate your help.
I think what you're missing is the use of the responsiveness prefixes for the col class, when you declare col or col-x as a class it means that the class would automatically be with a fixed size in relation to the other grids, to overcome content overlapping you'll need to the prefixed to determine the screen size from which the content is being displayed upon i.e col-sm-x, col-md-x etc
Read more about bootstrap grid from here https://getbootstrap.com/docs/5.3/layout/grid/
<!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" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css"
/>
</head>
<body>
<footer class="footer">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xs-12 col-md-3 text-center">
<img
class="footer-brand image-fluid"
src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png"
alt=""
style="width:80px"
/>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p class="p1">
+44 (0) 700 677 1336
</p>
<p>
info#companyIwork.com
</p>
</div>
<div class="col-xs-12 col-md-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>
NOTE: The snippet above does not consider your stylesheet, so be cautious your stylesheet might override some bootstrap styles
SUGGESTION: Also consider reading bootstrap colors from https://getbootstrap.com/docs/5.0/utilities/colors/
I added share buttons from Sharethis.com. When I refresh the page button does not appear, but when I resize the wievport it appears.
`
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=63a323358fb8b6001abbbf6b&product=inline-share-buttons&source=platform" async="async"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Article preview component</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7ab7d5ca64.js" crossorigin="anonymous"></script>
<style>
body {
font-family: 'Kumbh Sans', sans-serif;
background: hsl(240, 5%, 91%);
}
.arrow {
width: 70px;
}
.pop {
width: 15rem;
right: 16rem;
top: 14rem;
}
.arrow {
width: 5rem;
color: black;
}
#share {
color: white;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<div class="container mt-5">
<div class="card shadow-lg">
<div class="row">
<img src="./images/drawers.jpg" alt="drawer image" class="col-4">
<div class="col-6 p-4">
<h1>Shift the overall look and feel by adding these wonderful touches to furniture in your home</h1>
<p>Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.</p>
<div class="row">
<img src="./images/avatar-michelle.jpg" alt="michele image" class="col-2 rounded-circle">
<div class="col-6 mt-3">Michelle Apleton <br> 28 Jun 2020</div>
<div class="bg-light rounded-circle col-1 p-3 m-3 d-flex justify-content-center" id="button">
<img src="./images/icon-share.svg" alt="" class="">
</div>
<div class="pop position-absolute end-10 d-none" id="popup">
<div class="row bg-dark rounded text-white py-1 d-flex justify-content-center align-items-center">
<div class=" col-4 p-2">SHARE</div>
<div class="col-8 zet sharethis-inline-share-buttons"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let changeClass = document.getElementById("button").addEventListener('click', () => {
document.getElementById("popup").classList.remove("d-none")
document.getElementById("popup").classList.add("d-block")
})
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
`
I placed their head code into the head. I tried Z-index, but it does not appear until resizing the viewport, narrowing or expanding does not matter, in both cases it appears.
I am trying to get my navbar buttons to line up on the right side.
I have tried:
class="pull-right" && "text-right"
I have also tried:
.btn-talent{
align-items: right
}
I am struggling. Any help would be greatly appreciated
I also put this in a codepen:
https://codepen.io/rob-connolly/pen/yLaGMyW[enter image description here]1
.btn-investors {
background: #029D89;
color: white;
margin-right: 4vw;
border-radius: 4px;
}
.btn-talent {
background: #029D89;
color: white;
margin-right: 4vw;
border-radius: 4px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>meetlete: meet your favorite athletes!</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Paytone+One&family=Questrial&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="./assets/images/favicon.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="./assets/style.css">
</head>
<body>
<!-- --- Navbar Issue -- -->
<nav class="navbar navbar-light">
<a class="navbar-brand" href="https://meetlete.com">
<img src="./assets/images/meetlete-logo.png" width="200px" alt="Meetlete Logo">
</a>
<!-- btn one issue -->
<button class="btn btn-talent" type="button">Talent</button>
<!-- btn two issue -->
<button class="btn btn-investors" type="button">Investors</button>
</nav>
<!-- Content -->
<!-- Footer -->
<!-- Footer -->
<footer class="container-flex bg-footerTop text-center text-lg-start">
<!-- Grid container -->
<div class="p-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">About Us</h5>
<p>
Meetlete wants to give you the once in a lifetime opportunity to meet one of your favorite athletes. We are the first platform that allows fans to have personal one on one video calls with the biggest stars in sports. With every meetlete video call, we
donate a portion of the proceeds to the foundation of the athlete's choice. What makes this possible is the Meetlete secure and private platform. <br><br>Launching 2/14/21! <i class="far fa-heart"></i>
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Address:</h5>
<span>Meetlete, Inc.<br>
Po Box 294<br>
La Mesa, CA 91944
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">Links</h5>
<ul class="list-unstyled">
<li>
Talent Sign Up
</li>
<li>
Fans Sign Up
</li>
<li>
Investor Info
</li>
<li>
Press
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3 copyright" style="background-color: rgba(0, 0, 0, 0.2)">
© 2020 Copyright:
<a class="text-dark" href="https://meetlete.com">Meetlete.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- bootstrap js file-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>
<script src="script.js"></script>
</body>
</html>
.
You should wrap your buttons with div. .navbar is a flexbox and uses justify: space-between rule. Here the buttons are flexbox items that's why they are spread inside nav.
<nav class="navbar navbar-light">
<a class="navbar-brand" href="https://meetlete.com">
<img src="./assets/images/meetlete-logo.png" width="200px" alt="Meetlete Logo">
</a>
<div>
<button class="btn btn-talent" type="button">Talent</button>
<button class="btn btn-investors" type="button">Investors</button>
</div>
</nav>
Website structure currently looks like this:
index.html:
<!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="css/bootstrap.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<!-- Own styles -->
<link rel="stylesheet" href="css/styles.css">
<title>My website</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-4 sidebar d-flex flex-column align-items-center justify-content-center text-center fixed-top">
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
<p class="text-muted mt-5 mb-0">123 456 789</p>
<p class="text-muted">test#test.com</p>
<p class="mt-5 text-white">
Language 1
|
Language 2
</p>
<p class="social">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-twitter"></i></i>
</p>
<p class="text-muted">© Someone | 2015 - 2019</p>
</div>
<div class="col-12 col-md-8 offset-md-4 d-flex flex-column mt-5 content">
<p>Content</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
styles.css:
#media (max-width: 767.98px) {
.sidebar {
height: auto !important;
padding-top: 10px;
padding-bottom: 10px;
position: static;
}
}
.sidebar {
background-color: #9DB9E8;
height: 100vh;
}
On devices with class md and less I want to split sidebar on the left into two parts. First part should be on the top of the page only with following lines of code:
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
Second part should be at the bottom of the page (under div with class content) and contain all the remaining lines of code from sidebar. Both parts should have same styles as sidebar.
How do I achieve this in Bootstrap 4?
To do this, you should split them into two divs.
<div id="section1">
(what ever you want in 1st section.)
</div>
<div id="section2">
(whatever you want in 2nd section.)
</div>
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.
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;"/>
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>
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>