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>
Related
I want some elements to be in one line, here's my html code:
h2 {
color: Red;
font-size: 30px;
font-weight: bold;
display: inline-block;
}
img {
display: inline-block;
}
h2.class1 {
color: green;
font-size: 20px;
display: inline-block;
}
h2.class2 {
color: yellow;
font-size: 14px;
display: inline-block;
}
.bg {
background-color: black;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
</html>
<!-- Code -->
<div class="bg">
<div class="container-sm center" style="margin-top: 25px;">
<div class="d-grid gap-2 col-6 mx-auto">
<img src="https://via.placeholder.com/50" width="50px" height="50px" style="border-radius:25px;">
<h2 style="font-size: 25px;">Some Heading Text</h2>
<h2 class="class1">{}></h2>
<h2 class="class2"> Some Tagline Like Text</h2>
<hr>
</div>
</div>
</div>
Here's what is the resulting output:
.
Also, Here's how i want it to look like (this is after removing bootstrap):
Edit: Things I tried:-
d-inline-block
inline-block
float property
experimenting with margins
Some Bootstrap Classes(sorry i forgot which)
Code Blocks I got from stackoverflow
Try out the code below I have made some big changes with your markup as well as Css
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
*{
margin: 0;
padding: 0;
}
h2 {
color: Red;
font-size: 30px;
font-weight: bold;
}
h2.class1 {
color: green;
font-size: 20px;
}
h2.class2 {
color: yellow;
font-size: 14px;
}
.bg {
background-color: black;
}
</style>
</head>
<body>
<div class="d-flex flex-row justify-content-start bg-dark">
<img
src="https://via.placeholder.com/50"
width="50px"
height="50px"
style="border-radius: 25px"
/>
<div class="d-flex align-items-baseline my-4">
<h2 style="font-size: 25px">Some Heading Text</h2>
<h2 class="class1">{}></h2>
<h2 class="class2">Some Tagline Like Text</h2>
</div>
</div>
</body>
</html>
use d-inline-flex instead d-grid
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
</html>
<!-- Code -->
<div class="bg">
<div class="container-sm center" style="margin-top: 25px;">
<div class="d-inline-flex col-12 ">
<img src="https://via.placeholder.com/50" width="50px" height="50px" style="border-radius:25px;">
<h2 style="font-size: 25px;">Some Heading Text</h2>
<h2 class="class1">{}></h2>
<h2 class="class2"> Some Tagline Like Text</h2>
<hr>
</div>
</div>
</div>
</body>
</html>
working with Bootstrap 4 and I have following bootstrap codes with external css file in the html view,
<div class="jumbotron rounded-0">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="{{asset('images/flowler.jpg')}}" alt="..." class="rounded-circle">
</div>
</div>
</div>
</div>
External css
.rounded-circle{
vertical-align: left;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: -100%;
top: -50px;
}
but in mobile view in the browser above images not displaying properly. it is not in the correct position. how could I fix this problem?
1: https://i.stack.imgur.com/daggf.png`enter code here`
You specify the value left: -100%; You move the image out of the page
.rounded-circle{
vertical-align: left;
width: 100px;
height: 100px;
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<body>
<!-- Start your code here -->
<div class="jumbotron rounded-0">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://www.ivertech.com/Articles/Images/KoalaBear200x200.jpg" alt="..." class="rounded-circle">
</div>
</div>
</div>
</div>
<!-- End your code here -->
</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
I want to divide my div "tile-container" with the width of 100% into 5 equal pieces. I thought that creating 5 divs inside with the width of 25% would solve the problem but it didn't. Container seems to be to small. Here is my code:
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="tile-container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
</div>
</div>
</body>
And stylsheet.css file:
.tile-container{
position: relative;
border: solid #BDBDBD 2px;
margin: 5px 0px;
width:100%;
}
.tile{
width: 20%;
min-height:22px;
border: 1px #BDBDBD solid;
display: inline-block;
}
The problem is with the spacing in the html between the divs, to ignore the spacing you can add font-size:0 to the .tile-container, then use a specific font-size to the .tile :
.tile-container{
position: relative;
border: solid #BDBDBD 2px;
margin: 5px 0px;
width:100%;
font-size:0; /* add */
}
.tile{
font-size:20px; /* or whatever you want */
width: 20%;
min-height:22px;
border: 1px #BDBDBD solid;
display: inline-block;
}
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="tile-container">
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
</div>
</div>
</div>
</div>
</body>
Another method would be to comment out the spaces :
.tile-container{
position: relative;
border: solid #BDBDBD 2px;
margin: 5px 0px;
width:100%;
}
.tile{
width: 20%;
min-height:22px;
border: 1px #BDBDBD solid;
display: inline-block;
}
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="tile-container">
<div class="tile">A</div><!--
--><div class="tile">B</div><!--
--><div class="tile">C</div><!--
--><div class="tile">D</div><!--
--><div class="tile">E</div>
</div>
</div>
</div>
</div>
</body>
Hello I am trying to design a web page everything works but container-fluid is adding extra padding on the right.
As you can see in the picture there's a gap right after the navigation bar ends.
This is my index.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!--Custom Stylesheets and Scripts -->
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/index.css"> </head>
<body>
<!-- navigation bar -->
<div class="container-fluid navigation-bar-container text-center" >
<div class="navigation-bar">
<div class="row">
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Home</button>
<div class="dropdown-content">
Login
Register
Van Boening Sets World Record
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Tour Info</button>
<div class="dropdown-content"> How it Works Games Played How to get your room playing Become an event coordinator Mission and Goals </div>
</div>
</div>
</div>
<div class="col-md-4">
<!-- Logo -->
<div class="logo"> <img src="resources/images/Logos/Logo%20Vertical%20Transparent.png" class="img-responsive center-block"> </div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Events</button>
<div class="dropdown-content"> Schedule Results Locations </div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Contact</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is my app.css:
body{
font-family: "Open Sans";
}
.navigation-bar{
background-color: black;
height: 65px;
padding-top: 10px;
}
.navigation-bar-container{
padding-left: 0px;
padding-right: 0px;
}
.navigation-item{
padding-top: 10px;
}
.dropdown{
position: relative;
display: inline-block
}
.dropdown-btn {
background-color: transparent;
border: none;
color:#8CFB76;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1E392A;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #cccccc;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #234331;
color: #e6e6e6;
}
.dropdown:hover .dropdown-content {
display: block;
}
This is my index.css :
body{
background-color: #1a1a1a;
}
Can someone please tell me how I can fix this?
Edit:
After Changing the code like ZenSystem suggested:
In Bootstrap, .row should be the immediate child of
.container-fluid
The padding on .navigation-bar-container is breaking the normal offset container provides for the .row
Change it to this..
<div class="container-fluid text-center">
<div class="navigation-bar row">
<div class="col-md-2">
<div class="navigation-item">
...
http://www.codeply.com/go/NPtXsxCSxX