so i'm newbie in programing and i want to make a dark footer , dark navbar and a Carousel content , the problem is the social media icons , and the copyright symbol in my footer they are no showing well : the are half shown how can i fix this ? and here's my piece of code `
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"
integrity="sha256-aaODHAgvwQW1bFOGXMeX pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<style>
.carousel img {
max-height: 500px;
margin: 0 auto;
}
.footer {
margin-top: auto;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height:60px;
background-color: black;
color: white;
text-align: center;
}
.fa {
z-index: 999;
}
</style>
</head>
<body>
<header>
<nav >
<div >
<a href="#">Navbar</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarSupportedContent">
<ul >
<li >
<a aria-current="page" href="#">Home</a>
</li>
<li >
<a href="#">About Us</a>
</li>
<li >
<a href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul aria-labelledby="navbarDropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><hr ></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
<li >
<a href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form >
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Carousel -->
<div id="demo" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div >
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" ></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div >
<div >
<img src="C:\Users\X\Desktop\TayauClinic\TayauClinic\wwwroot\images\2.jpg" alt="Los Angeles" style="width:100%">
<div >
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div >
<img src="C:\Users\X\Desktop\TayauClinic\TayauClinic\wwwroot\images\94d5de53-9c68-44d9-b307-7403941f8bec_5cfb0b35-b3c8-404a-bbed-b310f3808001_david.png" alt="Chicago" style="width:100%">
<div >
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div >
<img src="C:\Users\X\Desktop\TayauClinic\TayauClinic\wwwroot\images\96de3852-3519-4761-b3ce-3d711d72366e_c1c3639f-0a8a-434c-8d74-c138b3ca6f06_freya.png" alt="New York" style="width:100%">
<div >
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls/icons -->
<button type="button" data-bs-target="#demo" data-bs-slide="prev">
<span ></span>
</button>
<button type="button" data-bs-target="#demo" data-bs-slide="next">
<span ></span>
</button>
</div>
<footer >
<div >
<div >
<div >
<h6>© 2022 - . All right reserved.</h6>
</div>
<div >
<a style="color: #3b5998 ;" href="#" target="_blank"><i ></i></a>
<a style="color: #55acee;" href="#"><i ></i></a>
<a style="color: #ac2bac;" href="#!"><i ></i></a>
<a style="color: #dd4b39;" href="#"><i ></i></a>
</div>
</div>
</div>
</footer>
</body>
</html>``
below is what i got when i run my code
CodePudding user response：
You have fixed height for the footer.
updated code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<style>
.carousel img {
max-height: 500px;
margin: 0 auto;
}
.footer {
margin-top: auto;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
/* height: 60px; */
background-color: black;
color: white;
text-align: center;
}
.fa {
z-index: 999;
}
</style>
</head>
<body>
<header>
<nav >
<div >
<a href="#">Navbar</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarSupportedContent">
<ul >
<li >
<a aria-current="page" href="#">Home</a>
</li>
<li >
<a href="#">About Us</a>
</li>
<li >
<a href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul aria-labelledby="navbarDropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li>
<hr >
</li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
<li >
<a href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form >
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Carousel -->
<div id="demo" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div >
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" ></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div >
<div >
<img src="C:\Users\X\Desktop\TayauClinic\TayauClinic\wwwroot\images\2.jpg" alt="Los Angeles" style="width:100%">
<div >
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div >
<img src="C:\Users\X\Desktop\TayauClinic\TayauClinic\wwwroot\images\94d5de53-9c68-44d9-b307-7403941f8bec_5cfb0b35-b3c8-404a-bbed-b310f3808001_david.png" alt="Chicago" style="width:100%">
<div >
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div >
<img src="C:\Users\X\Desktop\TayauClinic\TayauClinic\wwwroot\images\96de3852-3519-4761-b3ce-3d711d72366e_c1c3639f-0a8a-434c-8d74-c138b3ca6f06_freya.png" alt="New York" style="width:100%">
<div >
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls/icons -->
<button type="button" data-bs-target="#demo" data-bs-slide="prev">
<span ></span>
</button>
<button type="button" data-bs-target="#demo" data-bs-slide="next">
<span ></span>
</button>
</div>
<footer >
<div >
<div >
<div >
<h6>© 2022 - . All right reserved.</h6>
</div>
<div >
<a style="color: #3b5998 ;" href="#" target="_blank"><i ></i></a>
<a style="color: #55acee;" href="#"><i ></i></a>
<a style="color: #ac2bac;" href="#!"><i ></i></a>
<a style="color: #dd4b39;" href="#"><i ></i></a>
</div>
</div>
</div>
</footer>
</body>
</html>CodePudding user response：
I would recommend to use the svg bootstrap icons!
You click in the desired icon and look for the svg option.
The example for facebook
<svg style="color:white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg>
Be careful with the colors tho! You can modify them in the style tag. Happy coding!
CodePudding user response：
Try adding that to your css .footer class:
display: flex;
align-items: center;
and perhaps as well remove your py-5 if that doesn't work
CodePudding user response：
the problem with in this line
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css">
you have space in file name font- awsome.min.css
the correct line is :-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">