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>
Related
I want the image in my site to completely change when the browser is resized.
I've been using media-queries, but I can't seem to get it right. Any thoughts/tips?
The thing is I have tried the display trick with media query but its not working
I did this, but it's not working even when I am lowering the viewport. The image in the laptop viewport remains the same in the phone viewport.
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display: block;
}
.blocks {
display: none;
}
}
<div class="col-lg-6 border:1px">
<img class="blocks" src="https://via.placeholder.com/200" alt="laptop-mockup">
<img class="mob" src="https://via.placeholder.com/200/ff0000" alt="android-mockup">
</div>
The whole html and css code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News homepage</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<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">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght#600;700;800&family=PT+Sans:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navigator">
<nav class="navbar navbar-expand-sm navbar-dark navbar-light">
<a class="navbar-brand" href=""> <img src="C:\Users\91826\Desktop\news-homepage-main\css\images\logo.svg" alt="My Happy SVG" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation navbar-light">
<span class="navbar-toggler-icon navi"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer">Home </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#pricing"> New </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#cta"> Popular </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link" href="#footer"> Trending </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer"> Categories </a>
</li>
</ul>
</div>
</nav>
</div>
<div class="row ">
<div class="col-lg-6 border:1px">
<img class="blocks" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-desktop.jpg" alt="laptop-mockup">
<img class="mob" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-mobile.jpg" alt="android-mockup">
</div>
<div class="tag">
<h1 class="tagline">The Bright<br />Future of<br />Web 3.0?</h1>
</div>
<div class="read">
<h1 class="readline">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people.
But is it really fulfilling its promise?</h1>
</div>
<button class="button-50 readmore" type="button" name="button">READ MORE</button>
<div class="col-lg-6 border:1px">
<div class="new">
<h1>New</h1>
<h2>Hydrogen VS Electric Cars</h2>
<h3>Will hydrogen-fueled cars ever catch up to EVs?</h3>
<hr>
<h2>The Downsides of AI Artistry</h2>
<h3>What are the possible adverse effects of on-demand AI image generation?</h3>
<hr>
<h2>Is VC Funding Drying Up?</h2>
<h3>Private funding by VC firms is down 50% YOY. We take a look at what that means.</h3>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-lg-4 box">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-retro-pcs.jpg" alt="" />
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1 "> 01</h1>
<h2 class="infohead2"> Reviving Retro PCs</h2>
<h3 class="infohead3"> What happens when old PCs<br>are given modern upgrades?</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-gaming-growth.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf1 inf">
<h1 class="infohead1"> 02</h1>
<h2 class="infohead2"> Top 10 laptops of 2022</h2>
<h3 class="infohead3">Our best picks for various <br> needs and budgets.</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-top-laptops.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1"> 03</h1>
<h2 class="infohead2"> The Growth of Gaming</h2>
<h3 class="infohead3">How the pandemic has sparked <br> fresh opportunities.</h3>
</div>
</div>
</div>
</div>
</div>
<hr class="hori">
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Saswat Seth.
</div>
</body>
</html>
CSS
.navigator {
margin-bottom: 2%;
}
body {
padding: 0% 10% 2% 10%;
}
.nav-link {
color: black;
}
:hover.nav-link {
color: #6B728E;
}
.navigator {
padding: 2% 5% 0% 0%;
}
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display:block;
}
.blocks {
display:none;
}
}
.new {
height: 85%;
width: 23%;
background: hsl(240, 100%, 5%);
position: absolute;
right: 140px;
padding: 2%;
}
.navelement {
padding-right: 6%;
font-size: 100%;
}
h1 {
color: hsl(35, 77%, 62%);
font-family: 'noto sans';
font-weight: 600;
}
h2 {
color: #fff;
font-size: 23px;
margin-top: 10%;
font-family: 'noto sans';
font-weight: 700;
}
h3 {
color: #6B728E;
font-size: 15px;
padding: 4% 0%;
line-height: 25px;
}
hr {
color: #fff;
border-top: solid white;
}
.tag {
position: absolute;
bottom: 20px;
}
.tagline {
font-family: 'noto sans';
color: #000;
font-weight: 800;
font-size: 60px;
}
.read {
padding: 2% 38%;
position: absolute;
bottom: 54px;
right: -15px;
}
.readline {
font-size: 110%;
color: #6B728E;
line-height: 27px;
}
.button-50 {
height: 49px;
width: 200px;
appearance: button;
background-color: hsl(5, 85%, 63%);
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #B73E3E 4px 4px 0 0, #000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Montserrat";
font-size: 18px;
font-weight: 400;
line-height: 20px;
margin: 20% 5% 10% 0%;
overflow: visible;
padding: 14px 30px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
position: absolute;
bottom: -45px;
right: 45%;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #C9BBCF 2px 2px 0 0, #1d1716 2px 2px 0 1px;
transform: translate(2px, 2px);
}
.readmore {
margin: 10% 3% 5% 0;
font-family: 'Poppins';
font-weight: 400;
}
.info {
margin-top: 5%;
margin-left: 10%;
position: absolute;
right: 10%;
}
.infoimg {
width: 315%;
padding: 20%;
}
.infohead1 {
color: #7D9D9C;
}
.infohead2 {
color: #000;
}
.inf {
padding: 30%;
margin-left: 68px;
white-space: nowrap;
}
.hori {
margin-top: 10%;
color: #000;
border-top: solid black;
}
#media (max-width:350px) {
img{
object-fit: cover;
height: 400px;
}
}
#media screen and (max-width:400px) {
.mob {
display: block;
}
}
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:
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>
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>
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