I am working on a personal project I am trying to achieve the same look like the attached image. I am using HTML and bootstrap to achieve the look but I am stuck. Can anyone please help me, I am learning how to make websites and I am not able to align the body properly and insert that vertical line at the left of the knowledge is power section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<title>Document</title>
</head>
<body style=" padding: 15px 10px 15px 10px; ">
<!-- main body section -->
<div style="border: 2.5px solid rgb(197, 195, 195);"">
<div class=" container-fluid">
<div class="d-flex justify-content-start" style="border-bottom: 2.5px solid rgb(197, 195, 195);">
<img style=" width: 8%; height: 25%; padding: 10px 5px 20px 20px;" src="download.jpg" alt="">
<h1 style="font-size: 1rem; text-align: center;"><strong
style="font-size: 3.8rem;">KATA</strong><br>material art club</h1>
<div class="d-flex justify-content-end" style="padding-left: 60rem;">
<span style="text-align: center; padding-top: 20px; ">
<i class="fas fa-user-circle"></i>
JoinClub! <br>login
</span>
</div>
</div>
<div class="d-flex justify-content-start" style="border-bottom: 2.5px solid rgb(197, 195, 195) ; ">
<ul style="text-align: left; padding-left: 0px!important; padding-top: 10px;">
Home|
Porfolio|
<a href="about.html" style="padding: 10px 30px 5px 30px;">About Us<a>|
Contact Us|
</ul>
</div>
<div class="d-flex justify-content-start" style="border-bottom: 2.5px solid rgb(197, 195, 195) ; ">
<h1 style="padding-left: 20px;">Portfolio</h1>
<form style=" float: right; padding-left: 850px ; padding-top: 15px;" id="tfnewsearch" method="get"
action="http://www.google.com">
<input style="border-radius: 25px;" placeholder=" Search" type="text" class="tftextinput" name="q"
size="21" maxlength="120">
</form>
</div>
</div>
<!-- main body -->
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 d-flex" style="padding-left: 80px; padding-top: 100px;">
<div style="border: 3px solid rgb(197, 195, 195); border-radius: 5px;">
<img style="border-radius: 5px; padding: 10px 10px 30px 10px ;" src="download.jpg" alt="">
</div>
<div style="border: 3px solid rgb(197, 195, 195); border-radius: 5px; margin-left: 20px; ">
<img style="border-radius: 5px; padding: 10px 10px 30px 10px ;" src="download.jpg" alt="">
</div>
</div>
<div class="col-xs-7 col-sm-6 col-md-6 d-flex justify-content-end ">
<div style="border-left: 2.5px solid rgb(197, 195, 195) ; ">
<br>
<a style=" padding-left: 10px; font-size: 1.2rem; " href="#">Knowledge is power!</a>
<br>
<br>
<ul>
Online Self-defence Lessons
<p style="font-size: 10px;">shor distribution of newest lessons</p>
Self-efence modern life hacks
<p style="font-size: 10px;">shor distribution of newest hacks</p>
Awesom places to visit
<p style="font-size: 10px;">shor distribution of newest places</p>
Self-defence celebrities
<p style="font-size: 10px;">shor distribution of the newest news about celebritie</p>
</ul>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 d-flex" style=" padding-left: 80px; padding-top: 100px; ">
<div style="border: 3px solid rgb(197, 195, 195); border-radius: 5px;">
<img style="border-radius: 5px; padding: 10px 10px 30px 10px ;" src="download.jpg" alt="">
</div>
<div style="border: 3px solid rgb(197, 195, 195); border-radius: 5px; margin-left: 20px;">
<img style="border-radius: 5px; padding: 10px 10px 30px 10px ;" src="download.jpg" alt="">
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<style>
.float-container {}
.float-child {
width: 50%;
float: left;
padding: 0px;
}
.container-fluid {
padding-left: 0px !important;
padding-right: 0px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
<style>
.float-container {}
.float-child {
width: 50%;
float: left;
padding: 0px;
}
.container-fluid{
padding-left: 0px!important;
padding-right: 0px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
here is my suggestion
try to move all your inline css to external css
use the grid system from bootstrap
here is the link https://getbootstrap.com/docs/4.5/layout/grid/
Related
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-W2TTYM16Z1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-W2TTYM16Z1');
</script>
<!-- Tags ads proppeller anuncio falta verificar-->
<meta name='propeller' content='8501c5d1862d685dc200c4af5e2450fc' />
<!-- Fim ads proppeller anuncio -->
<!-- Meta tags Obrigatórias -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="icon" href="tab.png">
<title>StopWatch</title>
<style type="text/css">
html,
body {
height: 100%;
font-family: Tahoma, sans-serif;
}
.container {
height: 100%;
font-size: 20px;
color: black;
background-repeat: no-repeat;
background-position: 50% 100px;
}
.btn {
margin: 0px 2%;
background-color: black;
}
#media only screen and (max-width: 800px) {
#butoes {
margin-top: 40%;
}
}
.ts {
border-radius: 25px;
padding: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
color: white;
background-color: black;
font-size: 15px;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: inherit;
text-decoration: none;
}
.gog {
position: absolute;
top: -50px;
right: -5000000px;
}
#logoBanner {
position: fixed;
height: 50px;
}
#logo {
margin-left: 20px;
width: 200px;
}
</style>
</head>
<body>
<div id="logoBanner" style="border:1px solid;">
<img id="logo" src="logo2.png">
</div>
<div class="">
<div class=" float-right float-md-none float-sm-none justify-content-center" style="border:solid 1px;width: 48%;margin-top: 15%;padding-left: 8%; text-align: center;">
<div style="font-size: 30px;background-color: black;border-radius: 10px;color: white;">StopWatch Premium</div>
<div style="font-size: 20px;" class="mt-3">No Ads</div>
<div style="font-size: 20px;" class="mt-3">Time Log</div>
<div style="font-size: 20px;" class="mt-3">Single Payment</div>
</div>
<div class="float-left" style="width: 20%; margin-top: 12%;font-size: 20px;border:1px solid;">
<form style="margin-left: 100px; " action="verifica_regist.php" method="POST">
<div class="mb-4">
Register:
</div>
<?php
echo "<script>console.log('Debug Objects:' );</script>";
if(isset($_SESSION['emailExistente'])):
?>
<div class="alert alert-danger" role="alert" style="width: 94%">
<p>ERRO: Email already registed.</p>
</div>
<?php
endif;
?>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input name="email" type="email" class="form-control" id="exampleInputEmail1" style="width: 90%;" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text" style="font-size: 15px;">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input name="password" type="password" class="form-control" style="width: 90%;" id="exampleInputPassword1">
</div>
<button style="margin: 0px;" type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<footer class="fixed-bottom clearfix">
<div class="clearfix">
<span class="ts float-left"><a href="ut.html" class="site" > Use Terms</a></span>
<span class="ts float-right"><a href="pp.html" class="site" > Privacy Policy</a></span>
</div>
</footer>
<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</script>
</body>
</html>
Hi i'm doing a site and i'm trying to do a register page.
However, the float property is not working.
I want the form register on the right and the information on the left.
The logo "stopwatch" is struggling i dont know why. Sometimes it appears on the top, where it is supposed to be.
here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-W2TTYM16Z1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-W2TTYM16Z1');
</script>
<!-- Tags ads proppeller anuncio falta verificar-->
<meta name='propeller' content='8501c5d1862d685dc200c4af5e2450fc' />
<!-- Fim ads proppeller anuncio -->
<!-- Meta tags Obrigatórias -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="icon" href="tab.png">
<title>StopWatch</title>
<style type="text/css">
html,body{
height: 100%;
font-family: Tahoma, sans-serif;
}
.container{
height: 100%;
font-size: 20px;
color: black;
background-repeat: no-repeat;
background-position: 50% 100px;
}
.btn{
margin: 0px 2%;
background-color: black;
}
.ts{
border-radius: 25px;
padding: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
color: white;
background-color: black;
font-size:15px;
}
a { color: inherit ;text-decoration: none; }
a:hover { color: inherit;text-decoration: none; }
.gog{
position: absolute;
top: -50px;
right: -5000000px;
}
#logoBanner{
z-index: 1;
position: fixed;
height: 50px;
}
#logo{
margin-left: 20px;
width: 200px;
}
</style>
</head>
<body >
<div id="logoBanner" style="border:1px solid;" >
<img id="logo" src="logo2.png">
</div>
<div class="clearfix" >
<div class=" float-right float-md-none float-sm-none justify-content-center" style="border:solid 1px;width: 48%;margin-top: 15%;padding-left: 8%; text-align: center;">
<div style="font-size: 30px;background-color: black;border-radius: 10px;color: white;" >StopWatch Premium</div>
<div style="font-size: 20px;"class="mt-3">No Ads</div>
<div style="font-size: 20px;"class="mt-3">Time Log</div>
<div style="font-size: 20px;"class="mt-3">Single Payment</div>
</div>
<div class="float-left" style="width: 20%; margin-top: 12%;font-size: 20px;border:1px solid;">
<form style="margin-left: 100px; " action="verifica_regist.php" method="POST">
<div class="mb-4">
Register:
</div>
<?php
echo "<script>console.log('Debug Objects:' );</script>";
if(isset($_SESSION['emailExistente'])):
?>
<div class="alert alert-danger" role="alert" style="width: 94%">
<p>ERRO: Email already registed.</p>
</div>
<?php
endif;
?>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input name="email" type="email" class="form-control" id="exampleInputEmail1" style="width: 90%;" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text" style="font-size: 15px;">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input name="password" type="password" class="form-control" style="width: 90%;" id="exampleInputPassword1">
</div>
<button style="margin: 0px;" type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<footer class="fixed-bottom clearfix">
<div class="clearfix" >
<span class="ts float-left"><a href="ut.html" class="site" > Use Terms</a></span>
<span class="ts float-right" ><a href="pp.html" class="site" > Privacy Policy</a></span>
</div>
</footer>
<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</script>
</body>
</html> ```
You had some weird float-sm-none and float-md-none properties which I removed and furthermore I added to both columns a float-left and a float-right respectively, the first would go the left and the right would come up to the right side.
html,body{
height: 100%;
font-family: Tahoma, sans-serif;
}
.container{
height: 100%;
font-size: 20px;
color: black;
background-repeat: no-repeat;
background-position: 50% 100px;
}
.btn{
margin: 0px 2%;
background-color: black;
}
.ts{
border-radius: 25px;
padding: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
color: white;
background-color: black;
font-size:15px;
}
a { color: inherit ;text-decoration: none; }
a:hover { color: inherit;text-decoration: none; }
.gog{
position: absolute;
top: -50px;
right: -5000000px;
}
#logoBanner{
z-index: 1;
position: fixed;
height: 50px;
}
#logo{
margin-left: 20px;
width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-W2TTYM16Z1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-W2TTYM16Z1');
</script>
<!-- Tags ads proppeller anuncio falta verificar-->
<meta name='propeller' content='8501c5d1862d685dc200c4af5e2450fc' />
<!-- Fim ads proppeller anuncio -->
<!-- Meta tags Obrigatórias -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="icon" href="tab.png">
<title>StopWatch</title>
<style type="text/css">
</style>
</head>
<body >
<div id="logoBanner" style="border:1px solid;" >
<img id="logo" src="logo2.png">
</div>
<div class="clearfix" >
<div class="float-left justify-content-center" style="border:solid 1px;width: 46%;margin-right: 3%;margin-top: 15%;padding-left: 8%; text-align: center;">
<div style="font-size: 30px;background-color: black;border-radius: 10px;color: white;" >StopWatch Premium</div>
<div style="font-size: 20px;"class="mt-3">No Ads</div>
<div style="font-size: 20px;"class="mt-3">Time Log</div>
<div style="font-size: 20px;"class="mt-3">Single Payment</div>
</div>
<div class="float-right" style="width: 45%; margin-top: 12%;font-size: 20px;border:1px solid;">
<form style="margin-left: 100px; " action="verifica_regist.php" method="POST">
<div class="mb-4">
Register:
</div>
<div class="alert alert-danger" role="alert" style="width: 94%">
<p>ERRO: Email already registed.</p>
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input name="email" type="email" class="form-control" id="exampleInputEmail1" style="width: 90%;" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text" style="font-size: 15px;">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input name="password" type="password" class="form-control" style="width: 90%;" id="exampleInputPassword1">
</div>
<button style="margin: 0px;" type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<footer class="fixed-bottom clearfix">
<div class="clearfix" >
<span class="ts float-left"><a href="ut.html" class="site" > Use Terms</a></span>
<span class="ts float-right" ><a href="pp.html" class="site" > Privacy Policy</a></span>
</div>
</footer>
<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</script>
</body>
</html>
I think that piece of code can give you a glimpse on how to tackle your problem. I would personally choose to do it with Bootstrap.
I have layout with feature list content box, in desktop version it looks pretty fine, but in smaller versions i have problems pad / mobile and that four words with icons just breaking. I think it was not the best solution for this content box layout, what is the best and cleanest way to do this?
I need same look for desktop and for mobile.
Expecting result:
.container {
padding: 0;
}
padding: 71px 0px 0px 0px;
img {
margin-bottom: 6px;
}
h2 {
font-size: 18px;
font-weight: bold;
color: #363636;
text-align: center;
margin-bottom: 7px;
}
p {
font-size: 16px;
line-height: normal;
color: #363636;
}
a {
font-size: 14px;
color: #333333;
border-bottom: 1px solid #ef5300;
text-decoration: none;
padding-bottom: 2px;
}
.col-lg-12 {
padding: 25px 20px 20px 20px;
border-radius: 4px;
border: solid 1px #e9e9e9;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<title>My title</title>
</head>
<body>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12 h-100">
<img src="icons/furniture.png" class="mx-auto d-block">
<h2>Nestandartinių baldų gamyba</h2>
<div class="row">
<div class="col-lg-7">
<span class="far fa-check-square"></span>Privačios paskirties
<span class="far fa-check-square"></span>Viešosios paskirties
</div>
<div class="col-lg-5">
<span class="far fa-check-square"></span>Korpusiniai
<span class="far fa-check-square"></span>Minkšti
</div>
</div>
<p class="text-center">Naudojamos medžiagos<span class="icon-rightcircle"></span></p>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 h-100">
Other content..
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 h-100">
Other content..
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
If you want the same "2 rows 2 columns" layout for those list feature box for all desktop and mobile, here's the simple css grid approach:
.list-feature {
display: grid;
grid-template-columns: repeat(2, auto);
grid-gap: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="list-feature">
<span class="far fa-check-square">Privačios paskirties</span>
<span class="far fa-check-square">Korpusiniai</span>
<span class="far fa-check-square">Viešosios paskirties</span>
<span class="far fa-check-square">Minkšti</span>
</div>
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>
How can I make sure that when using the mobile mode the icons do not appear vertically but remain horizontally as in the desktop version?
I tried to solve the problem by adding the display: inline property as the answer to this question was answered but did not produce any results
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"/>
<div class="col-lg-4 col-md-12 col-xs-12 text-center" style="margin-top: 15px;">
<div class="row" style="height: 70px; border: 1px solid #dfdfdf; border-radius: 8px; padding: 10px 0;">
<div class="col-md-4">
<i class="fas fa-cogs" style="display:inline; font-size: 24px; color: rgb(20, 20, 71);"></i>
<p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">0</p>
</div>
<div class="col-md-4">
<i class="fas fa-question" style="display:inline; font-size: 24px; color: rgb(233, 17, 17);"></i>
<p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">7</p>
</div>
<div class="col-md-4">
<i class="fas fa-check" style="display:inline; font-size: 24px; color: rgb(20, 175, 20);"></i>
<p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">3</p>
</div>
</div>
</div>
On each of the 3 div that wrap the icons, remove the class: .col-md-4 and give each of them a width of 30% or so.
On the .row add display:flex, justify-content:space-around, flex-flow:row nowrap.
On the most outer div add class="container"
Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>SO49836008</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<header></header>
<section class="container">
<div class="col-lg-4 col-md-12 col-xs-12 text-center" style="margin:15px;auto">
<div class="row" style="height: 70px; border: 1px solid #dfdfdf; border-radius: 8px; padding: 10px 0;display:flex;justify-content:space-around;flex-wrap:row nowrap;">
<div width='30%'>
<i class="fas fa-cogs" style="display:inline; font-size: 24px; color: rgb(20, 20, 71);"></i>
<p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">0</p>
</div>
<div width='30%'>
<i class="fas fa-question" style="display:inline; font-size: 24px; color: rgb(233, 17, 17);"></i>
<p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">7</p>
</div>
<div width='30%'>
<i class="fas fa-check" style="display:inline; font-size: 24px; color: rgb(20, 175, 20);"></i>
<p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">3</p>
</div>
</div>
</div>
</section>
<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.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
This is my entire HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>A</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
body { background: url(img/dark.png) !important; position:relative; z-index:-1; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
#logo { text-indent: 515px; z-index:9999; position:relative; color:#FFCC00;}
#links {padding-top: 0.6cm;}
#custom-search-input{
padding: 3px;
border: solid 1px #E4E4E4;
border-radius: 6px;
background-color: #fff;
}
#custom-search-input input{
border: 0;
box-shadow: none;
}
#custom-search-input button{
margin: 2px 0 0 0;
background: none;
box-shadow: none;
border: 0;
color: #666666;
padding: 0 8px 0 10px;
border-left: solid 1px #ccc;
}
#custom-search-input button:hover{
border: 0;
box-shadow: none;
border-left: solid 1px #ccc;
}
#custom-search-input .glyphicon-search{
font-size: 23px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8" id="logo">
<img src="img/iconf.png" class="img-responsive" style="max-width:180px">
</div>
<div class="col-md-4" align="right" id="links">
Read books
Play
Eat
Help
</div>
</div>
<div class="jumbotron" style="background: url('img/yellow.jpg')">
<h1 align="center">Read books</h1>
<h4 align="center">Enter a bookname:</h4>
<div class="row">
<div class="col-md-6">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" placeholder="Eg: 'Fifty Shades of Gray'" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I don't know how to align the search box to the center of the page. I have tried adding align="center" in the input tag but it doesn't work. I saw a few examples where float:center property was being used but I don't understand where I should use it in my code. Please help. Thanks you.
Replace these lines -
<div class="row">
<div class="col-md-6">
<div id="custom-search-input">
<div class="input-group col-md-12">
by these lines -
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="custom-search-input">
<div class="input-group col-md-12">
You'll have your search box centered.
To understand how this is working, visit here - http://getbootstrap.com/css/#grid-offsetting