I am trying to design both a print and send button using a styled HRef, below is the way the button is expected to look like, but my float: right; is not working.
Expected:
But this is what I am getting after much trial because float: right; is not working:
/* CSS */
#print-btn {
font-size: 16px;
color: #27A9F8;
background: #FFFFFF;
border: 1px solid #27A9F8;
box-sizing: border-box;
border-radius: 4px;
padding: 11px 40px;
margin-right: 15px;
}
#send-btn {
float: right;
font-size: 16px;
text-transform: capitalize;
color: #FFFFFF;
background: #27A9F8;
border: 1px solid #27A9F8;
box-sizing: border-box;
border-radius: 4px;
padding: 11px 40px;
margin-right: 19px;
margin-bottom: 22px;
}
<div class="row">
<div class="col-md-12">
<h2 class="result-remark">1st position in the class of 45 student’s</h2>
<h3 id="teachers-remark">An execellent chemistry student, but needs to work hard on other subjects.</h3>
</div>
</div>
<div class="row">
<div class="text-right">
<i class="mdi mdi-printer print-ico"></i> Print
Send
</div>
</div>
You need to remove float: right; from #send-btn
Edit:
You would also need to add class col-md-12 to the parent.
#print-btn {
font-size: 16px;
color: #27A9F8;
background: #FFFFFF;
border: 1px solid #27A9F8;
box-sizing: border-box;
border-radius: 4px;
padding: 11px 40px;
margin-right: 15px;
}
#send-btn {
// float: right;
font-size: 16px;
text-transform: capitalize;
color: #FFFFFF;
background: #27A9F8;
border: 1px solid #27A9F8;
box-sizing: border-box;
border-radius: 4px;
padding: 11px 40px;
margin-right: 19px;
margin-bottom: 22px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<h2 class="result-remark">1st position in the class of 45 student’s</h2>
<h3 id="teachers-remark">An execellent chemistry student, but needs to work hard on other subjects.</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<i class="mdi mdi-printer print-ico"></i> Print
Send
</div>
</div>
Remove float and use bootstrap class.
#send-btn { /* float: right; remove it */ }
Change this:
<div class="text-right">
To this:
<div class="col-md-12 text-right">
Edit - this is without any of your css. check it:
<html>
<head>
<meta charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="result-remark">1st position in the class of 45 student’s</h2>
<h3 id="teachers-remark">An execellent chemistry student, but needs to work hard on other subjects.</h3>
</div>
<div class="col-md-12 text-right">
<i class="mdi mdi-printer print-ico"></i> Print
Send
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
You mean this?
Remove the float on the button and use text-align on the container?
/* CSS */
#print-btn {
font-size: 16px;
color: #27A9F8;
background: #FFFFFF;
border: 1px solid #27A9F8;
box-sizing: border-box;
border-radius: 4px;
padding: 11px 40px;
margin-right: 15px;
}
#send-btn {
font-size: 16px;
text-transform: capitalize;
color: #FFFFFF;
background: #27A9F8;
border: 1px solid #27A9F8;
box-sizing: border-box;
border-radius: 4px;
padding: 11px 40px;
margin-right: 19px;
}
.text-right { text-align:right }
<div class="row">
<div class="col-md-12">
<h2 class="result-remark">1st position in the class of 45 student’s</h2>
<h3 id="teachers-remark">An execellent chemistry student, but needs to work hard on other subjects.</h3>
</div>
</div>
<div class="row">
<div class="text-right">
<i class="mdi mdi-printer print-ico"></i> Print
Send
</div>
</div>
Result in my browser
#print-btn {
font-size: 16px;
color: #27A9F8;
background: #FFFFFF;
border: 1px solid #27A9F8;
box-sizing: border-box;
border-radius: 4px;
padding: 11px 40px;
margin-right: 15px;
}
#send-btn {
float: right;
font-size: 16px;
text-transform: capitalize;
color: #FFFFFF;
background: #27A9F8;
border: 1px solid #27A9F8;
box-sizing: border-box;
border-radius: 4px;
padding: 11px 40px;
margin-right: 19px;
margin-bottom: 22px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="col-md-12">
<h2 class="result-remark">1st position in the class of 45 student’s</h2>
<h3 id="teachers-remark">An execellent chemistry student, but needs to work hard on other subjects.</h3>
</div>
</div>
<div class="container-fluid">
<div class="text-right">
<i class="mdi mdi-printer print-ico"></i> Print
Send
</div>
</div>
<div class="container-fluid">
<div class="col-md-12">
<h2 class="result-remark">1st position in the class of 45 student’s</h2>
<h3 id="teachers-remark">An execellent chemistry student, but needs to work hard on other subjects.</h3>
</div>
</div>
<div class="container-fluid">
<div class="text-right">
<i class="mdi mdi-printer print-ico"></i> Print
Send
</div>
</div>
Related
I'm trying to accomplish the below using CSS:
Required Output Image
I have tried to place horizontal line and content in between those div, but I am not getting that.
I tried below code
HTML code:
<div class="col-12">
<div class="row mt-3 mb-3">
<div class="col-md-2 offset-md-1 text-center">
<div class="d-flex flex-column" style="font: normal normal 600 12px/24px Gellix Semi Bold; color: #000048;">
<div class="align-self-center ExcelBox d-flex justify-content-center align-items-center">
<div class="d-flex justify-content-center align-items-center">
<!-- Excel images comes -->
</div>
</div>
<div class="mt-2" style="font: normal normal normal 12px/24px Gellix Regular; color: #53565A;">
Application / Ticket Download</div>
<div class="mt-2">
<button class="upload-Downloadbtn">
Download
</button>
</div>
</div>
</div>
<div class="col-md-5 ">
<!-- Horizontal Line need come here as like in image -->
</div>
<div class="col-md-2 offset-md-1 text-center">
<div class="d-flex flex-column" style="font: normal normal 600 12px/24px Gellix Semi Bold; color: #000048;">
<div class="align-self-center ExcelBox d-flex justify-content-center align-items-center">
<div class="d-flex justify-content-center align-items-center">
<!-- Excel images comes -->
</div>
</div>
<div class="mt-2" style="font: normal normal normal 12px/24px Gellix Regular; color: #53565A;">
Application / Ticket Upload</div>
<div class="mt-2">
<button class="upload-btn">
Upload
</button>
</div>
</div>
</div>
</div>
</div>
I Have tried and the output image I share it below:
enter image description here
I am unable to share the CSS its showing error.
CSS code:
.upload-btn {
width: 121px;
height: 32px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 4px;
color: #2F78C4;
font: normal normal 600 14px/13px Gellix Semi Bold;
border: 1px solid #2F78C4;
}
.upload-btn img{
width: 18px;
height: 15px;
display: inline-block;
margin-right: 5px;
margin-top: -3px;
vertical-align: middle;
}
.upload-Downloadbtn {
width: 140px;
height: 32px;
background: #26EFE9 0% 0% no-repeat padding-box;
border-radius: 4px;
color: #000048;
font: normal normal 600 14px/13px Gellix Semi Bold;
border: none;
}
.upload-Downloadbtn img {
width: 18px;
height: 15px;
display: inline-block;
margin-right: 5px;
margin-top: -3px;
vertical-align: middle;
}
.TicketHorLine
{
border-bottom:2px solid black;
padding-bottom:15px;
position:relative;
}
.TicketHorLine:before, .TicketHorLine:after
{
position:absolute;
bottom:-6px; left:0;
height:10px;
width:10px;
background:black;
content:"";
border-radius:5px;
}
.TicketHorLine:after
{
right:0;
left:auto;
}
.ExcelBox {
background-color: #FFFFFF;
border-radius: 50%;
height: 74px;
width: 74px;
border: 1px solid #059F4C;
}
section+section { border-top-style: solid; border-top-width: .1em; }
Created a sample, similar to image in your question
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hr{
display: flex;
width:100%;
align-items: center;
}
.hr__dot{
height:10px;
width:10px;
background-color: black;
border-radius: 5px;
}
.hr__line{
border-top:2px solid black;
min-width: 500px;
width: max-content;
}
</style>
</head>
<body>
<div>One</div>
<div class="hr">
<div class="hr__dot"></div>
<div class="hr__line"></div>
<div class="hr__dot"></div>
</div>
<div>Two</div>
</body>
</html>
Output:
I am checking my website different resolutions and browsers using Dev Tools and www.responsinator. in the web site I have used the owl Carousel, but in iPhone XR (414896) or iphone 12 pro (390844) or samsung galaxy (412 * 912) it is messed up.
in real it is like this
but on those resolution it is like this
this is the code for this part:
.cart-col {
width: 100%;
padding: 10px;
border: 1px solid #e2efef;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
position: relative;
display: inline-block;
background: #fff;
border-radius: 10px;
margin-bottom: 15px;
}
.cart-title {
font-size: 13px;
font-family: IRANSans;
font-weight: bold;
padding-right: 7px;
display: inline-block;
}
.btn-filter {
background-color: #ffffff;
font-size: 14px;
outline: none;
cursor: pointer;
border: 1px solid #ccc;
vertical-align: middle;
width: 100px !important;
float: right;
margin-right: 15px;
margin-top: 15px;
}
.btn-filter>a {
color: #ccc;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.btn-filter>a:hover {
color: black;
}
.img-filter {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.filter-title {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
display: inline-block;
margin-top: 20px;
}
.filter-option {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
}
<!-- ----- Bootstrap-4 ----- -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- ----- Body ------------ -->
<div class="col-lg-2 col-md-2 col-sm-12 mr-1 ml-2 cart-col fixed" style="height:650px;">
<div class="cart-title">Filter </div>
<div>
<hr /> </div>
<div class="filter-title">Select the options </div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">0-2 </a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">3-5 </a>
</div>
</div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">6-8</a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">8-12 </a>
</div>
</div>
<div>
<div class="filter-title">Select the type </div>
<div>
<select class="form-control filter-option" id="BookType" asp-items="#ViewBag.BookType">
<option value="">vocal </option>
</select>
</div>
</div>
<div>
<div class="filter-title">select the subject </div>
<div>
<select class="form-control filter-option" id="BookSubject" asp-items="#ViewBag.BookSubject">
<option value="">comic</option>
</select>
</div>
</div>
<div class="img-filter"><img src="~/images/filter.jpg" /> </div>
how can I make adjustable for this resolution
Update
=============================
I checked my code and I found that I have search input in my layout
<form asp-action="Index" asp-controller="Products" method="get" class="form-inlineflex">
<input type="search" class="header-search-input d-inline-flex" name="SearchKey">
<div class="action-btns d-inline-flex ">
<button class="btn btn-search" type="submit">
<i class="bi bi-search "></i>
</button>
</div>
</form>
with CSS:
.header-search-input {
background: #f0f0f0;
font-size: 12px;
height: 24px;
padding: 0;
outline: none;
}
if I remove this class from input box, so everything will be ok in any resolution and browser, but things will be messy in a few resolution as soon as I set that class to the inputbox
can anyone give me a clue for the reason?
I'm looking to add a space between my col's but still have the 3 boxes at 1 row at size 4. I've tried adding margin to.col-style-3 witch ofcause did not work, but push them off position. Also i've tried to add padding, but since i'm using a border, the padding will just push away my border. I've also tried to add col-sm-12 inside my col-sm-4 witch can work, but the transaction works wired then, and i know it's not the right way to do it. Any suggestions on how to fix this issue, i'm not looking for more than 10-15px space between my boxes.
Image of how it does look now:
This is my html:
<div class="row">
#foreach (var Site in Model)
{
<a target="_blank" href="#Site.Url">
<div class="col-sm-4 col-style-3">
<img class="CasinoImage" src="~/Content/Img/#Site.ImageName" />
<h2>#Site.Name</h2>
<hr />
<h3>Denne side tilbyder:</h3>
<span class="OfferStyle">
#Site.Bonuses
</span>
<hr />
<div class="ClickMeBox">Hent din bonus nu</div>
#if (#Site.DepositRequired == true)
{
<span class="DepositStyle">INDBETALING ER NØDVENDIGT</span>
}
else
{
<span class="DepositStyle">INGEN INDBETALING NØDVENDIGT!</span>
}
</div>
</a>
}
</div>
This is my styling:
.col-style-3 {
padding: 0px !important;
background-color: #fff;
border: solid 1px #e0e0e0;
border-radius: 5px;
text-align: center;
color: #000;
transition: 0.5s;
}
.col-style-3 > a {
color: #FFFFFF;
text-decoration: none;
}
.col-style-3:hover {
border: solid 1px #bebebe;
box-shadow: 0 5px 10px #adadad;
transition: 0.3s;
}
I think you just need to make the width 1/3 of the size MINUS padding and spacing.
In the example below, I had a 0.5rem margin around each div. If each div is 33.3%, then they will push out of the 100% container because the margin space still takes up space. So, I did width: calc((33.3%) - 1rem and it. I added an extra 2px for the border.
Check out myCodePen
Note : please use bootstrap css for this
.col-xs-4{padding: 0 15px;}
<div class="container">
<div class="row">
<div class="col-xs-4">
<img src="https://fakeimg.pl/350x200/ff0000/000">
</div>
<div class="col-xs-4">
<img src="https://fakeimg.pl/350x200/ff0000/000">
</div>
<div class="col-xs-4">
<img src="https://fakeimg.pl/350x200/ff0000/000">
</div>
</div>
</div>
I'd recommend making your div.col-sm-4 containers direct children of the div.row with a class of border-0 (removes the border from outer container) and then your div within the anchor tag would look something like <div class="col-style-3 border">. Demo: https://codepen.io/chasewoodford/pen/VwwZaQe
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 30px 0;
padding: 0;
}
.col-style-3 {
padding: 0px !important;
background-color: #fff;
border: solid 1px #e0e0e0;
border-radius: 5px;
text-align: center;
color: #000;
transition: 0.5s;
}
.col-style-3 > a {
color: #FFFFFF;
text-decoration: none;
}
.col-style-3:hover {
border: solid 1px #bebebe;
box-shadow: 0 5px 10px #adadad;
transition: 0.3s;
}
.CasinoImage {
background-color: #024c32;
width: 100%;
height: 244px;
}
a {
text-decoration: none !important;
outline: none !important;
border: none !important;
box-shadow: none !important;
}
.center {
border-bottom: 1px solid #eeeeee;
padding: 15px;
font-size: 25px;
font-weight: 500;
text-align: center;
margin: 0;
}
.Denneside {
border-bottom: 1px solid #eeeeee;
margin: 0;
padding: 20px;
}
.Denneside h3 {
padding: 0;
font-size: 20px;
font-weight: 500;
text-align: center;
margin: 0 0 10px 0;
}
.Denneside span {
padding: 0;
font-size: 16px;
font-weight: 400;
text-align: center;
margin: 0;
}
.ClickMeBox {
background-color: #ff6a00;
padding: 5px;
font-size: 20px;
font-weight: 700;
color: #FFFFFF;
text-align: center;
text-transform: uppercase;
margin: 10px 0 0 0;
}
.Box {
padding: 5px;
font-size: 12px;
font-weight: 400;
text-align: center;
text-transform: uppercase;
margin:0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 border-0">
<a target="_blank" href="#Site.Url">
<div class="col-style-3 border">
<img class="CasinoImage" src="https://www.w3schools.com/images/picture.jpg" alt="Mountain" />
<h2 class="center">Danske Spil</h2>
<div class="Denneside">
<h3>Denne side tilbyder:</h3>
<span class="OfferStyle">100% Indbetaling + 50 FreeSpins</span>
</div>
<div class="ClickMeBox">HENT DIN BOUNUS NU</div>
<div class="Box">INDBETALING ER NODVENDIGT</div>
</div>
</a>
</div>
<div class="col-sm-4 border-0">
<a target="_blank" href="#Site.Url">
<div class="col-style-3 border">
<img class="CasinoImage" src="https://www.w3schools.com/images/picture.jpg" alt="Mountain" />
<h2 class="center">Danske Spil</h2>
<div class="Denneside">
<h3>Denne side tilbyder:</h3>
<span class="OfferStyle">100% Indbetaling + 50 FreeSpins</span>
</div>
<div class="ClickMeBox">HENT DIN BOUNUS NU</div>
<div class="Box">INDBETALING ER NODVENDIGT</div>
</div>
</a>
</div>
<div class="col-sm-4 border-0">
<a target="_blank" href="#Site.Url">
<div class="col-style-3 border">
<img class="CasinoImage" src="https://www.w3schools.com/images/picture.jpg" alt="Mountain" />
<h2 class="center">Danske Spil</h2>
<div class="Denneside">
<h3>Denne side tilbyder:</h3>
<span class="OfferStyle">100% Indbetaling + 50 FreeSpins</span>
</div>
<div class="ClickMeBox">HENT DIN BOUNUS NU</div>
<div class="Box">INDBETALING ER NODVENDIGT</div>
</div>
</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</body>
</html>
When I dont have any background of the body than whatever is the content's background it is visible. But when I set video as body background than other background color becomes inactive. Like I cannot see what ever content is written in H2 tag. Also the styling of .row class doesnt work. It will work if I remove the video as background.
<html>
<head>
<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>
<style>
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
h2{
background: #d1ff9b;
margin-top: 10px;
border: 2px solid #468201;
padding: 15px;
border-radius:20px;
text-align: center;
font-weight: bold
}
.row{
border: 2px solid #468201;
background-color: #d1ff9b !important;
margin: 20px;
border-radius:20px;
box-shadow:5px 5px 5px #468201;
padding: 20px;
font-weight:bold;
font-size: 22px
}
.block{
display: block;
width:100%;
border: none;
margin-top: 20px;
border-radius:20px;
background: #569E00;
color:white;
box-shadow:2px 2px 1px #468201;
font-family: roboto;
padding: 14px 28px;
font-size: 20px;
cursor: pointer;
text-align: left
}
</style>
</head>
<body>
<video autoplay muted loop id="myVideo">
<source src="img/1.webm" type="video/webm">
</video>
<h2>Read the statements carefully and click on the correct option.</h2>
<div class="container tab1">
<div class="row">
<div class="col-sm-12" style="padding:10px;"> 1. Lightning is caused when</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<button class="block" onclick="wrong(1)" id="wrong1">(a) Two clouds of similar charge rub against each other</button>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<button class="block" onclick="wrong(2)" id="wrong2">(b) Two clouds of dissimilar charge rub against each other</button>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<button class="block" onclick="wrong(3)" id="wrong3">(c) There is electric discharge between two clouds</button>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<button class="block" onclick="correct(1)" id="correct1">(d) Both (a) and (c) are correct </button>
</div>
</div>
</div>
</body>
</html>
Try this way:
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
h2 {
margin-top: 10px;
border: 2px solid #468201;
padding: 15px;
border-radius: 20px;
text-align: center;
font-weight: bold;
}
.roww {
border: 2px solid #468201;
background-color: #d1ff9b !important;
margin: 20px;
border-radius: 20px;
box-shadow: 5px 5px 5px #468201;
padding: 20px;
font-weight: bold;
font-size: 22px;
}
.block {
display: block;
width: 100%;
border: none;
margin-top: 20px;
border-radius: 20px;
background: #569E00;
color: white;
box-shadow: 2px 2px 1px #468201;
font-family: roboto;
padding: 14px 28px;
font-size: 20px;
cursor: pointer;
text-align: left;
}
<html>
<head>
<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>
</head>
<body>
<video autoplay muted loop id="myVideo">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="container tab1">
<div class="row">
<div class="col-sm-12">
<div class="roww">
<h2>Read the statements carefully and click on the correct option.</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" style="padding:10px;"> 1. Lightning is caused when</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<button class="block" onclick="wrong(1)" id="wrong1">(a) Two clouds of similar charge rub against each other</button>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<button class="block" onclick="wrong(2)" id="wrong2">(b) Two clouds of dissimilar charge rub against each other</button>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<button class="block" onclick="wrong(3)" id="wrong3">(c) There is electric discharge between two clouds</button>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<button class="block" onclick="correct(1)" id="correct1">(d) Both (a) and (c) are correct </button>
</div>
</div>
</div>
</body>
</html>
I just changed the background-color repeated class become .row.bg-load.
Now you can visible your alternative background-color.
* {
box-sizing: border-box;
position: relative;
}
.row.bg-load {
background-color: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.card {
border: 0;
border-top: 1px solid #ddd;
border-radius: 0;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
h2 {
background: #d1ff9b;
margin-top: 10px;
border: 2px solid #468201;
padding: 15px;
border-radius: 20px;
text-align: center;
font-weight: bold
}
.row {
border: 2px solid #468201;
background-color: #d1ff9b;
margin: 20px;
border-radius: 20px;
box-shadow: 5px 5px 5px #468201;
padding: 20px;
font-weight: bold;
font-size: 22px
}
.block {
display: block;
width: 100%;
border: none;
margin-top: 20px;
border-radius: 20px;
background: #569E00;
color: white;
box-shadow: 2px 2px 1px #468201;
font-family: roboto;
padding: 14px 28px;
font-size: 20px;
cursor: pointer;
text-align: left
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<video controls autoplay id="myVideo">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
<h2>Read the statements carefully and click on the correct option.</h2>
<div class="container tab1">
<div class="row bg-load">
<div class="col-sm-12" style="padding:10px;"> 1. Lightning is caused when</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<button class="block" onclick="wrong(1)" id="wrong1">(a) Two clouds of similar charge rub against each other</button>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<button class="block" onclick="wrong(2)" id="wrong2">(b) Two clouds of dissimilar charge rub against each other</button>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<button class="block" onclick="wrong(3)" id="wrong3">(c) There is electric discharge between two clouds</button>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<button class="block" onclick="correct(1)" id="correct1">(d) Both (a) and (c) are correct </button>
</div>
</div>
</div>
body {
font-family: 'Ubuntu', sans-serif;
background-color: #0d0d0d !important;
}
body a {
color: #fff;
}
body a:hover {
color: #fff;
}
#media (min-width: 1500px) {
.container{
width: 1470px !important;
}
}
nav {
background: #1c1c1c !important;
color: #ccc !important;
}
.toper {
padding: 100px;
background: #071931;
color: #fff;
}
.main {
background: #121212;
border-radius: 2px;
margin-top: -60px;
color: #fff;
padding: 15px 15px;
}
.container-first {
background: #2a2a2a;
margin: 0px 0px 15px 0px;
padding: 5px;
}
.breadcrumb {
margin: 0px;
background: #2a2a2a;
}
.social img
{
margin-right: 15px;
padding: 2px;
background: #ccc;
border-radius: 5px;
}
#media screen and (max-width: 992px) {
.social img {
margin-top: 10px;
}
}
.welcome {
background: #444;
border-radius: 3px;
padding: 0px !important;
margin-bottom: 15px;
}
.margin-bottom-small
{
margin-bottom: 10px;
}
.margin-bottom-small::before
{
content: '';
display: table;
}
.welcome-header
{
padding: 15px 20px 15px 20px;
background: #2d2d2d;
border-radius: 3px;
margin: 10px;
box-shadow: inset 0px 0px 15px 0px #000;
}
.welcome-text
{
padding: 10px;
margin: 10px;
color: #ccc;
}
.welcome-action {
padding: 15px 0px 15px 20px;
background: #4d4d4d;
color: #ccc;
letter-spacing: 5px;
border-radius: 3px;
}
.bluer {
padding: 15px;
background: #046092;
border-radius: 3px;
font-weight: 500;
}
.section-bluer
{
padding: 0px;
margin-top: 15px;
}
.section-container
{
padding: 0px;
}
.section-first
{
background: #1c1c1c;
padding: 10px;
margin: 0px;
}
.section-picture
{
padding: 5px;
text-align: center;
}
.section-picture > img
{
border: 1px solid #016d9b;
}
.section-this p
{
color: #ccc;
font-size: 12px;
}
.section-this h4 a
{
color: #87b8d7;
font-weight: 500;
}
.section-this hr
{
border: none;
border-top: 1px dotted #444;
}
.section-count {
font-size: 12px;
}
.small-text {
font-size: 10px;
}
.section-last-post
{
padding: 0px;
}
.zero-padding
{
padding: 0px;
}
#media (min-width: 992px)
{
.last-topic-img
{
padding: 0px;
}
.section-count
{
padding: 0px;
}
}
.last-topic p
{
margin-bottom: 2px;
}
.abox
{
background: #282828;
border-radius: 2px;
border: 1px solid #282828;
padding: 5px;
padding: 5px 0px 5px 10px;
margin-right: 0px;
margin-top: 15px;
}
.popular-autors p
{
margin: 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<main class="container main">
<div class="container-fluid container-first row">
<div class="col-lg-9 col-md-12">
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Library</a>
<a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Bootstrap</span>
</nav>
</div>
<div class="col-lg-3 col-md-12 my-auto">
<div class="float-lg-right text-center social">
<img src="fb.png" />
<img src="tw.png" />
<img src="g.png" />
</div>
</div>
</div>
<div class="container-fluid welcome">
<div class="margin-bottom-small"></div>
<header class="welcome-header">
Witaj eeeeeeeeeeeee | Kody, Porady | Gry online
</header>
<div class="welcome-text">
<small>Zarejestruj się, aby otrzymać dostęp do wszystkich funkcjonalności forum.</small>
</div>
<div class="welcome-action">
<button type="button" class="btn btn-secondary"><span class="glyphicon glyphicon-log-in"></span> Zaloguj się</button>
<button type="button" class="btn btn-secondary"><span class="glyphicon glyphicon-fire"></span> Zarejestruj się</button>
</div>
</div>
<div class="container-fluid bluer">
Najnowszy news: #98 Tygodnik yyyyyNews - O grach MMORPG słów kilka!
</div>
<div clas="container-fluid">
<div class="row">
<div class="col-lg-9 zero-padding">
<div class="container-fluid">
<!-- /////////////////////////////////////////////////////////////////////////////KONIEC 1 kategori -->
<div class="row section-bluer">
<div class="bluer">
Projektyyyyyyyyyy
</div>
<div class="container-fluid section-container">
<div class="row section-first">
<div class="col-lg-1 section-picture my-auto">
<img src="fb.png" />
</div>
<div class="col-lg-8 section-this my-auto">
<h4>League of Legends</h4>
<p>Ćwicz swój refleks, opanuj percepcję i zostań przywódcą grupy! Stań się prawdziwym bohaterem świata League of Legends i doskonal swoje umiejętności taktyczne.</p>
<hr>
Metin2 - Publikacje Serwerów, Metin2 - Publikacje Serwerów, Metin2 - Publikacje Serwerów,
</div>
<div class="col-lg-1 section-count text-center my-auto small-text">
<b>230683</b> tematy
<b>1246366</b> odpowiedzi
</div>
<div class="col-lg-2 section-last-post my-auto">
<div class="container">
<div class="row">
<div class="col-lg-4 my-auto last-topic-img text-center">
<img src="fb.png" />
</div>
<div class="col-lg-8 small-text last-topic my-auto text-center">
<p>Przerwa techniczna 09-05-2…</p>
<p>Przez Krystian</p>
<p>9 maj</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /////////////////////////////////////////////////////////////////////////////KONIEC 1 kategori -->
</div>
</div>
<div class="col-lg-3 zero-padding">
<div class="container-fluid">
<div class="row-fluid abox">
Reklama
</div>
</div>
<div class="container">
<div class="row abox">
Popularni Autorzy
</div>
</div>
<div class="container">
<!-- /////////////////////////////////////////////////////////////////////////////Początek autora popularnego -->
<div class="row text-center popular-autors" >
<div class="col-xl-1 my-auto">
<p>1</p>
</div>
<div class="col-xl-2 my-auto">
<img src="fb.png" />
</div>
<div class="col-xl-9 my-auto">
<p>Misiegg</p>
<p><span class="badge badge-pill badge-success"><i class="fa fa-plus-square" aria-hidden="true"></i> 54</span></p>
</div>
</div>
<!-- /////////////////////////////////////////////////////////////////////////////KONIEC autora popularnego -->
</div>
<div class="row abox">
Ostatnie Posty
</div>
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-10">
</div>
</div>
</div>
</div>
</main>
As you can see it's:
And it it looks good after I change <div class="row section-bluer"> to <div class="row-fluid section-bluer">
Why is there row-fluid needed?
And
Why there is free space from left side? I can't fix it no matter what I try to do.
And generally what is the difference between row and row-fluid?
I look for this in documentation https://v4-alpha.getbootstrap.com/layout/grid/, every page, and there is absolutely no information about this.
And everywhere in code in bootstrap 4 documentation is used row, never row-fluid Why?
Why in my example I need row-fluid? What is difference in general between these two?
There are too many nested container/container-fluid. You only need 1 outer container, and nested columns should always be placed directly in .row.
Pseudo code...
container
row
col-*
row
col-*
col-*
/row
/col
/row
/container