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>
Related
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>
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.
<div class="col-md-12">
<div style="margin-top: 5px">
<label>
<a href="#"><i class="fa fa-comments" aria-hidden="true"></i>
Chat with #Model.MemberFirstName</a>
</label>
<label>
<a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>
Send Friend Request</a>
</label>
</div>
</div>
Writing this code, I am using 2 font awesome icons. My first icon is showing on my output screen but 2nd one is not showing. I have written same code for 2nd. I also try removing the first one, The second still not show.
Here is the output atatched.
font-awesome v4.0.0 doesn't contain fa-user-plus class. Use font-awesome v4.7.0
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-md-12">
<div style="margin-top: 5px">
<label>
<a href="#"><i class="fa fa-comments" aria-hidden="true"></i>
Chat with #Model.MemberFirstName</a>
</label>
<label>
<a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>
Send Friend Request</a>
</label>
</div>
</div>
As per your question your are using fontawesome 4.0.0 version but fa-user-plus has come in fontawesome 4.3. Check updated snippet below with latest version
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="col-md-12">
<div style="margin-top: 5px">
<label>
<a href="#"><i class="fa fa-comments" aria-hidden="true"></i>
Chat with #Model.MemberFirstName</a>
</label>
<label>
<a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>
Send Friend Request</a>
</label>
</div>
</div>
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" />