It doesn't matter color and kind of icon. The main goal is big icon on the left and big text on the right side.
Please have a look
body{
margin-top:20px;
background:#FAFAFA;
}
.order-card {
color: #fff;
}
.bg-c-blue {
background: linear-gradient(45deg,#4099ff,#73b4ff);
}
.card {
border-radius: 5px;
-webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
border: none;
margin-bottom: 30px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.card .card-block {
padding: 25px;
}
.order-card i {
font-size: 26px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 col-xl-3">
<div class="card bg-c-blue order-card">
<div class="card-block">
<h2 class="text-right"><i class="fa fa-cart-plus float-left"></i><span>486</span></h2>
</div>
</div>
</div>
</div>
</div>
Fiddle
<div class="card w-50">
<div class="card-body d-flex justify-content-between">
<div class="display-3 d-flex">
<i class="fa fa-cart-plus"></i>
</div>
<div class="d-flex flex-column">
<div class="h2 mb-0">+562</div>
<div class="h4 font-weight-lighter mb-0">Total sells</div>
</div>
</div>
</div>
Have a look on it1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.cart-box{max-width:500px;padding:15px;background:#e9f0f9;}
.cart-holder{padding:10px;color:#fff;background:#009dc6;}
.cart-holder .icon-holder{font-size:50px;}
.cart-holder .text-holder span{display: block;}
.cart-holder .items-counter{font-size:28px;font-weight:bold;}
.cart-holder .items-text{font-size:20px;}
</style>
</head>
<body>
<div class="cart-box">
<div class="cart-holder">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-6">
<div class="icon-holder">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
<div class="col-sm-6 col-6">
<div class="text-holder text-right">
<span class="items-counter">+562</span>
<span class="items-text">Today Sells</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
Whats up friends, great friday for yous!
So I been rebuilding the website for the company I work to learn HTML+CSS.
Just doing a replica of the original website and its been going great.
So I am having some issues on the the footer right now, the items are mixing on smaller screens.
On the image below you can see (1) how it is and the desired result and (2) what is happening with me.
Here is my code:
.footer {
color: #fff;
height: 140px;
background: linear-gradient(180deg, #130936, #130936) no-repeat center;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 70%;
}
p, p a {
text-decoration:none;
color: hsla(0, 0%, 100%, 0.72);
letter-spacing: 0.3px;
font-size:14px;
}
.footer-brand {
width: 136px;
background: url(https://i.ibb.co/zbq2q4D/pngwing-com-1.png) left center no-repeat;
border: 0;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
i {
color: #fff;
font-size: 30px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
}
<!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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<footer class="footer">
<div class="container-md h-100">
<div class="row align-items-center h-100 row-cols-4">
<div class="col-3"><img class="footer-brand" src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png" alt=""></div>
<div class="col-3">
<p class="p1">+44 (0) 700 677 1336</p>
<p>info#companyIwork.com</p>
</div>
<div class="col-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-3">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
I do appreciate your help.
I think what you're missing is the use of the responsiveness prefixes for the col class, when you declare col or col-x as a class it means that the class would automatically be with a fixed size in relation to the other grids, to overcome content overlapping you'll need to the prefixed to determine the screen size from which the content is being displayed upon i.e col-sm-x, col-md-x etc
Read more about bootstrap grid from here https://getbootstrap.com/docs/5.3/layout/grid/
<!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>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css"
/>
</head>
<body>
<footer class="footer">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xs-12 col-md-3 text-center">
<img
class="footer-brand image-fluid"
src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png"
alt=""
style="width:80px"
/>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p class="p1">
+44 (0) 700 677 1336
</p>
<p>
info#companyIwork.com
</p>
</div>
<div class="col-xs-12 col-md-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>
NOTE: The snippet above does not consider your stylesheet, so be cautious your stylesheet might override some bootstrap styles
SUGGESTION: Also consider reading bootstrap colors from https://getbootstrap.com/docs/5.0/utilities/colors/
I created a basic website to improve my front-end skills. I used Bootstrap 5 to make it responsive but it does not look good on the phone. Can somebody tell me what I did wrong? On my mobile device, it looks like this :
enter image description here
When I decreased the size of the browser, it looked good, but when I put it online on github, it looks like the page has been cut.
Html :
<!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>Ping</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/brands/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/regular/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/solid/" rel="stylesheet">
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</head>
<body style="overflow-x: hidden;">
<div class="row">
<div class="col d-flex justify-content-center pt-2">
<img src="./images/logo.svg">
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center flex-row pt-4">
<h1 class="text-muted font-weight-normal">We are launching<span class="text-black"> soon!</span></h1>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<span class="text-black">Subscribe and get notified</span>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center pt-5">
<div>
<form class="d-flex flex-row">
 <input class="form-control" id="email" placeholder="Your email adress..."> 
<button type="button" id="submit">Submit</button>
</form>
<p class="container-fluid firstp"></p>
</div>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<img src="./images/illustration-dashboard.png" class="img.fluid imgdash">
</div>
</div>
<footer class="row">
<div class="col d-flex justify-content-center flex-row pt-5">
<i class="fab fa-facebook"></i>  
<i class="fab fa-twitter"></i>  
<i class="fab fa-instagram"></i>
</div>
<div class="container d-flex justify-content-center">
<p>© Copyright Ping. All rights reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</body>
</html>
css:
#email{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 330px;
height: 45px;
border-color: gainsboro;
}
#submit{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 150px;
height: 48px;
background-color: blue;
color: white;
border: none;
}
#submit:hover{
background-color: rgb(124, 111, 204);
}
.firstp{
padding-right: 55px;
}
.imgdash{
width: 100%;
max-width: 400px;
height: auto;
}
Add flex-wrap and justify-content-center class on form element, will resolve your issue. Also add mb-2 class on both input and button element.
Below code snippet also updated and i hope it'll resolve your issue. Thank You
#email {
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 330px;
height: 45px;
border-color: gainsboro;
}
#submit {
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 150px;
height: 48px;
background-color: blue;
color: white;
border: none;
}
#submit:hover {
background-color: rgb(124, 111, 204);
}
.firstp {
padding-right: 55px;
}
.imgdash {
width: 100%;
max-width: 400px;
height: auto;
}
<!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>Ping</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/brands/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/regular/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/solid/" rel="stylesheet">
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</head>
<body style="overflow-x: hidden;">
<div class="row">
<div class="col d-flex justify-content-center pt-2">
<img src="./images/logo.svg">
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center flex-row pt-4">
<h1 class="text-muted font-weight-normal">We are launching<span class="text-black"> soon!</span></h1>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<span class="text-black">Subscribe and get notified</span>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center pt-5">
<div>
<form class="d-flex flex-row flex-wrap justify-content-center">
 <input class="form-control mb-2" id="email" placeholder="Your email adress..."> 
<button class="mb-2" type="button" id="submit">Submit</button>
</form>
<p class="container-fluid firstp"></p>
</div>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<img src="./images/illustration-dashboard.png" class="img.fluid imgdash">
</div>
</div>
<footer class="row">
<div class="col d-flex justify-content-center flex-row pt-5">
<i class="fab fa-facebook"></i>  
<i class="fab fa-twitter"></i>  
<i class="fab fa-instagram"></i>
</div>
<div class="container d-flex justify-content-center">
<p>© Copyright Ping. All rights reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</body>
</html>
What I can see is you are using a lot of .col . You need to specify .col for small and large devices. Otherwise some of it's function will break. Take a look at this link:
https://getbootstrap.com/docs/5.0/layout/columns/#column-breaks
You see in this link that there are many sm modifier used. Use them and you can see some results.
I am quite new to this and I've already tried on containers and rows and have divided the columns accordingly as required. The current outline gets me a fine webpage on my pc but I am still not getting a responsive page. I know giving media tags could resolve the issue, but I am trying bootstrap v4.6.
<!DOCTYPE html>
<!--Building a github page-->
<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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<STYLE>
body{
background-color:#a9ba9d;
}
.box{
background-color: #36454f;
margin-bottom: 90px;
}
.fa{
color:white;
padding:15px;
}
.text-center{
padding-left:650px;
color:white;
}
.box2{
background-color:#343434;
margin-top:50px;
margin-left:200px;
padding: 100px 400px 10px 200px;
border-radius:25px;
height: 190px;
}
.boxpart{
background-color:#343434;
padding-bottom:500px;
border-radius:25px;
margin-right: 50px;
width:300px
}
.small-box{
background-color:#343434;
margin:20px;
margin-top: 80px;
padding:70px 0px 50px 0px;
border-radius:25px;
}
.small-box1{
background-color:#343434;
margin:20px;
margin-left:125px;
margin-top:80px;
padding:40px 0px 50px 0px;
border-radius:25px;
}
input{
background-color:#343434;
margin-left:250px;
padding: 2px 2px 2px 5px;
border-radius:10px;
width: 500px;
}
input::placeholder{
color:grey
}
.row{
width:900px;
}
</STYLE>
</head>
<body>
<div class="box">
<span class="fa fa-github fa-2x" ></span>
<span class="text-center">GITHUB</span>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="text-centre boxpart">
</div>
</div>
<div class="col-sm-9 col-md-9 col-lg-9">
<input type="text" placeholder="Search">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3 small-box1"></div>
<div class="col-sm-3 col-md-3 col-lg-3 small-box"></div>
<div class="col-sm-3 col-md-3 col-lg-3 small-box"></div>
<div class="col-sm-6 col-md-6 col-lg-6 box2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You have specified the width for several elements. When you set a fixed width on things, they can't be responsive. The .boxpart div will always be 500px wide, so it will overflow on devices smaller than 500px wide. You have also overridden the width of the .row class that comes from Bootstrap and set it at a fixed width. So that also cannot be responsive. It also looks to me like you have some extra s in the right section.
Bottom line here: don't fight the framework. Use what it gives you.
Here's a five-minute clean up of what you have. There's still work to do (like putting your header in a ), so take a look at the bootstrap docs and dig in.
<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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<STYLE>
body{
background-color:#a9ba9d;
}
.box{
background-color: #36454f;
}
.boxpart{
background-color:#343434;
border-radius:25px;
}
.small-box{
background-color:#343434;
border-radius:25px;
}
input{
background-color:#343434;
border-radius:10px;
}
input::placeholder{
color:grey
}
</STYLE>
</head>
<body>
<div class="box mb-5 text-white">
<i class="fa fa-github fa-2x p-2" ></i>
<span>GITHUB</span>
</div>
<div class="container">
<nav>
</nav>
<div class="row">
<div class="col-md-3">
<div class="text-center boxpart p-5 text-white">
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
</div>
</div>
<div class="col-md-9 mt-3 mt-md-0">
<div class="row ">
<div class="col-12">
<input type="text" class="p-1 w-100" placeholder="Search"/>
</div>
</div>
<div class="row mt-2 mx-0">
<div class="col small-box py-5 text-white text-center">test</div>
<div class="col small-box py-5 text-white text-center">test</div>
<div class="col small-box py-5 text-white text-center">test</div>
</div>
</div>
</div>
</div>
</body>
</html>
try not to use class named row when you also use the built in row in bootstrap to avoid problems, also the grid system in bootstrap works in 12 columns where for example if one div is col-lg-8 and you have 2 divs the other should be col-lg-4 so it can be 12 together.
I also recommend you reading this doc in there official website
https://getbootstrap.com/docs/4.1/layout/grid/
First of all you have some div tag in excess.
Then you have to study the bootstrap breakpoints here : [https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints][1]
If you want the content in columns for mobile you need to add 'col-12' in all your div.
Example:
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="text-centre boxpart"></div>
</div>
<div class="col-sm-9 col-md-9 col-lg-9">
<input type="text" placeholder="Search">
<div class="row">
<div class="col-12 col-sm-3 col-md-3 col-lg-3 small-box1"></div>
<div class="col-12 col-sm-3 col-md-3 col-lg-3 small-box"></div>
<div class="col-12 col-sm-3 col-md-3 col-lg-3 small-box"></div>
<div class="col-12 col-sm-6 col-md-6 col-lg-6 box2"></div>
</div>
</div>
</div>
I hope it was helpful
[Screenshot of white space under div]
[1]: https://i.stack.imgur.com/cO7TV.jpg
I can't work out why this white space is visible, I am a newbie to coding and would greatly appreciate any help possible. I have tried googling the answer but have had no luck!
body{ background: rgb(245,245,245); color: green; font-size: 25px; font-family: Helvetica; margin: 0; padding: 0; outline: none; border: 0; display: flex; } .card { font-weight: lighter; text-align: center; color: white; background: rgb(50, 50, 50); margin: 0; padding: 20px; }
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Luke's first project</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link href='https://fonts.googleapis.com/css?family=Bellota' rel='stylesheet'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container-fluid p-0">
<div class="row">
<div class="col">
<div id="banner">
<h1>Welcome to my first project</h1>
<p>This is where I will be learning new skills and putting them into practice!</p>
<p>
Start now
</p>
</div>
</div>
<div class="row no-gutters">
<div class="col">
<div class="card">
<h2>Awesome</h2>
<p>Thanks for visiting</p>
</div>
</div><div class="col">
<div class="card">
<h3>Brilliant</h3>
<p>Hope you're impressed</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="footer">
<p>Thank you for looking through my work and a special thanks to ©Le Wagon for teaching me!</p>
<ul class="list-inline">
<li class="list-inline-item"><i class="fab fa-youtube"></i></li>
<li class="list-inline-item"><i class="fab fa-facebook"></i></li>
<li class="list-inline-item"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item"><i class="fab fa-github"></i></li>
</ul>
</div>
</div>
</div>
</div></div>
</body>
</html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container-fluid bg-dark text-white">
<div class="row">
<div class="col-sm p-3 text-center">
<h3>Awesome</h3>
<p>Thanks for visiting</p>
</div>
<div class="col-sm p-3 text-center">
<h3>Brilliant</h3>
<p>Hope you're impressed</p>
</div>
</div>
</div>
You can use the piece of code above.
I hope my answer will help you.
I dont have all your code, but I think it is because you have an h2 tag in the first card-section and then a h3 in the next. Try and change to both h2 or h3 and see if the whitespace dissapears.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="row no-gutters">
<div class="col">
<div class="card">
<h3>Awesome</h3>
<p>Thanks for visiting</p>
</div>
</div>
<div class="col">
<div class="card">
<h3>Brilliant</h3>
<p>Hope you're impressed</p>
</div>
</div>
</div>
I am trying to use the grid structure by bootstrap to create a nice looking page. However, my div is moved and columns in rows are not aligned anymore:
The box with the three should be in line with the blue background. What am I doing wrong? What is the reason for this? I would like to understand. My code is:
EDIT1
I added no-margto the <h1>but now it looks like this: How can I get to fill out the full height?
.no-marg{
margin:0 !important;
padding:0 !important;
}
.sm-pad{
padding:5px;
background-clip:content-box;
}
.col-white{
color:white;
}
.dark-theme {
color: white;
background-color:#17191B;
height: 100%;
}
#step-no{
margin:20px;
}
.light-theme {
color: black;
background-color:#EFEFEF;
}
.cont-box {
margin:6px;
}
body {
background: black;
}
#media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
.red-square{
background-color: red;
border-radius: 0;
}
.btn:hover{
background-color: #78BE20;
}
.blue-rectangle{
background-color: #008ECF;
border-radius: 0;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>
<body>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10">
<h1 class="col-white">Step</h1>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10 blue-rectangle">
<div class="row equal">
<div class="col-sm-3">
<div class="dark-theme">
<h1 class="col-white">3</h1>
</div>
</div>
<div class="col-sm-9">
<span color<img alt="Warning Logo" src="./image/warning.svg">
</div>
</div>
<div class="row equal">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<script src="steps_v1.js"></script>
</body>
</html>
The box has a margin-top. Set it to 0
.no-marg{
margin:0 !important;
padding:0 !important;
}
.sm-pad{
padding:5px;
background-clip:content-box;
}
.col-white{
color:white;
}
.dark-theme {
color: white;
background-color:#17191B;
height: 100%;
}
#step-no{
margin:20px;
}
.light-theme {
color: black;
background-color:#EFEFEF;
}
.cont-box {
margin:6px;
}
body {
background: black;
}
#media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
.red-square{
background-color: red;
border-radius: 0;
}
.btn:hover{
background-color: #78BE20;
}
.blue-rectangle{
background-color: #008ECF;
border-radius: 0;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>
<body>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10">
<h1 class="col-white">Step</h1>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10 blue-rectangle">
<div class="row equal">
<div class="col-sm-3">
<div class="dark-theme">
<h1 class="col-white no-marg">3</h1>
</div>
</div>
<div class="col-sm-9">
<span color<img alt="Warning Logo" src="./image/warning.svg">
</div>
</div>
<div class="row equal">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<script src="steps_v1.js"></script>
</body>
</html>
Add display: -webkit-box; to .dark-theme
.no-marg{
margin:0 !important;
padding:0 !important;
}
.sm-pad{
padding:5px;
background-clip:content-box;
}
.col-white{
color:white;
}
.dark-theme {
color: white;
background-color:#17191B;
height: 100%;
display: -webkit-box;
}
#step-no{
margin:20px;
}
.light-theme {
color: black;
background-color:#EFEFEF;
}
.cont-box {
margin:6px;
}
body {
background: black;
}
#media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
.red-square{
background-color: red;
border-radius: 0;
}
.btn:hover{
background-color: #78BE20;
}
.blue-rectangle{
background-color: #008ECF;
border-radius: 0;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>
<body>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10">
<h1 class="col-white">Step</h1>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10 blue-rectangle">
<div class="row equal">
<div class="col-sm-3">
<div class="dark-theme">
<h1 class="col-white">3</h1>
</div>
</div>
<div class="col-sm-9">
<span color<img alt="Warning Logo" src="./image/warning.svg">
</div>
</div>
<div class="row equal">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<script src="steps_v1.js"></script>
</body>
</html>