I have tried to simplify my problem, I have searched online; but I failed how to vertically center this numbers; please assist. I have included the CSS and HTML.
This text is not needed, the website just need me to add more text for me to submit.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.colors2, .colors3 {
background-color: lightgrey;
height: 80px;
text-align: center;
font-weight: bold;
font-size: 26px;
}
.colors2:hover, .colors3:hover {
background-color: grey;
}
.colors3 {
font-weight: normal;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row colors1">
<div class="col-sm-2 colors3">
<span>6</span>
</div>
<div class="col-sm-2 colors2">
<span>7</span>
</div>
<div class="col-sm-2 colors2">
<span>8</span>
</div>
<div class="col-sm-2 colors2">
<span>9</span>
</div>
<div class="col-sm-2 colors3">
<span>5</span>
</div>
<div class="col-sm-2">
<span></span>
</div>
</div>
</div>
</body>
</html>
use css3 flex property. this works quite well.
.colors2, .colors3 {
background-color: lightgrey;
height: 80px;
text-align: center;
font-weight: bold;
font-size: 26px;
}
.colors2:hover, .colors3:hover {
background-color: grey;
}
.colors3 {
font-weight: normal;
}
.col-sm-2 {
align-items: center;
justify-content: center;
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row colors1">
<div class="col-sm-2 colors3">
<span>6</span>
</div>
<div class="col-sm-2 colors2">
<span>7</span>
</div>
<div class="col-sm-2 colors2">
<span>8</span>
</div>
<div class="col-sm-2 colors2">
<span>9</span>
</div>
<div class="col-sm-2 colors3">
<span>5</span>
</div>
<div class="col-sm-2">
<span></span>
</div>
</div>
</div>
</body>
</html>
Related
This question already has answers here:
Why the content is not covered by the background of an overlapping element?
(8 answers)
Closed 2 years ago.
I'm trying to place a div on top of another but I don't understand why text inside div.servicios-info is over the image but the background-color isn't.
.imagen-servicio img {
border: 6px #ffffff solid;
}
.servicio-info {
background-color: #ec6a6a;
margin-top: -5rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<div class="imagen-servicio">
<img src="https://via.placeholder.com/300.png" class="img-fluid">
<div class="servicio-info">
<h3 class="text-uppercase">
<span class="text-lowercase">know about</span> <br> us
</h3>
read more
</div>
</div>
</div>
</div>
</div>
You can try something like this:
CSS
.servicio-info {
position: relative;
background-color: #ec6a6a;
margin-top: -5rem;
z-index:10
}
This code seems to do it.
<!DOCTYPE html>
<html>
<head>
<style>
.imagen-servicio img {
border: 6px #ffffff solid;
z-index: -1;
position: relative;
}
.servicio-info {
background-color: #ec6a6a;
margin-top: -5rem;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<div class="imagen-servicio">
<img src="https://via.placeholder.com/300.png" class="img-fluid">
<div class="servicio-info">
<h3 class="text-uppercase">
<span class="text-lowercase">know about</span> <br> us
</h3>
read more
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0
}
li{
height: 64px;
background-color:pink;
}
.a{
height: 64px;
}
.ab{
display: flex;
direction: row;
align-items: center;
}
}
.b{
display: flex;
direction: row-reverse;
align-items: center;
}
.secondli{
margin-top: 20px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-6 col-6" >
<p>mwiiwiw</p>
<ul>
<li>
<div style="width: 100%">
<span>Xyz</span>
<span>sjfoeij</span>
</div>
<div class="row a">
<div class="col-12 col-md-8 ab" style="background-color: aqua;">
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-4 b"style="background-color: yellow;" >
<span>11</span>
</div>
</div>
</li>
<li class="secondli">
<div class="row a">
<div class="col-12 col-md-8 ab" >
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-4 b" >
<span>11</span>
</div>
</div>
</li>
</ul>
</body>
</html>
How can I display all the values at the center of the row?And the div with spans value Xyz is not taking width same as row below it.And also the second row is not taking width same as row above?
How can I achieve that using bootstrap and Css. Can we add two li and a row inside li or we will have to add container as well inside
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
div{
height: 80px;
text-align: center;
padding-top: 30px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-sm-6" >
<p>mwiiwiw</p>
<div class="row">
<div class="col-sm-8" style="background-color: aqua;">
<span class="b">XYZ</span>
</div>
<div class="col-sm-4 b"style="background-color: yellow;" >
<span>Sjfoeij</span>
</div>
</div>
<div class="row">
<div class="col-sm-8" style="background-color: blue;">
<span class="b">ABC</span>
</div>
<div class="col-sm-4 b"style="background-color: red;" >
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-sm-8" style="background-color: aqua;" >
<span class="b">ABC</span>
</div>
<div class="col-sm-4" style="background-color: yellow;" >
<span>11</span>
</div>
</div>
</body>
</html>
As per your comment #irkhaladkar below is the code snippet:
ul {
list-style-type: none;
margin: 0;
padding: 0
}
li{
/*height: 64px;
background-color:pink;*/
}
.pink{background:pink;}
.h-64{height:64px}
.a{
height: 64px;
}
.ab{
display: flex;
direction: row;
align-items: center;
}
}
.b{
display: flex;
direction: row-reverse;
align-items: center;
}
.secondli{
margin-top: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container" >
<div class="row">
<div class="col-md-6 col-6" >
<p>mwiiwiw</p>
<ul>
<li>
<div class="row pink">
<span class="col-12 col-md-6">Xyz</span>
<span class="col-12 col-md-6">sjfoeij</span>
</div>
<div class="row h-64">
<div class="col-12 col-md-6 ab" style="background-color: aqua;">
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-6 ab"style="background-color: yellow;" >
<span>11</span>
</div>
</div>
</li>
<li class="secondli">
<div class="row h-64 pink">
<div class="col-12 col-md-6 ab" >
<span class="">ABC</span>
</div>
<div class="col-12 col-md-6 ab" >
<span>11</span>
</div>
</div>
</li>
</ul>
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
I am trying to use the grid structure by bootstrap to create a nice looking page. However, my div is moved and columns in rows are not aligned anymore:
The box with the three should be in line with the blue background. What am I doing wrong? What is the reason for this? I would like to understand. My code is:
EDIT1
I added no-margto the <h1>but now it looks like this: How can I get to fill out the full height?
.no-marg{
margin:0 !important;
padding:0 !important;
}
.sm-pad{
padding:5px;
background-clip:content-box;
}
.col-white{
color:white;
}
.dark-theme {
color: white;
background-color:#17191B;
height: 100%;
}
#step-no{
margin:20px;
}
.light-theme {
color: black;
background-color:#EFEFEF;
}
.cont-box {
margin:6px;
}
body {
background: black;
}
#media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
.red-square{
background-color: red;
border-radius: 0;
}
.btn:hover{
background-color: #78BE20;
}
.blue-rectangle{
background-color: #008ECF;
border-radius: 0;
height: 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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>
<body>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10">
<h1 class="col-white">Step</h1>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10 blue-rectangle">
<div class="row equal">
<div class="col-sm-3">
<div class="dark-theme">
<h1 class="col-white">3</h1>
</div>
</div>
<div class="col-sm-9">
<span color<img alt="Warning Logo" src="./image/warning.svg">
</div>
</div>
<div class="row equal">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<script src="steps_v1.js"></script>
</body>
</html>
The box has a margin-top. Set it to 0
.no-marg{
margin:0 !important;
padding:0 !important;
}
.sm-pad{
padding:5px;
background-clip:content-box;
}
.col-white{
color:white;
}
.dark-theme {
color: white;
background-color:#17191B;
height: 100%;
}
#step-no{
margin:20px;
}
.light-theme {
color: black;
background-color:#EFEFEF;
}
.cont-box {
margin:6px;
}
body {
background: black;
}
#media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
.red-square{
background-color: red;
border-radius: 0;
}
.btn:hover{
background-color: #78BE20;
}
.blue-rectangle{
background-color: #008ECF;
border-radius: 0;
height: 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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>
<body>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10">
<h1 class="col-white">Step</h1>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10 blue-rectangle">
<div class="row equal">
<div class="col-sm-3">
<div class="dark-theme">
<h1 class="col-white no-marg">3</h1>
</div>
</div>
<div class="col-sm-9">
<span color<img alt="Warning Logo" src="./image/warning.svg">
</div>
</div>
<div class="row equal">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<script src="steps_v1.js"></script>
</body>
</html>
Add display: -webkit-box; to .dark-theme
.no-marg{
margin:0 !important;
padding:0 !important;
}
.sm-pad{
padding:5px;
background-clip:content-box;
}
.col-white{
color:white;
}
.dark-theme {
color: white;
background-color:#17191B;
height: 100%;
display: -webkit-box;
}
#step-no{
margin:20px;
}
.light-theme {
color: black;
background-color:#EFEFEF;
}
.cont-box {
margin:6px;
}
body {
background: black;
}
#media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
.red-square{
background-color: red;
border-radius: 0;
}
.btn:hover{
background-color: #78BE20;
}
.blue-rectangle{
background-color: #008ECF;
border-radius: 0;
height: 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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>
<body>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10">
<h1 class="col-white">Step</h1>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10 blue-rectangle">
<div class="row equal">
<div class="col-sm-3">
<div class="dark-theme">
<h1 class="col-white">3</h1>
</div>
</div>
<div class="col-sm-9">
<span color<img alt="Warning Logo" src="./image/warning.svg">
</div>
</div>
<div class="row equal">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<script src="steps_v1.js"></script>
</body>
</html>
In the tab content there is two divs which they behave perfectly, but once I added the tag html, their height disappear.
What I should do to preserve their height and width?
I think I should add css styling for the tag html. I tried many things but didn't work!
.graph-containers{
border:solid lightgray;
border-width: 1px;
display: inline-block;
height:80%;
/*box-sizing: border-box;*/
}
.graph-info{
border:solid lightgray;
border-width: 1px;
display: inline-block;
height:80%;
/*box-sizing: border-box;*/
}
.graph_panel {
width:auto;
height:100%;
}
#tabs{
height: 100%;
width:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container" id="tabs">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Main
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="home">Main</div>
<div class="graph_panel container" id="main">
<div class="graph-containers container col-xs-12 col-sm-12 col-md-8 col-lg-8 bg-info" id="graph-container">
</div>
<div class="graph-info container col-xs-12 col-sm-12 col-md-4 col-lg-4 bg-danger">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Just Add this CSS rule to tab-content class:
.tab-content{
height:100vh; /* 100vh means 100% of the viewport height */
}
.tab-content{
height:100vh;
}
.graph-containers{
border:solid lightgray;
border-width: 1px;
display: inline-block;
height:80%;
/*box-sizing: border-box;*/
}
.graph-info{
border:solid lightgray;
border-width: 1px;
display: inline-block;
height:80%;
/*box-sizing: border-box;*/
}
.graph_panel {
width:auto;
height:100%;
}
#tabs{
height: 100%;
width:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container" id="tabs">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Main
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="home">Main</div>
<div class="graph_panel container" id="main">
<div class="graph-containers container col-xs-12 col-sm-12 col-md-8 col-lg-8 bg-info" id="graph-container">
</div>
<div class="graph-info container col-xs-12 col-sm-12 col-md-4 col-lg-4 bg-danger">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>