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>
Related
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>
I put a frame and a picture together but my photo is not fully displayed, and in each size a part of the image is displayed, for example, for a mobile phone, only a small part of it is displayed, and in a larger and medium size, a larger part of the photo is displayed. can you help me?
My html markup:
<!-- about section -->
<section id="about" class="bg-secondary">
<div class="container-fluid">
<div class="row">
<!-- about img column -->
<div class="col-md-6 about-picture height-80 img-responsive "></div>
<!-- about text column -->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
<!-- this is for centering -->
<div class="about-text-center">
<!-- title -->
<div class="row">
<div class="col text-center">
<h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
<div class="title-underline bg-warning"></div>
<p class="mt-2 text-capitalize">hi it is a test</p>
</div>
</div>
<!-- end of title -->
<!-- single item -->
</div>
</div>
</div>
</div>
</section>
This is my CSS:
body {
font-family: 'Roboto', sans-serif;
}
.height {
min-height: 100vh;
}
.title-underline {
width: 200px;
height: 5px;
margin: 0 auto;
}
.height-80 {
min-height: 100vh;
}
.height-11 {
max-height: 11vh;
}
.about-picture {
background: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
}
You can use background image as you have done, but you need to give it a size and position, and stop it repeating, otherwise it is just picking up the defaults for these values.
Here is what to put in your CSS. I have deliberately explicitly set each value so it's easier to see what is going on:
.about-picture {
background-image: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Of course, you may want to change the positioning, but the size contain makes sure the whole image is always visible whatever the actual dimensions of the column on any device.
After I see your code, maybe I don't think you can put the image in the css if it's used like that. I changed your code in the css section in .about-picture.
And I also changed the html markup in this section:
<div class="col-md-6 about-picture">
<img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
</div>
Like this edited from me:
<html>
<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"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style>
body{
font-family: 'Roboto', sans-serif;
width: 100%;}
.height{
min-height: 100vh;}
.title-underline{
width: 200px;
height: 5px;
margin: 0 auto;}
.height-80{
min-height: 100vh;}
.height-11{
max-height: 11vh;}
.about-picture{
align-items: center!important;
}
.about-picture img{
width: 100%;
position: relative;
padding-top: 120px;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- about section -->
<section id="about" class="bg-secondary">
<div class="container-fluid">
<div class="row">
<!-- about img column -->
<div class="col-md-6 about-picture">
<img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
</div>
<!-- about text column -->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
<!-- this is for centering -->
<div class="about-text-center">
<!-- title -->
<div class="row">
<div class="col text-center">
<h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
<div class="title-underline bg-warning"></div>
<p class="mt-2 text-capitalize">hi it is a test</p>
</div>
</div>
<!-- end of title -->
<!-- single item -->
</div>
</div>
</div>
</div>
</section>
</body>
</html>
I've got some weird spaces in the mobile version, here some images:
Here's how does it look on desktop:
Desktop #01
Desktop #02
And a mobile:
Mobile #01 - with spacing on the right
Mobile #02 - with a "h3 class="display-4" maybe calling that spacing?
HTML:
<!-- The beginning of html -->
<!DOCTYPE HTML>
<html lang="PL-pl">
<head>
<title>The page is being rebuilt...</title>
<meta charset="utf-8">
<!-- versioning can often help (href="css/style.css?ver=2.0") -->
<!-- BOOTSTRAP 4 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://reportsquestionsznaczki65.000webhostapp.com/css/restyled.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<main>
<div class="jumbotron jumbotron-fluid text-white text-center bg-info nomarginbottom">
<div class="container">
<h3 class="display-2">This site is being finally rebuilt!</h3>
<p class="lead">Hence it will have more features soon.</p>
</div>
</div>
<div class="container-fluid">
<div class="row mt-3 text-center">
<div class="col-12">
<h3 class="display-4">Sites done:</h3>
</div>
</div>
<div class="row justify-content-center mt-2 text-white text-center mb-4">
<div class="col-12 col-lg-4">
<a class="websitelink" href="https://reportsquestionsznaczki65.000webhostapp.com/wszyscy.html">
<div class="box lead p-4">Go to: "WSZYSCY"</div>
</a>
</div>
</div>
<div class="row text-center">
<div class="col-12 change"><h4 class="display-4">What will be changed?</h4></div>
</div>
<div class="text-center">
<div class="row change2">
<p class="col-sm-6 col-lg-3 feature lead">The structure of the page.</p> <!-- class feature not used -->
<p class="col-sm-6 col-lg-3 feature lead">The site will be now responsive.</p>
<p class="col-sm-6 col-lg-3 feature lead">Lessons will be adding automatically via JS.</p>
<p class="col-sm-6 col-lg-3 feature lead">More code, more readable..</p>
</div>
<div class="row change2">
<div class="col-sm-6 col-lg-3 feature lead"><p>Sleek look.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>Fast and comprehensive.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>Inspiring quotes.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>And much more...</p></div>
</div>
</div>
<div class="row change2">
<div class="col-12">
<h5 class="text-center border border-3 border-dashed border-info change3 nomarginbottom">
<q>You can do everything, unless your imagination has stopped you.</q>
</h5>
</div>
</div>
<div class="row change2">
<div class="col-12">
<h3 class="display-4 text-center nomarginbottom">Current status: Learning Bootstrap 4.2 (80%) + Added "wszyscy.html".</h3>
<p class="lead text-center nomarginbottom">Overall status: 5% done on the page.</p>
</div>
</div>
<div class="row mb-5">
<div class="col-12">
<h5 class="text-center border border-3 border-dashed border-info change3 nomarginbottom">
<q>Change is best, when it's changing with you, not without.</q>
</h5>
</div>
</div>
</div>
</main>
<noscript>
<meta http-equiv="refresh" content="0; URL=https://reportsquestionsznaczki65.000webhostapp.com/noscript.html"/>
</noscript>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
CSS (restyled.css):
body {
background-color: #eee;
}
/* Rebuilding the page */
.change {
padding: 30px 10px;
background-color: #dedede;
}
.change2 {
padding: 15px 5px;
}
.change3 {
padding: 20px 5px;
}
.nomargin {
margin: 0;
}
.nomarginbottom {
margin-bottom: 0;
}
img[alt="www.000webhost.com"] {
display: none;
}
.border-3 {
border-width: 3px !important;
}
.border-dashed {
border-style: dashed !important;
}
.websitelink, .websitelink:hover {
text-decoration: none;
color: #FFF;
}
.box {
background-color: #343a40;
font-size: 170%;
}
.box:hover {
background-color: darkslategray;
cursor: pointer;
}
Here's the website :
https://reportsquestionsznaczki65.000webhostapp.com
Due to it's online you can use:
view-source:https://reportsquestionsznaczki65.000webhostapp.com/index.html
https://reportsquestionsznaczki65.000webhostapp.com/css/restyled.css
Thank you for any help.
The text "wszyscy.html" in the mobile version is bigger than the screen due to its font-size . Make that smaller and you will no longer see that space
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>
So I want to vertical and horizontal align the slogan to the jumbotron, the top logo is in it correct place and the small isotype should go all the way on the base of the jumbotron.
any help is greatly appreciated.
#hero {
height: 50vh;
background-image: url("/img/background.png");
background-size: cover;
background-repeat: no-repeat;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<link rel="stylesheet" href="/css/custom.css">
<title>Document</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid" id="hero">
<div class="container">
<div class="row">
<div class="col-12 text-left align-top h-25">
<img src="/img/toplogo.png" alt="">
</div>
<div class="col-12 text-center align-middle h-auto">
<img src="img/slogan.png" alt="">
</div>
<div class="col-12 text-right align-bottom test">
<img src="/img/logowhite.png" alt="">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
</body>
</html>
If I'm correct, you asking for align the slogan vertically to the center and align the isotype to the bottom as you showed in above image. You can add below inline style parts to the slogan and small isotype.
To align slogan to mid:
<img src="img/slogan.png" alt="" style="top:--height from the top-- ;">
or
<img src="img/slogan.png" alt="" style="display: flex; flex-direction: column; justify-content: center;">
To set small isotype into bottom:
<img src="/img/logowhite.png" alt="" style="top:--height from the top-- ;">
or
<img src="img/logowhite.png" alt="" style="display: flex; flex-direction: column; justify-content: center;">
I think, this will works on you.
As user #ZimSystem said it was just a matter of adding h-100 to the row and container
Thanks for your help.