<div class="jumbotron jumbotron-fluid" id="landing">
<div class="container">
<div class="row">
<div class="col-sm-6"><h1>Hey, I'm A Man <br> Thanks for coming</h1></div>
<div class="col-sm-6"><img class="img-responsive" src="example.png" alt=""></div>
</div>
</div>
</div>
CSS for Jumbotron (Not entirely sure if this is reason it's messing up so leaving it here just incase)
#landing {
background-image: url(jumboimg);
background-size: cover;
height: 800px;
margin-top: -80px;
}
Heres what it's coming out as
https://i.imgur.com/7wXdWeb.png
I'm trying to get it to the right of the text
See below code sample, I have tried to replicate same and it works
and yes there was closing </h1> missing in the code
#landing {
background-image: url(https://www.vklalco.com/wp-content/uploads/2018/03/mumbai_night-800x400.jpg);
background-size: cover;
height: 800px;
/* margin-top: -80px; */
padding: 20px;
color: #fff;
}
img.img-responsive {
max-width: 100%;
}
<!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/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron jumbotron-fluid" id="landing">
<div class="container">
<div class="row">
<div class="col-sm-6"><h1>Hey, I'm A Man <br> Thanks for coming</h1></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://www.pentasia.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHJKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--94a7bbc0f18502cae6a97b304f2712e26588fd1e/pentasia-surrey-redhill2.jpg" alt="">
</div>
</div>
</div>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html>
width 100% will make your image fit to your column
<img class="img-responsive" src="example.png" alt="" width="100%">
Related
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 14 days ago.
I'm trying to make each sections content centered. How do I do this?
see attached image:
section 1 100vh, content in middle of page
section 2 100vh, content in middle of page
.content {
height: 100vh;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</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="{{ url_for('static', filename='css/index.css') }}" />
</head>
<body>
<section class="content" style="background-color: lightgreen;">
<div class="container">
<div class="row">
<div class="col-lg-6 text-center text-lg-start">
<h1>heading</h1>
<p>test</p>
</div>
<div class="col-lg-6">
<img src="https://via.placeholder.com/350/09f/fff.png" />
</div>
</div>
</div>
</section>
<section class="content" style="background-color: moccasin;">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1>heading</h1>
<p>test</p>
</div>
<div class="col-lg-6">
<img src="https://via.placeholder.com/350/09f/fff.png" />
</div>
</div>
</div>
</section>
<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>
using bootstrap v5.3.0-alpha1
You need to use the flexbox property to center the content of the both section:
.content {
height: 100vh;
display: flex;
align-items: center;
}
I want to make a screen with buttons responsively, these buttons are square, they should be next to each other, but as soon as the line breaks they should start on the left side, but always stay in the center. I'm using bootstrap-5, but I don't know how to do that. I tried with flex-box.
My code:
.box {
height: 65px;
width: 60px;
background: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-wrap gap-4 w-50 border border-primary">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Nest the flexbox in another div. Then give it the mx-auto class to center itself in the middle of the parent div.
Now give the parent div the class w-50 and change the width of the flexbox to the width you want.
.box {
height: 65px;
width: 60px;
background: black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container px-5 border border-primary">
<div class="d-flex flex-wrap gap-4 w-75 mx-auto">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
Based on my small knowledge in bootstrap I think you should add p-5 as an example to your container div .
P-(number between 1 & 5) representing the padding so in this way the boxes will have the space you want to stay away from the border.
.box{
height:65px;
width: 60px;
background: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="d-flex p-3 flex-wrap gap-4 w-50 border border-primary">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
What am I trying to achieve is to have a blob background behind the orange. The most important thing is that whenever window is resized that the blob will always stay directly behind the orange and not move to left or right. Could anybody help me achieve that? I would appreciate that very much.
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Hello Everyone</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-6">
<h3>Column 1</h3>
<p>I would like to place the blob directly behind the orange</p>
<p>And then block the movement so whenever window is resized all is in the same place</p>
</div>
<div class="col-sm-6 col-6" style="position:relative;left:0;top:0">
<img src="http://riviste.newbusinessmedia.it/wp-content/uploads/sites/27/2013/12/Fotolia_11313277_M.jpg"
style="width:100%;">
<img src="https://d3b1ak9ylguumf.cloudfront.net/stencil/public/static/images/wave-blob.svg?h=b9d69d25&v=2020-08-19.00" style="position:absolute;">
</div>
</div>
</div>
</body>
</html>
You should position your element with left: 0; top: 0; (putting it on relative element has no effect):
.images {
position: relative;
}
.images .bottom-image {
width: 100%;
position: relative;
z-index: 5;
opacity: .9
}
.images .top-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: .9;
z-index: 4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="jumbotron text-center">
<h1>Hello Everyone</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-6">
<h3>Column 1</h3>
<p>I would like to place the blob directly behind the orange</p>
<p>And then block the movement so whenever window is resized all is in the same place</p>
</div>
<div class="col-sm-6 col-xs-6 images">
<img class="bottom-image" src="http://riviste.newbusinessmedia.it/wp-content/uploads/sites/27/2013/12/Fotolia_11313277_M.jpg"/>
<img class="top-image" src="https://d3b1ak9ylguumf.cloudfront.net/stencil/public/static/images/wave-blob.svg?h=b9d69d25&v=2020-08-19.00"/>
</div>
</div>
</div>
You can insert the blob image as background-image property of the div.
You can read more about it on https://www.w3schools.com/cssref/pr_background-image.asp
Note: Here orange has white background, so cant see clearly, you can check it with some transparent background image.
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Hello Everyone</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-6">
<h3>Column 1</h3>
<p>I would like to place the blob directly behind the orange</p>
<p>And then block the movement so whenever window is resized all is in the same place</p>
</div>
<div class="col-sm-6 col-6" style="position:relative;left:0;top:0; background-image: url('https://d3b1ak9ylguumf.cloudfront.net/stencil/public/static/images/wave-blob.svg?h=b9d69d25&v=2020-08-19.00');">
<img src="https://riviste.newbusinessmedia.it/wp-content/uploads/sites/27/2013/12/Fotolia_11313277_M.jpg"
style="width:100%;">
</div>
</div>
</div>
</body>
</html>
I want to create a Bootstrap grid whose second row occupies the full height of the page, in a very similar fashion to Twitter bootstrap 3 two columns full height. However, the "non-hacky" answer provided, which uses Bootstrap 4's h-100, doesn't seem to be working. Here's the code and its output:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="wiewport" content="width=device-width, initial-scale=1 user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
html {
height: 100%;
}
body {
min-height: 100%;
background-color: lightblue;
}
main {
background-color: yellow;
}
#second-row {
background-color: green;
}
textarea {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<main class="container-fluid h-100">
<div class="row">
<div class="col-sm-6">
Hello,
</div>
<div class="col-sm-6">
World!
</div>
</div>
<div class="row h-100" id="second-row">
<div class="col-sm-8">
<textarea></textarea>
</div>
<div class="col-sm-4">
<textarea></textarea>
</div>
</div>
</main>
</body>
</html>
Update: Bootstrap 4: How to make the row stretch remaining height?, a similar question, has an answer that uses Bootstrap 4's flex-grow class. I tried it like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="wiewport" content="width=device-width, initial-scale=1 user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
html {
height: 100%;
}
body {
min-height: 100%;
background-color: lightblue;
}
main {
background-color: yellow;
}
#second-row {
background-color: green;
}
textarea {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<main class="container-fluid d-flex h-100 flex-column">
<div class="row">
<div class="col-sm-6">
Hello,
</div>
<div class="col-sm-6">
World!
</div>
</div>
<div class="row flex-fill d-flex justify-content-start" id="second-row">
<div class="col-sm-8 portlet-container portlet-dropzone">
<textarea></textarea>
</div>
<div class="col-sm-4 portlet-container portlet-dropzone">
<textarea></textarea>
</div>
</div>
</main>
</body>
</html>
Output remains unchanged.
You should use flex-grow:1; as explained in the other answer: Bootstrap 4: How to make the row stretch remaining height?
The problem is that body should be height:100%; not min-height...
<main class="container-fluid d-flex h-100 flex-column">
<div class="row">
<div class="col-sm-6">
Hello,
</div>
<div class="col-sm-6">
World!
</div>
</div>
<div class="row flex-grow-1" id="second-row">
<div class="col-sm-8 portlet-container portlet-dropzone">
<textarea></textarea>
</div>
<div class="col-sm-4 portlet-container portlet-dropzone">
<textarea></textarea>
</div>
</div>
</main>
https://www.codeply.com/go/tpecZ31njp
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.