I've added a footer to a webprofile. On codepen everything worked, but when I put the same code on bluefish coder, the e-mail icon gets below the facebook and instagram icon.
I would like them to be aligned. One on the side of the other. The three of them. I have not put span or anything like that. I'm putting the specifications below.
p {
display: inline-block;
}
<!-- bootstrap version and the one I know how to work with -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- ======font awesome======= -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- The font awesome icons I put -->
<div class="navbar navbar-inverse navbar-static-bottom">
<div class="container">
<div class="navbar-text pull-left">
<p>© 2017 All Rights Reserved</p>
<p style="font-family: Dancing Script;font-size: 17px;"> Marina Sanchez </p>
</div>
<div class="navbar-text pull-right" style="display: inline-block;">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
<a href="https://www.instagram.com/marina_k25/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
<a href="mailto:foobar#gmail.com" class="btn btn-lg btn-block btn-social btn-email"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
I have finished everything and I'm stuck on this one could anyone help me please.
Also below goes my codepen which the footer is working, but not on my bluefish coder.
https://codepen.io/JT_Cerqueira/full/WZbEdq/
The reason your mail icon is sitting below the other icons is because you have a class on it and it's pulling in as display:block;. To fix this, simply remove this class class="btn btn-lg btn-block btn-social btn-email">. Also, get rid of the unnecessary carrot you have it's parsing it as text and is invalid HTML.
<!-- bootstrap version and the one I know how to work with -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
/*=============footer============*/
p {
display: inline-block;
}
</style>
<!-- ======font awesome======= -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- The font awesome icons I put -->
<div class="navbar navbar-inverse navbar-static-bottom">
<div class="container">
<div class="navbar-text pull-left">
<p>© 2017 All Rights Reserved</p>
<p style="font-family: Dancing Script;font-size: 17px;"> Marina Sanchez </p>
</div>
<div class="navbar-text pull-right" style="display: inline-block;">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
<a href="https://www.instagram.com/marina_k25/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
<a href="mailto:foobar#gmail.com"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<!-- bootstrap version and the one I know how to work with -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
/*=============footer============*/
p {
display: inline-block;
}
</style>
<!-- ======font awesome======= -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- The font awesome icons I put -->
<div class="navbar navbar-inverse navbar-static-bottom">
<div class="container">
<div class="navbar-text pull-left">
<p>© 2017 All Rights Reserved</p>
<p style="font-family: Dancing Script;font-size: 17px;"> Marina Sanchez </p>
</div>
<div class="navbar-text pull-right" style="display: inline-block;">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
<a href="https://www.instagram.com/marina_k25/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
<a href="mailto:foobar#gmail.com"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
Now you can run code sinppet correct result.
Related
I embedded cdn link on my html header and it's not showing any kind of icon, it's showing an empty box please check this code snippet and its result to know what i mean. any help would be appreciated. the link was given by font awesome via email upon registration
<script src="https://use.fontawesome.com/44c6a45abc.js"></script>
<i class="fa-solid fa-user"></i>
<!-- regular style -->
<i class="fa-regular fa-user"></i>
<!-- light style -->
<i class="fa-light fa-user"></i>
<!-- duotone style -->
<i class="fa-duotone fa-user"></i>
<!-- all new thin style -->
<i class="fa-thin fa-user"></i>
<!--brand icon-->
<i class="fa-brands fa-github-square"></i>
</body>
For me it works but not for the first to the fifth icon because they are pro icons that have to be used with the fontawesome pro account.
<head>
<script src="https://use.fontawesome.com/44c6a45abc.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<i class="fa-solid fa-user"></i>
<!-- regular style -->
<i class="fa-regular fa-user"></i>
<!-- light style -->
<i class="fa-light fa-user"></i>
<!-- duotone style -->
<i class="fa-duotone fa-user"></i>
<!-- all new thin style -->
<i class="fa-thin fa-user"></i>
<!--brand icon-->
<i class="fa-brands fa-github-square"></i>
</body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css">
<style>
i {
font-size : 20px;
padding:0 10px;
}
</style>
<body>
<!-- regular style -->
<i class="fa fa-google-plus"></i>
<!-- light style -->
<i class="fa fa-facebook"></i>
<!-- duotone style -->
<i class="fa fa-user"></i>
<!--brand icon-->
<i class="fa fa-github-square"></i>
</body>
I have a asp.net application, where I wanted to use a premade bootstrap template for my frontend. I found this one.
The original site from the template looks really nice with a background like this:
I copied all the css into my css folder, and also took the html and cut some parts of it out such that I could just render my own content in it.
My _layout.cshtml that should be a scaffolding for other html files looks now like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Header-->
<header class="masthead" style="background-image: url('../../wwwroot/assets/home-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<main role="main" class="pb-3">
#RenderBody()
</main>
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright © Your Website 2021</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
As far as I understand, the central line for displaying the background image is this one:
<header class="masthead" style="background-image: url('../../wwwroot/assets/home-bg.jpg')">
Where we set the image as our background.
The problem is though, that the site I get, looks like this:
Instead of having the nice image as a background, I just get grey. I would like for the image to be displayed.
How do I get the image shown in the background, just like in the source i have linked?
EDIT:
I now looked in the dev tool, where I found it:
But clicking the image gets me This localhost page can’t be found.
So it might look like the given path is bad. This is a little bit strange to me, since my IDE actually suggested the entire current path to me.
What should I do with my path such that the image can be found?
Is your mentioned path (../../wwwroot/assets/home-bg.jpg) correct? because image won't be rendered if path is incorrect, and the background color becomes grey because of the classname mentioned.
i after trying the path ../../wwwroot/assets/home-bg.jpg I then tried to assume that my application by default would be looking in the wwwroot directory. So I tried the path assets/home-bg.jpg.
My IDE (rider) shows red lines, and complains about it. But it works
I have a CSS issue hiding the text in my side menu and leave the font awesome icons on mobile view, and I can't think of any reasonable solution. I use bootstrap 4
Then code of my sidebar menu
<div class="sidebar">
<a class="active" href="#Link0"><i class="fas fa-walking"></i> Link0</a>
<i class="fas fa-users"></i> Link1
<i class="fas fa-cog"></i> Link2
<i class="fas fa-headset"></i> Link3
</div>
According to the bootstrap manual, I should be able to hide any element between any suitable tag with class="d-SM-none d-MD-block". My problem is that I want the icon on the left-hand side to stay visible for mobile view and hide the text but when I put the text between <div> tags text always appears one line down from the icon. I tried <i> <p> tags and still the same issue and btw the text doesn't hide anyways :D
Any help welcome!
What I tried and didn't work:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<div class="sidebar">
<a class="active" href="#Link0"><i class="fas fa-walking"></i> <div class="d-sm-none d-md-block">Link0</div></a><!--Text is one line down from icon-->
<i class="fas fa-users"></i><p class="d-sm-none d-md-block"> Link1</p><!--Text is one line down from icon-->
<i class="fas fa-cog"></i> Link2
<i class="fas fa-headset"></i> Link3
</div>
The hidding part works fine, the problem is that you try to add some elements that are default display with block (div, p) so replace that by span.
Then don't use class d-md-block as you are in a that has a default display: inline. So you should use class d-md-inline.
Result:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<div class="sidebar">
<a class="active" href="#Link0"><i class="fas fa-walking"></i> <span class="d-sm-none d-md-inline">Link0</span></a><!--Text is one line down from icon-->
<i class="fas fa-users"></i><span class="d-sm-none d-md-inline"> Link1</span><!--Text is one line down from icon-->
<i class="fas fa-cog"></i> Link2
<i class="fas fa-headset"></i> Link3
</div>
I have a li (list item) which contains four elements. 2 of the elements I would like to align to left and the other 2 to the right. The li is part of a page using the Bootstrap framework and FontAwesome project: http://pctechtips.org/apps/todo/
Here's the li
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-plus-square-o" aria-hidden="true"></i> Pay Car Insurance
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-trash-o" aria-hidden="true"></i>
</li>
The only thing you need to do in your case (to make it work with native Bootstrap 4 classes only and without any css hacking) is to add the ml-auto (margin-left:auto) class to the third element i.e. the pencil icon.
Then you just add a bit of padding to the plus and the pencil icon by adding the pr-3 (padding-right) class to both. That's it!
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="add-item text-center col-sm-12 col-md-10 col-lg-8 mb-4">
<h1 class="heading-4">Todo List Items</h1>
<ul id="list" class="list-group mt-4 pb-4">
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-plus-square-o pr-3" aria-hidden="true"></i>Pay Car Insurance
<i class="fa fa-pencil ml-auto pr-3" aria-hidden="true"></i>
<i class="fa fa-trash-o" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</div>
And if you want to turn those icons into links, you'll need to add the ml-auto class to the anchor like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="add-item text-center col-sm-12 col-md-10 col-lg-8 mb-4">
<h1 class="heading-4">Todo List Items</h1>
<ul id="list" class="list-group mt-4 pb-4">
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-plus-square-o pr-3" aria-hidden="true"></i>Pay Car Insurance
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-trash-o" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</div>
<li class="list-group-item justify-content-between align-items-center">
<i class="fa fa-plus-square-o left" aria-hidden="true"></i>
<span class="left marg_left">Pay Car Insurance </span>
<i class="fa fa-pencil right marg_left" aria-hidden="true"></i>
<i class="fa fa-trash-o right " aria-hidden="true"></i>
</li>
in css ::
.marg_left {
line-height: 16px;
margin-left: 12px;
}
.left {
float: left;
}
.right {
float: left;
}
.marg_right{
margin-right:12px;
}
you can try add class="pull-right" or class="pull-left"
I have a fixed banner at the top of my html page. When I scroll down the idea is to have the body go underneath the top navingation banner.
It works fine except for the icons i have inside the 'col-xs-4' class.
the icons (or what ever i put inside the col-xs-4 class) seem to go over the top banner.
How can I update this so the banner is always on top.
here is link to codepen
below is the html code :
<html>
<head>
<title>hello</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
position:fixed;
width:100%;
background-color:white;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
</head>
<body id="top">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header myNavbar">
<a class="navbar-brand" href="#top">HOME</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse myNavbar" id="mainNavBar">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT
</li>
<li>CONNECT
</li>
<li>PROJECTS
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid bg-1 text-center">
<h3>hello world</h3>
<h3 style="color:lightblue;">say something...</h3>
</div>
<div id="connect">
<div class="container-fluid bg-3 text-center">
<h3>Connect</h3>
<div class="row">
<div class="col-xs-4">
<p>
<i class="fa fa-linkedin fa-lg"></i>
</p>
</div>
<div class="col-xs-4">
<p>
<i class="fa fa-github fa-lg"></i>
</p>
</div>
<div class="col-xs-4">
<p>
<i class="fa fa-stack-overflow fa-lg"></i>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<p>
<i class="fa fa-instagram fa-lg"></i>
</p>
</div>
<div class="col-xs-4">
<p>
<i class="fa fa-medium fa-lg"></i>
</p>
</div>
<div class="col-xs-4">
<p>
<i class="fa fa-codepen fa-lg"></i>
</p>
</div>
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Just add this to your css:
.navbar-default {
z-index: 1;
}
Updated CodePen Demo
You need to set the z-index so your fixed navbar appears in front of the other elements.
Here are some helpful docs/articles on z-index:
MDN web docs
w3schools
css-tricks
What No One Told You About Z-Index