html +css , opacity [duplicate] - html

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>

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>

Column Not taking full height of a row

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.

I do not want divs to come side by side

I do not want divs to come side by side. how can i solve this
search about -- > false
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row ">
<div class="col-md-8 "></div>
<div class="col-md-4 d-flex justify-content-start">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>

Have you tried a <br/> tag between the divs?

Remove class="col-md-4" from div

.search {border: 1px solid #000; display: block!important;}
.about {border: 1px solid #000; display: block!important;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-8 ">
</div>
<div class="col-md-4">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>
on your CSS div { display: block; } , or you can give property to your classes, like:
.search { display: block;}
.about { display: block;}
if you want just to test if it works you can write it directly on the html, but change it to the CSS file as soon as you see that it works:
<div style="display: block;" class="search">
<p>search</p>
</div>
<div style="display: block;" class="about">
<p>about</p>
</div>

.search {border: 1px solid #000; display: block!important;}
.about {border: 1px solid #000; display: block!important;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-8 ">
</div>
<div class="col-md-4 d-flex justify-content-start">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>

You can try adding this css style to the div elements:
div{
clear:both;
}

It works perfectly in my browser. <div> tag is a block element by default. I think you should update your browser instead.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-8 ">
</div>
<div class="col-md-4">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-8 ">
</div>
<div class="col-md-4 d-flex justify-content-start">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>
d-flex justify-content-start -- if i add this code it does not work

Separate bootstrap classes with my own?

I use bootstrap. Do I need separate rows with my own classes? Because if I don't I can't set the background of the section for example. Which piece of code is better?
<div class="container">
<nav class="row"></nav>
<section class="row">
<div class="col-sm-3">
some text
</div>
</section>
</div>
 
<div class="container">
<div class="row">
<nav></nav>
</div>
<div class="row">
<section>
<div class="col-sm-3">
some text
</div>
</section>
</div>
</div>

You can use both and change background of section as you prefer. Just add your own class and set css.
nav{
height:30px !important;
width:100%;
display:block;
background-color: red;
}
.containercolor{
background-color: black;
margin:0px;
}
.row{
margin: 0px !important;
}
.sectionrow{
height: 200px;
}
.colcolor{
background-color: green;
height:100%;
}
.sectionrow{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
</nav>
<div class="container-flex containercolor">
<div class="row sectionrow">
<div class="col-xs-6">
</div>
<div class="col-xs-6 colcolor">
</div>
</div>
</div>
<div class="container-flex ">
<div class="row containercolor">
<nav></nav>
</div>
<div class="row">
<section class="sectionrow">
<div class="col-sm-3">
some text
</div>
</section>
</div>
</div>