This question already has answers here:
Why does z-index not work?
(10 answers)
Z-index Won't Work
(3 answers)
Closed 4 years ago.
I'm trying to z-index different "containers" in bootstrap in order for them to be placed on top of each.
I've classed the different containers and provided them different z-index positions. Nothing happens.
Here is the code and the css
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="stylesheet.css" type="text/css"></link>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-7 col">
<h1>fælælflflflflf</h1>
<p>
fkgkfklgkmnøblingbngæbkbjngækjndfælgkbjnfdækgjngfæbkjngfæbf gbkjnlfdkgbjngflkbjngfækbjnglkbnblkgjnblkgjbngflkbjgflkbjfkl
gfnæbæklkgjnbdkæjnblkjfdnblkdjngfkjbnlkjbnkgbjldkbjngklbjnkgjn
</p>
</div>
</div>
</div>
<div class="container behind">
<div class="row justify-content-center">
<div class="col-sm-7 col">
<h1>fælælflflflflf</h1>
<p>
fkgkfklgkmnøblingbngæbkbjngækjndfælgkbjnfdækgjngfæbkjngfæbf gbkjnlfdkgbjngflkbjngfækbjnglkbnblkgjnblkgjbngflkbjgflkbjfkl
gfnæbæklkgjnbdkæjnblkjfdnblkdjngfkjbnlkjbnkgbjldkbjngklbjnkgjn
</p>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
font-family: trebuchet ms;
color:#666666; }
.container {
z-index: 1;
}
.col {
margin:20px;
padding-bottom:20px;
background-color:white;
box-shadow:20px 20px 10px #0033cc;
}
.behind {
padding-bottom:40px;
z-index: 2;
}
Note: i've added some padding in order to see containers layered on top of each other.
Thanks for your reply
Related
I am trying to set a maximum height for a banner I am creating in bootstrap5 like this..
.banner {
background: red;
max-height: 50px;
}
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container d-flex banner">
<div class="col-2">
<img class="img-fluid" src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col-10">
This is some text for the right hand side of the banner
</div>
</div>
</body>
Why is the image breaking out of the banner? I was expecting it to resize itself proportionally because I am using img-fluid. Where am I going wrong>
img-fluid only adds max-width:100% and height:auto since your content is restricted by height and not width you need to add max-height:100%
.banner {
background: red;
max-height: 50px;
}
.img-fluid{
max-height: 100%;
}
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container d-flex banner">
<div class="col-2">
<img class="img-fluid" src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col-10">
This is some text for the right hand side of the banner
</div>
</div>
</body>
I am facing one issue, maybe not a big one but I am not able to figure out how can I do
I want the double line in between the content of a div left (Subtotal) and right ($200).
Can anyone help me with this?
I have tried but I am not able to make it vertically middle.
Attaching screenshot of how I want it to look:
enter image description here
CODE SNIPPET I AHVE TRIED:
.row{
display: flex;
}
.dividerLine{
display: table-cell;
vertical-align: middle;
text-align: right;
border: 2px solid red;
height: 7px;
}
<!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="container-fluid">
<div class="row">
<div class="col-3 start-lines">
<p class="order-receipt-label light-label">
<span>Subtotal</span>
</p>
</div>
<div class="col-sm-4 dividerLine" style="background-color:lavenderblush;">
</div>
<div class="col-3 start-lines">
<p class="order-receipt-label light-label">
<span>Subtotal</span>
</p>
</div>
</div>
</div>
</body>
</html>
product total and I want to make the double line in between them
Attaching the screenshot how it looks:
You can achieve this by giving .row the align-items: center; property and removing margin from the p tags inside .start-lines.
You can use CSS flex align center option for this.
.row {
display: flex;
align-items: center;
}
.mb-0 {
margin-bottom: 0 !important;
}
.dividerLine {
border-top: 2px solid red;
border-bottom: 2px solid red;
height: 7px;
background-color: lavenderblush;
}
<!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="container-fluid">
<div class="row">
<div class="col-sm-3">
<p class="order-receipt-label light-label mb-0">
<span>Subtotal</span>
</p>
</div>
<div class="col-sm-6">
<div class="dividerLine"></div>
</div>
<div class="col-sm-3">
<p class="order-receipt-label light-label mb-0">
<span>Subtotal</span>
</p>
</div>
</div>
</div>
</body>
</html>
That looks like a giant equals sign, so let's make it a giant equals sign. That way we can be sure that it will align with the other characters vertically correctly without us having to do any other vertical positioning.
The way this can be done is to put an = character in the central column at the standard font-size but scale in the x direction. We put a huge scale in just so it will cover the whole central column whatever the width. Of course this isn't seen as overflow is set to hidden.
<!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.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
text-align: center;
}
p.wide-font {
transform: scale(10000, 1);
color: gold;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3" style="text-align: right;">
<p style="text-align: right;">SUBTOTAL</p>
</div>
<div class="col-sm-4" style="overflow: hidden;">
<p class="wide-font">=</p>
</div>
<div class="col-3">
<p style="text-align: left;">SUBTOTAL</p>
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 4 years ago.
I am beginner for web development and i am trying to align below p element center vertically but its not working can some one help me please
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
p{
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<header class="d-flex flex-column align-content-center bg-secondary py-5">
<div class="d-flex">
<img src="img/Icons-14.png">
<p>hgjsafakfjlajflksjf</p>
</div>
</header>
</body>
</html>
try this:
d-flex {
position:relative;
}
p {
position: absolute
top: 50%;
transform: translateY(-50%);
}
Or try this way:
d-flex {
display:flex;
align-items:center;
}
I have the following code :
<!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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.class1 {height: 100px; background-color: DarkSlateGrey}
</style>
</head>
<body>
<div class="container-fluid class1">
<div class="row">
<div class="col-xs-6">Website</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
</div>
</div>
</body>
</html>
The problems with me are:
When i do "inspect" to see the website on mobile:
-the background doesn't take all the width of mobile.
-Words "services" are overlapped, i want them to be separated with some spaces between them
How can I avoid these problems? Any help will be appreciated
Your width for each child inside the row is simply too small. For mobile size, you are setting the div to only 1/12 width of the mobile screen. You can add padding and overflow: hidden to it so it doesn't go over the desired width, but that doesn't seem ideal to me. I added a sample code based on your codes as an option for you to explore. If the screen is less than >=720px (col-md) then your first child in the row will take full width, and give more space for the rest so it looks more presentable.
.class1 {
height: 100px;
background-color: DarkSlateGrey
}
.tomato{
background: tomato;
}
.white{
background: white;
}
row div{
text-align: center
}
<!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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container-fluid class1">
<div class="row">
<div class="tomato col-xs-12 col-md-6">Website</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
</div>
</div>
</body>
</html>
This question already has answers here:
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 5 years ago.
unfortunately i dont know how to make these divs(Boxes) next to each other like the picture and put the images of the cars like the image , can anyone please help me
if there is a way with tables or divs please help me to do it
here is the image
.block1{
background: red;
height: 150px;
padding-top: 30%;
}
.block2{
background: green;
height: 150px;
padding-top: 30%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-xs-12 text-center">
<div class="col-xs-6">
<div class="block1">
text
</div>
</div>
<div class="col-xs-6">
<div class="block2">
text
</div>
</div>
</div>
you can use float:left for your 2 divs inside a parent div
Try this html+bootstrap will work fine for mobile views :
<!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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
Image 1
</div>
<div class="col-sm-4">
Image 2
</div>
<div class="col-sm-4">
Image 3
</div>
</div>
</div>
</body>
</html>