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
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>
Related
I want to make a screen with buttons responsively, these buttons are square, they should be next to each other, but as soon as the line breaks they should start on the left side, but always stay in the center. I'm using bootstrap-5, but I don't know how to do that. I tried with flex-box.
My code:
.box {
height: 65px;
width: 60px;
background: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-wrap gap-4 w-50 border border-primary">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Nest the flexbox in another div. Then give it the mx-auto class to center itself in the middle of the parent div.
Now give the parent div the class w-50 and change the width of the flexbox to the width you want.
.box {
height: 65px;
width: 60px;
background: black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container px-5 border border-primary">
<div class="d-flex flex-wrap gap-4 w-75 mx-auto">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
Based on my small knowledge in bootstrap I think you should add p-5 as an example to your container div .
P-(number between 1 & 5) representing the padding so in this way the boxes will have the space you want to stay away from the border.
.box{
height:65px;
width: 60px;
background: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="d-flex p-3 flex-wrap gap-4 w-50 border border-primary">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
I am using the container-lg class of Bootstrap, and I am experiencing the current situation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6" style="background-color: red;"></div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I am trying to horizontally align the text of the left div with the header's one, without affecting to the right container, which must have a width of 100% without paddings or margins.
This is what I have tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="container-lg py-5">
<div class="row" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6" style="background-color: red;"></div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
But, as you can notice, this is not my expected behavior, because it affects to the right container.
Any ideas?
Yes, enjoy both of the worlds by using absolute positioning. It's not that awful.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="containers-container position-relative">
<div class="container-fluid-lg">
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
</div>
<div class="col-md-6" style="background-color: red;">
</div>
</div>
</div>
<div class="container-lg position-absolute" style="left:0; right:0; top:0;">
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6">
<h2>Right</h2>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
For example:
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="image">
<img src="https://picsum.photos/1200/1200" alt="" class="img-fluid">
</div>
</div>
<div class="col-lg-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
The sandbox code:
https://codesandbox.io/s/interesting-euler-sh22vn?file=/index.html
Photo what I want:
https://ibb.co/MnLQf6n
My problem is when I add fix height, the text is moving when I change screen view.
I need to vertical align the text to image center point on desktop screen.
just add align-items-center to row and it will worce the layout to be vertically center learns about flex from here and bootstrap flex properties from here
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row align-items-center">
<div class="col-8">
<div class="image">
<img
src="https://picsum.photos/1200/1200"
alt=""
class="img-fluid"
/>
</div>
</div>
<div class="col-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
This will solve your problem.
<div class="row align-items-center">
I want a specific display depending on whether I have an image or not in a row bootstrap.
I want when I have an image and text content, I can have in the same row for a column size 4 my image and right my text content with a column size of 8
enter image description here
According to the display below and if the image is not there I can have instead of the image the content.
<div class="container ">
<div class="row ">
<div class="col-md-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-md-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
How can I do it
use align-items-center as class in parent div. here is the snippet
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container ">
<div class="row align-items-center">
<div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
use align-items-center as class in parent div. here is the snippet
and if you want to remove image then you have to add style of some specific height so it will align all items in center according to the height.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container ">
<div class="row align-items-center">
<div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
I want to create a layout responsive like the pic down, with bootstrap 4 or other support. (full screen)
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="flex-row">
<div class="col" style="background-color: blue;">Header</div>
</div>
<div class="flex-row">
<div class="col-md-4" style="background-color: orange;">Left Nav</div>
<div class="col" style="background-color: gray;">Content</div>
</div>
<div class="flex-row" style="background-color: green;">
Footer
</div>
</div>
#RenderBody()
</body>
</html>
.container
{ height: 100%;
width: 100%; }
Any idea for this ?
p.s. I work with VS2019
I created your design using bootstrap col.You can modify the height as you wish but you can use this layout for your blueprint.For more info you can check : https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
<!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.3.1/css/bootstrap.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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-12" style="background-color:yellow;height:200px">Header</div>
</div>
<br>
<div class="row" style="height:450px">
<div class="col-sm-4" style="background-color:yellow;">Left Navigation</div>
<div class="col-sm-8" style="background-color:orange;">Content</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col-sm-12" style="background-color:yellow;height:225px">Footer</div>
</div>
<br>
</div>
</body>
</html>
Try following,
<div class="container-fluid">
<div class="flex-row">
<div class="col" style="background-color: #5B9BD5;">Header</div>
</div>
<div class="flex-row">
<div class="col-md-4" style="background-color: #ED7D31;">Left Nav</div>
<div class="col" style="background-color: #A5A5A5;">Content</div>
</div>
<div class="flex-row" style="background-color: #70AD47;">
Footer
</div>
</div>