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.
Related
I added share buttons from Sharethis.com. When I refresh the page button does not appear, but when I resize the wievport it appears.
`
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=63a323358fb8b6001abbbf6b&product=inline-share-buttons&source=platform" async="async"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Article preview component</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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=Kumbh+Sans:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7ab7d5ca64.js" crossorigin="anonymous"></script>
<style>
body {
font-family: 'Kumbh Sans', sans-serif;
background: hsl(240, 5%, 91%);
}
.arrow {
width: 70px;
}
.pop {
width: 15rem;
right: 16rem;
top: 14rem;
}
.arrow {
width: 5rem;
color: black;
}
#share {
color: white;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<div class="container mt-5">
<div class="card shadow-lg">
<div class="row">
<img src="./images/drawers.jpg" alt="drawer image" class="col-4">
<div class="col-6 p-4">
<h1>Shift the overall look and feel by adding these wonderful touches to furniture in your home</h1>
<p>Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.</p>
<div class="row">
<img src="./images/avatar-michelle.jpg" alt="michele image" class="col-2 rounded-circle">
<div class="col-6 mt-3">Michelle Apleton <br> 28 Jun 2020</div>
<div class="bg-light rounded-circle col-1 p-3 m-3 d-flex justify-content-center" id="button">
<img src="./images/icon-share.svg" alt="" class="">
</div>
<div class="pop position-absolute end-10 d-none" id="popup">
<div class="row bg-dark rounded text-white py-1 d-flex justify-content-center align-items-center">
<div class=" col-4 p-2">SHARE</div>
<div class="col-8 zet sharethis-inline-share-buttons"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let changeClass = document.getElementById("button").addEventListener('click', () => {
document.getElementById("popup").classList.remove("d-none")
document.getElementById("popup").classList.add("d-block")
})
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
`
I placed their head code into the head. I tried Z-index, but it does not appear until resizing the viewport, narrowing or expanding does not matter, in both cases it appears.
[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>
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>
I've got some weird spaces in the mobile version, here some images:
Here's how does it look on desktop:
Desktop #01
Desktop #02
And a mobile:
Mobile #01 - with spacing on the right
Mobile #02 - with a "h3 class="display-4" maybe calling that spacing?
HTML:
<!-- The beginning of html -->
<!DOCTYPE HTML>
<html lang="PL-pl">
<head>
<title>The page is being rebuilt...</title>
<meta charset="utf-8">
<!-- versioning can often help (href="css/style.css?ver=2.0") -->
<!-- BOOTSTRAP 4 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://reportsquestionsznaczki65.000webhostapp.com/css/restyled.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<main>
<div class="jumbotron jumbotron-fluid text-white text-center bg-info nomarginbottom">
<div class="container">
<h3 class="display-2">This site is being finally rebuilt!</h3>
<p class="lead">Hence it will have more features soon.</p>
</div>
</div>
<div class="container-fluid">
<div class="row mt-3 text-center">
<div class="col-12">
<h3 class="display-4">Sites done:</h3>
</div>
</div>
<div class="row justify-content-center mt-2 text-white text-center mb-4">
<div class="col-12 col-lg-4">
<a class="websitelink" href="https://reportsquestionsznaczki65.000webhostapp.com/wszyscy.html">
<div class="box lead p-4">Go to: "WSZYSCY"</div>
</a>
</div>
</div>
<div class="row text-center">
<div class="col-12 change"><h4 class="display-4">What will be changed?</h4></div>
</div>
<div class="text-center">
<div class="row change2">
<p class="col-sm-6 col-lg-3 feature lead">The structure of the page.</p> <!-- class feature not used -->
<p class="col-sm-6 col-lg-3 feature lead">The site will be now responsive.</p>
<p class="col-sm-6 col-lg-3 feature lead">Lessons will be adding automatically via JS.</p>
<p class="col-sm-6 col-lg-3 feature lead">More code, more readable..</p>
</div>
<div class="row change2">
<div class="col-sm-6 col-lg-3 feature lead"><p>Sleek look.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>Fast and comprehensive.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>Inspiring quotes.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>And much more...</p></div>
</div>
</div>
<div class="row change2">
<div class="col-12">
<h5 class="text-center border border-3 border-dashed border-info change3 nomarginbottom">
<q>You can do everything, unless your imagination has stopped you.</q>
</h5>
</div>
</div>
<div class="row change2">
<div class="col-12">
<h3 class="display-4 text-center nomarginbottom">Current status: Learning Bootstrap 4.2 (80%) + Added "wszyscy.html".</h3>
<p class="lead text-center nomarginbottom">Overall status: 5% done on the page.</p>
</div>
</div>
<div class="row mb-5">
<div class="col-12">
<h5 class="text-center border border-3 border-dashed border-info change3 nomarginbottom">
<q>Change is best, when it's changing with you, not without.</q>
</h5>
</div>
</div>
</div>
</main>
<noscript>
<meta http-equiv="refresh" content="0; URL=https://reportsquestionsznaczki65.000webhostapp.com/noscript.html"/>
</noscript>
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
CSS (restyled.css):
body {
background-color: #eee;
}
/* Rebuilding the page */
.change {
padding: 30px 10px;
background-color: #dedede;
}
.change2 {
padding: 15px 5px;
}
.change3 {
padding: 20px 5px;
}
.nomargin {
margin: 0;
}
.nomarginbottom {
margin-bottom: 0;
}
img[alt="www.000webhost.com"] {
display: none;
}
.border-3 {
border-width: 3px !important;
}
.border-dashed {
border-style: dashed !important;
}
.websitelink, .websitelink:hover {
text-decoration: none;
color: #FFF;
}
.box {
background-color: #343a40;
font-size: 170%;
}
.box:hover {
background-color: darkslategray;
cursor: pointer;
}
Here's the website :
https://reportsquestionsznaczki65.000webhostapp.com
Due to it's online you can use:
view-source:https://reportsquestionsznaczki65.000webhostapp.com/index.html
https://reportsquestionsznaczki65.000webhostapp.com/css/restyled.css
Thank you for any help.
The text "wszyscy.html" in the mobile version is bigger than the screen due to its font-size . Make that smaller and you will no longer see that space
This question already has answers here:
How can I center an image in Bootstrap?
(4 answers)
Closed 4 years ago.
I'm working on a random quote web app and I can't center the image horizontally. Usually, this is acquired using mx-auto. My image is inside a div with size col-12, and the div is inside a row. However, image still not centering. If anyone can point out what am I missing? thanks
link http://pctechtips.org/apps/quotes/
code
<html><head>
<meta charset="UTF-8">
<title>Random Quotes Generator</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>
<row>
<div class="col-12">
<img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid mx-auto image">
</div>
</row>
<div class="row">
<p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
</div>
<div class="col-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-8 mx-auto">
<div id="content" class="row col-12 text"></div>
<div id="author" class="row col-12 text"></div>
</div>
<!-- buttons -->
<div class="container">
<div class="row">
<div class="col-4 text-right">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="col-4 text-center">
<a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-4 text-left">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body></html>
css
body {
background-color: #354048;
}
/*.test {
border-style: solid;
}*/
.container {
padding-top: 50px;
}
.header_text {
/*font-family: 'Allura';*/
font-family: 'Cinzel', serif;
font-size: 60px;
font-weight: bold;
}
.text-primary {
color: #29c0ec!important;
}
.sub_text {
font-family: 'Cinzel', serif;
font-size: 25px;
font-weight: bold;
}
#getMessage {
font-size: 18px;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: #29c0ec;
border-width: 3px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 20px;
}
i {
color: white;
}
.btn {
font-size: 35px;
border-radius: 70px;
}
Add classes d-flex align-items-center to the col-12 div containing the image
Add d-block class to img that make your image center.
body {
background-color: #354048;
}
/*.test {
border-style: solid;
}*/
.container {
padding-top: 50px;
}
.header_text {
/*font-family: 'Allura';*/
font-family: 'Cinzel', serif;
font-size: 60px;
font-weight: bold;
}
.text-primary {
color: #29c0ec!important;
}
.sub_text {
font-family: 'Cinzel', serif;
font-size: 25px;
font-weight: bold;
}
#getMessage {
font-size: 18px;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: #29c0ec;
border-width: 3px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 20px;
}
i {
color: white;
}
.btn {
font-size: 35px;
border-radius: 70px;
}
<html><head>
<meta charset="UTF-8">
<title>Random Quotes Generator</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>
<row>
<div class="col-12">
<img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid mx-auto image d-block">
</div>
</row>
<div class="row">
<p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
</div>
<div class="col-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-8 mx-auto">
<div id="content" class="row col-12 text"></div>
<div id="author" class="row col-12 text"></div>
</div>
<!-- buttons -->
<div class="container">
<div class="row">
<div class="col-4 text-right">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="col-4 text-center">
<a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-4 text-left">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body></html>
or add text-center to it parent.
body {
background-color: #354048;
}
/*.test {
border-style: solid;
}*/
.container {
padding-top: 50px;
}
.header_text {
/*font-family: 'Allura';*/
font-family: 'Cinzel', serif;
font-size: 60px;
font-weight: bold;
}
.text-primary {
color: #29c0ec!important;
}
.sub_text {
font-family: 'Cinzel', serif;
font-size: 25px;
font-weight: bold;
}
#getMessage {
font-size: 18px;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: #29c0ec;
border-width: 3px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 20px;
}
i {
color: white;
}
.btn {
font-size: 35px;
border-radius: 70px;
}
<html><head>
<meta charset="UTF-8">
<title>Random Quotes Generator</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>
<row>
<div class="col-12 text-center">
<img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid image">
</div>
</row>
<div class="row">
<p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
</div>
<div class="col-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-8 mx-auto">
<div id="content" class="row col-12 text"></div>
<div id="author" class="row col-12 text"></div>
</div>
<!-- buttons -->
<div class="container">
<div class="row">
<div class="col-4 text-right">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="col-4 text-center">
<a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-4 text-left">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body></html>