Bootstrap - Move rows to bottom of page - html

I am new to Bootstrap, and would like to move my box2 and box3 divs to the bottom of the column on the right side of the page. I can't seem to work out how to do this without resorting to an empty row that is above box2 and box3. Here is my current html:
<!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"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body style="background:pink;">
<div class="jumbotron" style="background:pink;">
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Is there a way of doing this using the Bootstrap grid?
Any help is much appreciated!


Try this
<!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"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
var bottom1 = $('.box1').outerHeight(true);
var bottom2 = $('.right-sides-columns').outerHeight(true);
var topheight = bottom1 - bottom2;
$('.right-sides-columns').css("margin-top", topheight + "px");
});
</script>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body >
<div class="jumbotron" >
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3 right-sides-columns">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


Not a specific bootstrap answer, but a more general approach:
It is possible to push an element to the bottom of it's parent with flexbox's align-self.
.flex-row {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 300px;
}
.flex-col {
background: rebeccapurple;
}
.flex-col--end {
align-self: flex-end;
}
<div class="flex-row">
<div class="flex-col">
<p>Lorem Ipsum</p>
</div>
<div class="flex-col flex-col--end">
<p>Dolor Sit</p>
</div>
</div>

Related

"overflow: scroll" add scroll that can't be scrolled

I want to display the seats in the cinema hall. Sometimes there are a lot of places and I wanted that if the chairs occupied more than 50% of the page, then I had a scroll. I tried to use "overflow-scroll" but it doesn't work. photo of result
<div class="w-50">
<div class="border overflow-scroll">
<div v-for="row in seats" class="d-flex">
<div v-for="seat in row" :key="seat.id" class="seat"></div>
</div>
</div>
</div>
.seat {
width: 50px;
height: 50px;
background: dodgerblue;
border: solid black;
}
same problem using simple html + css (without vue)
index.html
.seat {
width: 50px;
height: 50px;
background: dodgerblue;
border: solid black;
}
<!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 rel="stylesheet" href="style.css">
</head>
<body>
<div style="width: 50%;">
<div style="border: solid black; overflow: scroll;">
<div style="display: flex;">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div style="display: flex;">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
</div>
</div>
</body>
</html>

