Mixing
How can child element take all the height of the parent element and show on bottom right corner of the...
-1
This question already has an answer here:
CSS: how to position element in lower right?
2 answers
I want that the child <p> element should take all height of the parent div tag and I could put p element text in the bottom right corner of the parent element.
I have used bootstrap and the following code.
<!DOCTYPE html>
<html><head>
<title>Lynda Training</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="row">
<div class="container-fluid">
<header class="bgimage">
<div class="container">
<p>This is the image of the bottle.</p>
</div>
</header>
</div>
</div>
<div class="row">
<div class="container">
<header class="bgimage">
</header>
</div>
</div>
<script type="text/javascript" href="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" href="js/bootstrap.min.js"></script>
</body>
</html>
styles.css:
body, html {
margin:0;
padding:0;
}
.container-fluid .bgimage, .container .bgimage {
background-image: url("/images/bottle.jpg");
background-position: center center;
background-size: cover;
height: 400px;
}
.container p {
color: white;
flex-flow: column;
text-align:right;
height: 400px;
vertical-align: text-bottom;
}
The text hangs up towards the top right corner.
css twitter-bootstrap
edited Jan 1 at 18:39
Paulie_D
75.2k96688
asked Jan 1 at 16:19
ChitwanjitChitwanjit
42
marked as duplicate by Community♦ Jan 2 at 6:00
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
-1
This question already has an answer here:
CSS: how to position element in lower right?
2 answers
I want that the child <p> element should take all height of the parent div tag and I could put p element text in the bottom right corner of the parent element.
I have used bootstrap and the following code.
<!DOCTYPE html>
<html><head>
<title>Lynda Training</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="row">
<div class="container-fluid">
<header class="bgimage">
<div class="container">
<p>This is the image of the bottle.</p>
</div>
</header>
</div>
</div>
<div class="row">
<div class="container">
<header class="bgimage">
</header>
</div>
</div>
<script type="text/javascript" href="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" href="js/bootstrap.min.js"></script>
</body>
</html>
styles.css:
body, html {
margin:0;
padding:0;
}
.container-fluid .bgimage, .container .bgimage {
background-image: url("/images/bottle.jpg");
background-position: center center;
background-size: cover;
height: 400px;
}
.container p {
color: white;
flex-flow: column;
text-align:right;
height: 400px;
vertical-align: text-bottom;
}
The text hangs up towards the top right corner.
css twitter-bootstrap
edited Jan 1 at 18:39
Paulie_D
75.2k96688
asked Jan 1 at 16:19
ChitwanjitChitwanjit
42
marked as duplicate by Community♦ Jan 2 at 6:00
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
-1
-1
-1
This question already has an answer here:
CSS: how to position element in lower right?
2 answers
I want that the child <p> element should take all height of the parent div tag and I could put p element text in the bottom right corner of the parent element.
I have used bootstrap and the following code.
<!DOCTYPE html>
<html><head>
<title>Lynda Training</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="row">
<div class="container-fluid">
<header class="bgimage">
<div class="container">
<p>This is the image of the bottle.</p>
</div>
</header>
</div>
</div>
<div class="row">
<div class="container">
<header class="bgimage">
</header>
</div>
</div>
<script type="text/javascript" href="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" href="js/bootstrap.min.js"></script>
</body>
</html>
styles.css:
body, html {
margin:0;
padding:0;
}
.container-fluid .bgimage, .container .bgimage {
background-image: url("/images/bottle.jpg");
background-position: center center;
background-size: cover;
height: 400px;
}
.container p {
color: white;
flex-flow: column;
text-align:right;
height: 400px;
vertical-align: text-bottom;
}
The text hangs up towards the top right corner.
css twitter-bootstrap
edited Jan 1 at 18:39
Paulie_D
75.2k96688
asked Jan 1 at 16:19
ChitwanjitChitwanjit
42
This question already has an answer here:
CSS: how to position element in lower right?
2 answers
I want that the child <p> element should take all height of the parent div tag and I could put p element text in the bottom right corner of the parent element.
I have used bootstrap and the following code.
<!DOCTYPE html>
<html><head>
<title>Lynda Training</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="row">
<div class="container-fluid">
<header class="bgimage">
<div class="container">
<p>This is the image of the bottle.</p>
</div>
</header>
</div>
</div>
<div class="row">
<div class="container">
<header class="bgimage">
</header>
</div>
</div>
<script type="text/javascript" href="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" href="js/bootstrap.min.js"></script>
</body>
</html>
styles.css:
body, html {
margin:0;
padding:0;
}
.container-fluid .bgimage, .container .bgimage {
background-image: url("/images/bottle.jpg");
background-position: center center;
background-size: cover;
height: 400px;
}
.container p {
color: white;
flex-flow: column;
text-align:right;
height: 400px;
vertical-align: text-bottom;
}
The text hangs up towards the top right corner.
This question already has an answer here:
CSS: how to position element in lower right?
2 answers
css twitter-bootstrap
css twitter-bootstrap
edited Jan 1 at 18:39
Paulie_D
75.2k96688
asked Jan 1 at 16:19
ChitwanjitChitwanjit
42
edited Jan 1 at 18:39
Paulie_D
75.2k96688
asked Jan 1 at 16:19
ChitwanjitChitwanjit
42
edited Jan 1 at 18:39
Paulie_D
75.2k96688
edited Jan 1 at 18:39
Paulie_D
75.2k96688
edited Jan 1 at 18:39
Paulie_D
75.2k96688
75.2k96688
asked Jan 1 at 16:19
ChitwanjitChitwanjit
42
asked Jan 1 at 16:19
ChitwanjitChitwanjit
42
asked Jan 1 at 16:19
ChitwanjitChitwanjit
42
42
marked as duplicate by Community♦ Jan 2 at 6:00
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Community♦ Jan 2 at 6:00
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
Flexbox can do that.
.container-fluid .bgimage {
background: pink;
height: 100px; /* for demo purposes */
display: flex;
flex-direction: column;
}
.container {
flex: 1;
}
p {
background: lightblue;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="container-fluid">
<header class="bgimage">
<div class="container">
<p>This is the image of the bottle</p>
</div>
</header>
</div>
</div>answered Jan 1 at 18:46
Paulie_DPaulie_D
75.2k96688
Great solution, but might be wise to add fallback
– Vaishal Patel
Jan 1 at 18:52
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Flexbox can do that.
.container-fluid .bgimage {
background: pink;
height: 100px; /* for demo purposes */
display: flex;
flex-direction: column;
}
.container {
flex: 1;
}
p {
background: lightblue;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="container-fluid">
<header class="bgimage">
<div class="container">
<p>This is the image of the bottle</p>
</div>
</header>
</div>
</div>answered Jan 1 at 18:46
Paulie_DPaulie_D
75.2k96688
Great solution, but might be wise to add fallback
– Vaishal Patel
Jan 1 at 18:52
add a comment |
1
Flexbox can do that.
.container-fluid .bgimage {
background: pink;
height: 100px; /* for demo purposes */
display: flex;
flex-direction: column;
}
.container {
flex: 1;
}
p {
background: lightblue;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="container-fluid">
<header class="bgimage">
<div class="container">
<p>This is the image of the bottle</p>
</div>
</header>
</div>
</div>answered Jan 1 at 18:46
Paulie_DPaulie_D
75.2k96688
Great solution, but might be wise to add fallback
– Vaishal Patel
Jan 1 at 18:52
add a comment |
1
1
1
Flexbox can do that.
.container-fluid .bgimage {
background: pink;
height: 100px; /* for demo purposes */
display: flex;
flex-direction: column;
}
.container {
flex: 1;
}
p {
background: lightblue;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="container-fluid">
<header class="bgimage">
<div class="container">
<p>This is the image of the bottle</p>
</div>
</header>
</div>
</div>answered Jan 1 at 18:46
Paulie_DPaulie_D
75.2k96688
Flexbox can do that.
.container-fluid .bgimage {
background: pink;
height: 100px; /* for demo purposes */
display: flex;
flex-direction: column;
}
.container {
flex: 1;
}
p {
background: lightblue;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="container-fluid">
<header class="bgimage">
<div class="container">
<p>This is the image of the bottle</p>
</div>
</header>
</div>
</div>.container-fluid .bgimage {
background: pink;
height: 100px; /* for demo purposes */
display: flex;
flex-direction: column;
}
.container {
flex: 1;
}
p {
background: lightblue;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="container-fluid">
<header class="bgimage">
<div class="container">
<p>This is the image of the bottle</p>
</div>
</header>
</div>
</div>.container-fluid .bgimage {
background: pink;
height: 100px; /* for demo purposes */
display: flex;
flex-direction: column;
}
.container {
flex: 1;
}
p {
background: lightblue;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="container-fluid">
<header class="bgimage">
<div class="container">
<p>This is the image of the bottle</p>
</div>
</header>
</div>
</div>answered Jan 1 at 18:46
Paulie_DPaulie_D
75.2k96688
answered Jan 1 at 18:46
Paulie_DPaulie_D
75.2k96688
answered Jan 1 at 18:46
Paulie_DPaulie_D
75.2k96688
answered Jan 1 at 18:46
Paulie_DPaulie_D
75.2k96688
75.2k96688
Great solution, but might be wise to add fallback
– Vaishal Patel
Jan 1 at 18:52
add a comment |
Great solution, but might be wise to add fallback
– Vaishal Patel
Jan 1 at 18:52
Great solution, but might be wise to add fallback
– Vaishal Patel
Jan 1 at 18:52
Great solution, but might be wise to add fallback
– Vaishal Patel
Jan 1 at 18:52
add a comment |
