This question already has answers here:
<p> not aligning itself in center of container
(6 answers)
Closed 1 year ago.
I am learning Bootstrap v5.0. I am trying to make a webpage for practicing Bootstrap. I am having an issue with it. Text is not aligning center horizontally. I have used align-items-center for centering but it is not working.
My Code:
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<title>FairBizz</title>
</head>
<body>
<!-- ============================== Header 01 ============================== -->
<div class="container-fluid" style="background: #f7f7fd;">
<div class="container">
<div class="row align-items-center">
<div class="col-md-8">
<p>More then 25 years of experience in business! Privacy & Security </p>
</div>
<div class="col-md-4 text-end">
<i class="fab fa-facebook-f mx-2"></i>
<i class="fab fa-twitter mx-2"></i>
<i class="fab fa-instagram mx-2"></i>
<i class="fab fa-google-plus-g mx-2"></i>
<i class="fab fa-behance mx-2"></i>
</div>
</div>
</div>
</div>
<!-- ============================== JavaScript ============================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
Here is a image:
Here the text is seems pretty top side not center.
How can I do that? Help me please.
Thank you.
It is because <p> tags have margin-bottom: 1rem; in bootstrap. Either remove the margin or remove the <p> tag. then add some padding to the row if you want some space.
<div class="row py-4 align-items-center">
<div class="col-md-8">
<p class="mb-0">
More then 25 years of experience in business!
<a href="#" style="color: #08237e; font-weight: 500"
>Privacy & Security</a
>
</p>
</div>
<div class="col-md-4 text-end">
<i class="fab fa-facebook-f mx-2"></i>
<i class="fab fa-twitter mx-2"></i>
<i class="fab fa-instagram mx-2"></i>
<i class="fab fa-google-plus-g mx-2"></i>
<i class="fab fa-behance mx-2"></i>
</div>
</div>
or
<div class="row py-4 align-items-center">
<div class="col-md-8">
More then 25 years of experience in business!
<a href="#" style="color: #08237e; font-weight: 500"
>Privacy & Security</a
>
</div>
<div class="col-md-4 text-end">
<i class="fab fa-facebook-f mx-2"></i>
<i class="fab fa-twitter mx-2"></i>
<i class="fab fa-instagram mx-2"></i>
<i class="fab fa-google-plus-g mx-2"></i>
<i class="fab fa-behance mx-2"></i>
</div>
</div>
Use the utility class called text-center:
<div class="col-md-8 text-center">
This will make the text centred within col-md-8
Their docs said use text-center.
Edit: I thought you wanted both to center. I changed it back to col-md-8 and col-md-4 for both the columns and moved text-center to the first column.
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<title>FairBizz</title>
</head>
<body>
<!-- ============================== Header 01 ============================== -->
<div class="container-fluid" style="background: #f7f7fd;">
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<p>More then 25 years of experience in business! Privacy & Security </p>
</div>
<div class="col-md-4 text-end">
<i class="fab fa-facebook-f mx-2"></i>
<i class="fab fa-twitter mx-2"></i>
<i class="fab fa-instagram mx-2"></i>
<i class="fab fa-google-plus-g mx-2"></i>
<i class="fab fa-behance mx-2"></i>
</div>
</div>
</div>
</div>
<!-- ============================== JavaScript ============================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
I made these changes in your code..
Added class d-flex, text-center. Added margin-bottom:0 !important; to the <p> Tag..
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<title>FairBizz</title>
</head>
<body>
<!-- ============================== Header 01 ============================== -->
<div class="container-fluid" style="background: #f7f7fd;">
<div class="container">
<div class="row d-flex align-items-center text-center">
<div class="col-md-8">
<p style="margin-bottom:0 !important;">More then 25 years of experience in business! Privacy & Security </p>
</div>
<div class="col-md-4 text-end">
<i class="fab fa-facebook-f mx-2"></i>
<i class="fab fa-twitter mx-2"></i>
<i class="fab fa-instagram mx-2"></i>
<i class="fab fa-google-plus-g mx-2"></i>
<i class="fab fa-behance mx-2"></i>
</div>
</div>
</div>
</div>
<!-- ============================== JavaScript ============================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
Related
i'm trying to add a background image in the bootstrap card so when I hover the background takes over the card body but still shows the texts above the image.
My css code
.card-img-top:hover {
transform: scale(1);
width: 222px;
height: 100%;
position: absolute;
}
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 mt-5">
<div class="card" style="width: 14rem;">
<img class="card-img-top" src="./images/dummy.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.</p>
<p><span style=" color: #ffac33;">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i>
</span> 4.6 <span class="rate">(19.730)</span></p>
<h6 class="lineThroughText">10.99$</h6>
<h5 class="price">10.99$</h5>
</div>
</div>
</div>
</div>
Have you tried using the css background rule? You could set it on either element with class card or card-body.
.card:hover { background: url("./images/dummy.jpg"); }
Maybe you are looking for something like this one. For this - take your image after the texts .card div. Make your image class position: absolute and display none. After hovering on .card div, display will be block. Finally, the z-index on texts will be greater than the image.
Code below-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
.card-img-top{
position:absolute;
top:0;
display:none;
}
.card:hover .card-img-top{
display: block;
opacity: 0.3;
}
.card-body{
z-index: 9999;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 mt-5">
<div class="card" style="width: 14rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.</p>
<p><span style=" color: #ffac33;">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i>
</span> 4.6 <span class="rate">(19.730)</span></p>
<h6 class="lineThroughText">10.99$</h6>
<h5 class="price">10.99$</h5>
</div>
<img class="card-img-top" src="https://media1.santabanta.com/full1/Animals/Tigers/tigers-138a.jpg" alt="Card image cap">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
Another way -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
.card:hover .card-img-overlay{
display: block;
opacity: 0.3;
}
.card-img-overlay{
height: 100%;
display: none;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 mt-5">
<div class="card" style="width: 14rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.</p>
<p><span style=" color: #ffac33;">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i>
</span> 4.6 <span class="rate">(19.730)</span></p>
<h6 class="lineThroughText">10.99$</h6>
<h5 class="price">10.99$</h5>
</div>
<img class="img-fluid card-img-overlay" src="https://media1.santabanta.com/full1/Animals/Tigers/tigers-138a.jpg" alt="Card image cap">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
How can I get the icons within the tabs section to appear on the live open server? I tried with the code below:
Loading the styles:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-o53vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK10YPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="netflix.css" type="text/css">
And here are the tabs:
<section class="tabs">
<div class="container">
<div id="tab-1" class="tab-item tab-border">
<i class="fas fa-door-open"></i>
<p class="hide-sm">Cancel at any time</p>
</div>
<div id="tab-2" class="tab-item">
<i class="fas fa-tablet-alt fa-3x"></i>
<p class="hide-sm">Watch anywhere</p>
</div>
<div id="tab-3" class="tab-item">
<i class="fas fa-tags fa-3x"></i>
<p class="hide-sm">Pick your price</p>
</div>
</div>
</section>
fontawesome now uses <script instead of link so the link I was using was outdated. This has now been fixed to the below.
output:Screen shot of browser
<!-- Add icon library -->
<html>
<body class="body">
<center>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
<img src="{{url_for('static', filename='file:/omkar.png')}}align="middle" />
<h1>Omkar More</h1>
<p class="title">Student DYPSOEA</p>
<p>PUNE UNIVERSITY</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
<
</div>
</center>
</body>
</html>
The code from above gives only symbol of image not shows it
try closing the img src attribute.
you are missing closing " and space before align="middle"
see below html
<img src="{{url_for('static', filename='file:/omkar.png')}}" align="middle" />
Check this out:
and you have incorrect syntax of img tag, here is the correct one.
<img src="{{url_for('static', filename='file:/omkar.png')}}" align="middle" />
<html>
<body class="body">
<center>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
<img src="http://placekitten.com/301/301" align="middle">
<h1>Omkar More</h1>
<p class="title">Student DYPSOEA</p>
<p>PUNE UNIVERSITY</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
</div>
</center>
</body>
</html>
I want to place some text in the middle of an icon and an image. Somehow it is not quite working out. I can't seem to get everything nice and lined out.
Here is my code:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-12">
<div class="col-md-10">
<div class="span6">
<img class="companyIcon" src="http://findicons.com/files/icons/766/base_software/128/circle_blue.png" />
</div>
<div class="companyTitle span3">
<p>Coinchase<i class="fa fa-edit" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
</p>
</div>
</div>
<div class="col-md-2">
<p>Back to results <i class=" fa fa-mail-reply " aria-hidden="true"></i>
</p>
</div>
</div>
</div>
Try this below
.col-md-10 {
float: left;
}
.col-md-10 .span6 {
display: inline-block;
}
.col-md-2 {
float: right;
}
.companyTitle.span3 {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-12">
<div class="col-md-10">
<div class="span6">
<img class="companyIcon" src="http://findicons.com/files/icons/766/base_software/128/circle_blue.png" />
</div>
<div class="companyTitle span3">
<p>Coinchase<i class="fa fa-edit" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
</p>
</div>
</div>
<div class="col-md-2">
<p>Back to results <i class=" fa fa-mail-reply " aria-hidden="true"></i>
</p>
</div>
</div>
</div>
I am having this following code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accueil</title>
<link rel="stylesheet" href="css/header-search.css" />
<link rel="stylesheet" href="css/header.css" />
</head>
<body>
<header class="header-two-bars">
<div class="header-first-bar">
<div class="header-limiter">
<h1>Jeannot<span>Boutique</span></h1>
<div class="member-area-buttons">
Sign Up
Log In
</div>
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
<div class="clear"></div>
</div>
<div class="header-second-bar">
<div class="header-limiter">
<nav>
<i class="fa fa-male"></i> Accueil
<i class="fa fa-female"></i> Chaussures
<i class="fa fa-folder-o"></i> Vêtements
<i class="fa fa-pencil"></i> Accessoires
<i class="fa fa-check"></i> Sur mesure
<i class="fa fa-pencil"></i> Blog
<i class="fa fa-check"></i> Promo
</nav>
<div class="nav-social-media">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-instagram"></i>
</div>
<div class="clear"></div>
</div>
</div>
</header>
</body>
Basically, I am have a folder where my css files are. When I load the file header.css from the css folder, it does not have any effect, but once is in the same location with the index.html, everything is perfect.
I have struggling to find the answer but no way.
My file system structure is the following:
Please kindly help me find out what is wrong with my code.
PS: I have used the W3 Validator and everything is ok.
https://stackoverflow.com/a/9480801
Add
type="text/css"
to your link tag
While this may no longer be necessary in modern browsers the HTML4
specification declared this a required attribute.
and you may try this:
specify href="./style.css" which the . specifies the
current directory
Use
<link rel="stylesheet" href="/css/header-search.css" />
<link rel="stylesheet" href="/css/header.css" />
instead of
<link rel="stylesheet" href="css/header-search.css" />
<link rel="stylesheet" href="css/header.css" />