You can use max-width to limit the viewport. The overflow: scroll should be the default anyway. The thing is flexbox will adjust the size of the items (shrink, grow).
Just set the items a min-width or use flex-shrink: 0.
If you use flex-wrap: nowrap together with flex-direction: column or shorthand: flex-flow: column nowrap for the container (I've added some classes) now, it will grow in width and therefore, since you have set a max-width of 50%, the items will overflow and are scrollable.
.seat {
height: 50px;
width: 50px;
flex-shrink: 0;
background: dodgerblue;
border: solid black;
}
.seat-row {
display: flex;
flex: column nowrap;
}
.container {
border: 1px solid black;
overflow: scroll;
max-width: 50%;
}
<!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 rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="seat-row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="seat-row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
</div>
</body>
</html>

How do I show left double quotes inside a button?

This is what I have tried.
body{
background: lightblue;
padding:0px;
margin:0px;
}
span {
quotes: "“" "”" "‘" "’";
font-family: sans-serif;
}
span::before {
content: open-quote;
font-size: 35px;
vertical-align: -0.6rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-6 offset-sm-3 d-flex justify-content-center">
<button class="btn btn-primary mt-2">
<span/> New Quote
</button>
</div>
</div>
</div>
</div>
</body>
</html>
No matter what I change I'm not able to remove that bottom padding.
Also, I am not able to get that exact look as per the image. Does the image have a different font-family?
My expected output is as shown below.
Thank you

reduce the line-height:
body {
background: lightblue;
padding: 0px;
margin: 0px;
}
span {
quotes: "“" "”" "‘" "’";
font-family: sans-seif;
}
span::before {
content: open-quote;
font-size: 35px;
vertical-align: -0.7rem;
line-height: 0.4;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-6 offset-sm-3 d-flex justify-content-center">
<button class="btn btn-primary mt-2">
<span/> New Quote
</button>
</div>
</div>
</div>
</div>
</body>
</html>

After so many trials, finally got it.
Thank you everyone for your help.
body {
background: lightblue;
padding: 0px;
margin: 0px;
}
span {
quotes: "“" "”" "‘" "’";
font-family: sans-seif;
}
span::before {
content: open-quote;
font-size: 49px;
vertical-align: -1.2rem;
line-height: 0.4;
font-family: sans-serif;
}
button{
padding: 0px;
height: 35px;
padding: 0px 8px 0px 6px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-6 offset-sm-3 d-flex justify-content-center">
<button class="mt-2">
<span/>New Quote
</button>
</div>
</div>
</div>
</div>
</body>
</html>

image size shrinks when window is resized

I'm having an image in the layout, and when I resize the window it's size goes down and become too small.
I want to make the image fix at it's position and prevent it from become smaller and smaller as I shrink the window.
HTML
<div class="container-fluid" style="background-color: #333333;padding-left:30px;">
<div class="row">
<div class="col-md-12 outsidediv">
<!-- image -->
<div class="col-md-2 col-sm-2 col-xs-2 image" >
<img src="https://i.postimg.cc/50JVVSZF/checkk.png" style="max-width:100%;" alt="img">
</div>
<div class='col-md-2 col-sm-2 col-xs-2'>
<h2 style="font-size:2rem;color:#666666;">
<strong>
Some other Text alongside
</strong></h2>
</div>
</div>
</div>
</div>
CSS
.image{
display: flex;
flex-direction: column;
align-items: flex-start;
word-break:none;
color:white;
}
See this fiddle
When you shrink the window size, the image size decreases, how to fix this ?

You can set a static size with CSS: width: 93px; height: 96px;. You can either apply it to the '.image' class div or the image specifically. Here it is with inline CSS on the image tag:
.image{
display: flex;
flex-direction: column;
align-items: flex-start;
word-break:none;
color:white;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-12 outsidediv">
<!-- image -->
<div class="col-md-2 col-sm-2 col-xs-2 image" >
<img src="https://i.postimg.cc/50JVVSZF/checkk.png" style="width: 93px; height: 96px;" alt="img">
</div>
<div class='col-md-2 col-sm-2 col-xs-2'>
<h2 style="font-size:2rem;color:#666666;">
<strong>
Some other Text alongside
</strong></h2>
</div>
</div>
</div>
</body>
</html>

You can just delete max-size and it will stay at the same size all the time.
.bs-example{
margin: 20px;
}
.outsidediv{
/*border:solid;*/
}
ul li{
/*margin-left:15px;*/
box-sizing: border-box;
font-size:1.3rem;
}
#play{
margin-top:35px;
}
.image{
display: flex;
flex-direction: column;
/*justify-content: center;*/
/*font-size:2rem;*/
align-items: flex-start;
word-break:none;
color:white;
}
#bt{
margin-top:40px;
position: relative;
margin-left:30px;
font-size:2rem;
}
nav{
min-width: 100%;
}
body{
margin:0px;
padding:0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Main page</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- font awesome for the icons -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid" style="background-color: #333333;padding-left:30px;">
<div class="row">
<div class="col-md-12 outsidediv">
<!-- image -->
<div class="col-md-2 col-sm-2 col-xs-2 image" >
<img src="https://i.postimg.cc/50JVVSZF/checkk.png" alt="img">
</div>
<div class='col-md-2 col-sm-2 col-xs-2'>
<h2 style="font-size:2rem;color:#666666;">
<strong>
Some other Text alongside
</strong></h2>
</div>
</div>
</div>
</div>
</body>
</html>

Make row occupy full height in Bootstrap 4

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

Bootstrap, centre div in other div

I have one div with height 300px and width auto, inside this div other div with text, I need this result:
enter image description here
This is my code HTML:
<section class="black-block">
<div class="container">
<div class="row">
<article class="col-xs-4 col-sm-4 col-md-4">
<!-- Empty content -->
</article>
<article class="col-xs-4 col-sm-4 col-md-4">
<h3 class="text-center">My title</h3>
</article>
<article class="col-xs-4 col-sm-4 col-md-4">
<!-- Empty content -->
</article>
</div>
</div>
This is my code CSS:
.title {
margin-top: 50px;
margin-bottom: 50px;
height: 100%;
}
.back-block {
height: 300px;
background: rgb(0, 0, 0);
margin-bottom: 30px;
}
h3 {
color: rgb(255, 255, 255);
}
h4 {
color: rgb(255, 0, 0);
}
<!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>StackOverFlow</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Black part -->
<section class="back-block">
<div class="container">
<div class="row">
<article class="col-xs-4 col-sm-4 col-md-4">
<!-- Contenido vacio -->
</article>
<article class="title col-xs-4 col-sm-4 col-md-4">
<h3 class="text-center">Text that i want centre</h3>
</article>
<article class="col-xs-4 col-sm-4 col-md-4">
<!-- Contenido vacio -->
</article>
</div>
</div>
</section>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
How can I get the image result?

use flexbox with:
display: flex;
align-items: center;
justify-content: center;
.title {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
margin: 50px 0;
}
.back-block {
height: 300px;
background: rgb(0, 0, 0);
margin-bottom: 30px;
}
h3 {
color: rgb(255, 255, 255);
}
h4 {
color: rgb(255, 0, 0);
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
<!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>StackOverFlow</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Black part -->
<section class="back-block">
<div class="container">
<div class="row">
<article class="">
<!-- Contenido vacio -->
</article>
<article class="title">
<h3 class="text-center">Text that i want centre</h3>
</article>
<article class="">
<!-- Contenido vacio -->
</article>
</div>
</div>
</section>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Now run your code. It might be as you want:
<!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>StackOverFlow</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>
#title {
display:block;
margin-top: 50px;
margin-bottom: 50px;
position: relative
top: 0;
bottom: 0;
height:100%;
min-height:200px !important;
border:1px solid red;
}
.back-block {
height: 300px;
background: rgb(0, 0, 0);
margin-bottom: 30px;
padding:20px;
}
h3 {
color: rgb(255, 255, 255);
}
h4 {
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<!-- Black part -->
<section class="back-block" style="display:flex;justify-content:center;align-items:center;">
<div class="container">
<div class="row">
<article class="col-xs-4 col-sm-4 col-md-4">
<!-- Contenido vacio -->
</article>
<article id="title" style="display:flex;justify-content:center;align-items:center;" class="col-xs-4 col-sm-4 col-md-4">
<h3 class="text-center">Text that i want centre</h3>
</article>
<article class="col-xs-4 col-sm-4 col-md-4">
<!-- Contenido vacio -->
</article>
</div>
</div>
</section>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">
</script>
</body>
</html>