Column Not taking full height of a row - html

I'm trying to make a grid view of columns.
Here is my code:
.pink{
background: pink;
}
.yellow{
background: yellow;
}
.gray{
background: gray;
}
.blue{
background: blue;
}
.green{
background: green;
}
.red{
background: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container"> <div class="row">
<div class="col-md-3 ">
<div class="col-md-12 pink">test</div>
<div class="col-md-12 yellow">test</div>
</div>
<div class="col-md-3">
<div class="col-md-12 gray">test</div>
</div>
<div class="col-md-6 ">
<div class="col-md-12 blue">test</div>
<div class="col-md-6 green">test</div>
<div class="col-md-6 red">test</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="col-md-12 green">test</div>
</div>
<div class="col-md-6">
<div class="col-md-12 pink">test</div>
</div>
<div class="col-md-3">
<div class="col-md-12 gray">test</div>
</div>
</div>
</div>
The column in gray should be of height as column pink and yellow.
The bottom Pink column is also not of full width.
Does anyone know why is this happening?
Thanks for any help.

Related

"col-xxl" is adding a padding in fluid-container bootstrap

i've been experimenting with the bootstrap grid system, than i encountred this issue with the "col-xxl" class, can you advise on why this happened and how to overcome this?
<style>
[class*="col"] {
padding: 1rem;
background-color: #33b5e5;
border: 2px solid #fff;
color: #fff;
}
</style>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="container-fluid text-center ">
<div class="row">
<div class="row">
<div class="col-xxl">col1-xxl</div>
<div class="col-xxl">col2-xxl</div>
</div>
<div class="col-xl">col1-xl</div>
<div class="col-xl">col2-xl</div>
</div><div class="row">
<div class="col-lg">col1-lg</div>
<div class="col-lg">col2-lg</div>
</div>
<div class="row">
<div class="col-md">col1-md</div>
<div class="col-md">col2-md</div>
</div>
<div class="row">
<div class="col-sm">col1-sm</div>
<div class="col-sm">col2-sm</div>
</div>
</div>
the code i worked on
You had an additional row class wrapped around your div(s). Additionally, you forgot to wrap a row class around your col-xl. See code snippet below:
[class*="col"] {
padding: 1rem;
background-color: #33b5e5;
border: 2px solid #fff;
color: #fff;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid text-center ">
<div class="row">
<div class="col-xxl">col1-xxl</div>
<div class="col-xxl">col2-xxl</div>
</div>
<div class="row">
<div class="col-xl">col1-xl</div>
<div class="col-xl">col2-xl</div>
</div>
<div class="row">
<div class="col-lg">col1-lg</div>
<div class="col-lg">col2-lg</div>
</div>
<div class="row">
<div class="col-md">col1-md</div>
<div class="col-md">col2-md</div>
</div>
<div class="row">
<div class="col-sm">col1-sm</div>
<div class="col-sm">col2-sm</div>
</div>
</div>
You have placed class row 2 times which at col-xxl and the same is missing above col-xl..
please refer snippet and code for your reference..
also I've attached snap for details..
[class*="col"] { padding: 1rem; background-color: #33b5e5; border: 2px solid #fff; color: #fff; }
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<div class="alert alert-primary text-center" role="alert">
A simple primary alert—check it out!
</div>
<div class="container-fluid text-center ">
<div class="row">
<div class="col-xxl">col1-xxl</div>
<div class="col-xxl">col2-xxl</div>
</div>
<div class="row">
<div class="col-xl">col1-xl</div>
<div class="col-xl">col2-xl</div>
</div>
<div class="row">
<div class="col-lg">col1-lg</div>
<div class="col-lg">col2-lg</div>
</div>
<div class="row">
<div class="col-md">col1-md</div>
<div class="col-md">col2-md</div>
</div>
<div class="row">
<div class="col-sm">col1-sm</div>
<div class="col-sm">col2-sm</div>
</div>
</div>
Thanks..

Bootstrap 4 Trying to get this Grid Format

Trying to Get this Grid format
Hello, I am currently new to using bootstrap 4 and am trying to get the format above.
This is what I am currently trying so far....
<div class="container">
<div class="row">
<div class="col-md-4" >1</div>
<div class="col-md-8">2</div>
<div class="col-md-8 ">3</div>
</div>
</div>
Here you go!
.content {
min-height: 100px;
background: #ccc;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4">
<div class="row h-100">
<div class="col-12 h-100">
<div class="content h-100">1</div>
</div>
</div>
</div>
<div class="col-8">
<div class="row">
<div class="col-12 mb-3 pl-0">
<div class="content">2</div>
</div>
<div class="col-12 pl-0">
<div class="content">3</div>
</div>
</div>
</div>
</div>
</div>
.one, .two, .three{
border: solid 2px gray;
min-height: 150px;
font-weight: bold;
}
.one{
background: lightblue;
}
.two{
background: lightgreen;
}
.three{
background: pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-5 one">1</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-8 two">2</div>
</div>
<div class="row">
<div class="col-sm-8 three">3</div>
</div>
</div>
</div>
</div>

html +css , opacity [duplicate]

This question already has answers here:
Making text background transparent but not text itself
(9 answers)
Closed 3 years ago.
here my css and html, how to make my opacity on my background only with not effect my word inside container.
<style>
.x1 {
background-color: #ffb3b3;
opacity:0.1;
}
.x2 {
background-color: #ffe6e6;
}
.x3 {
background-color: #ffe6e6;
}
</style>
here my `html`
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2"><center><h1>Dashboard</h1></center></div>
</div>
<div class="row">
<div class="col-sm-3 x1">
asd
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-3 x2">
sadsd
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-4 x3">
sdas
</div>
</div>
<div class="row">
<div class="col-12">
</div>
</div>
You can use background-color in rgba value and adjust the opacity(0.5) level based on your requirement.
.x1 {
background-color: rgba(230, 140, 140, 0.5);
}
.x2 {
background-color: #ffe6e6;
}
.x3 {
background-color: #ffe6e6;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.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>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<center><h1>Dashboard</h1></center>
</div>
</div>
<div class="row">
<div class="col-sm-3 x1">
asd
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-3 x2">
sadsd
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-4 x3">
sdas
</div>
</div>
<div class="row">
<div class="col-12">
</div>
</div>

Bootstrap: content fill height

I have made this layout with bootstrap
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 leftsidebar">left</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12 header">header</div>
</div>
<div class="row">
<div class="col-md-12 content">content</div>
</div>
<div class="row">
<div class="col-md-12 footer">footer</div>
</div>
</div>
<div class="col-md-2 rightsidebar">right</div>
</div>
</div>
Content should always fill out the page, so I want to get something along the lines of:
Use code as below (run and see in full page):
html,body{
height:100%;
}
.leftsidebar{
background:orange;
}
.rightsideba{
background:green;
}
.vh-100{
height: 100vh!important;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
background:red;
}
.content{
background:skyblue;
height: calc(100% - (30px));
}
.vw-100{
width:100vw;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid h-100">
<div class="row">
<div class="col-md-2 leftsidebar vh-100">left</div>
<div class="col-md-8">
<div class="row header">
<div class="col-md-12 h-100">header</div>
</div>
<div class="row content">
<div class="col-md-12">content</div>
</div>
<div class="row footer">
<div class="col-md-12 h-100">footer</div>
</div>
</div>
<div class="col-md-2 rightsideba vh-100 vw-100">right</div>
</div>

Center divs, into another div using Boostrap 3

I want to center two divs, into another div (horizontally). Can someone tell me how can I do it, in the bellow code? I want to have the two divs with the classes box-left and box-right, in the middle of the div with the class outer:
<html>
<head>
<style>
.container{
background-color: blue;
}
.outer{
text-align: center;
}
.width-600{
width:600px;
text-align:left;
margin-right: auto;
margin-left: auto;
}
.box-left{
background-color: yellow;
}
.box-right{
background-color: green;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="outer">
<div class="row width-600">
<div class="col-xs-12 col-md-4">
<div class="box-left">left</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="box-right">right</div>
</div>
</div>
</div>
</div>
</body> </html>
You can use display:flex and justify-content:center on .outer class ,would center the two rows
check the following snippet
.container {
background-color: blue;
}
.outer {
display:flex;
justify-content:center;
}
.width-600 {
width: 400px;
}
.box-left {
background-color: yellow;
}
.box-right {
background-color: green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="outer">
<div class="row ">
<div class="col-xs-12 col-md-4">
<div class="box-left">left</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="box-right">right</div>
</div>
</div>
</div>
</div>
replace this body in your html and see if it works for you..
<body>
<div class="container">
<div class="row width-600">
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2"></div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<div class="box-left">left</div>
</div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<div class="box-right">right</div>
</div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2">
</div>
</div>
</div>
</body>