How do I make full page sized Bootstrap div?
Question
I need to make a full-page sized div background.
So I'm having these two columns: col-9 sized div in gray and col-3 div in blue color. Here's the code of the two cols:
@media print { @page { size: auto; margin: 0; } }
<html> <head> <title>Test Full Page</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.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script> <script src='https://kit.fontawesome.com/a076d05399.js'></script> </head> <body> <div class="container"> <div class="row"> <div class="col-9 h-100" style="background-color:#F8F8FF;"> <div style="margin-top: 20px;"> <div class="row"> <div class="col-11"> <br /> <h4>Title</h4> <hr> </div> </div> <div class="row" style="padding-left: 1.5rem;"> <div class="col-6"> <strong>Title</strong> <p align="justify"> <span>Date</span> </p> <p align="justify"> Blablabla </p> </div> </div> </div> </div> <div class="col-3 h-100" style="background-color:#0BA9FE;"> </div> </div> </div> </body> </html>
How do I make both div cols full-sized height on every page? like the first page, second and third page. These two divs won't fill the entire page even when I added the h-100 class.
Any help will be much appreciated.
Thank you
1 answers
solution1
0 2020-11-11 12:06:44
Remove h-100 from the class in div. Refer working code https://jsfiddle.net/pallaviyadav/n3Lus0v7/8/
<html>
<head>
<title>Test Full Page</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.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-9" style="background-color:#F8F8FF;">
<div style="margin-top: 20px;">
<div class="row">
<div class="col-11">
<br />
<h4>Title</h4>
<hr>
</div>
</div>
<div class="row" style="padding-left: 1.5rem;">
<div class="col-6">
<strong>Title</strong>
<p align="justify">
<span>Date</span>
</p>
<p align="justify">
Blablabla
</p>
</div>
</div>
</div>
</div>
<div class="col-3" style="background-color:red;">
</div>
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I make my Bootstrap Carousel the full width of the page?
How do I make a Bootstrap grid column be the full height of the page?
How to make a div full sized in CSS?
How do I make my <div> the full height of a page?
How do I make a div full screen?
how to make bootstrap 3 responsive navbar with full sized search form in the middle?
How do i make make a div inside a container have an image that is sized like its other div siblings?
How can I make Bootstrap div full width? (based on screen)
How do I make right div height equal to dynamically sized left div?
How can I center some text using bootstrap 4 in a full sized jumbotron and setting a max-width for just the div or p container?
Related Tags