I've a footer that is divided in 2 columns, 1 to the left and 1 to the right.
But I'd like to set the margins so the content of the footer is align with the body (with the images you see there).
I've used Bootstrap4 tags (container) for the body but it is not working for the footer.
I'm expecting to replicate this:
Codepen
https://codepen.io/anon/pen/vwMowX
footer:
<!-- /* NEW FOOTER */ -->
{% load staticfiles %}
<style>
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
zoom:1;
*display:inline;
/* this fix is needed for IE7- */
}
</style>
<div class="container-fluid">
<div id="footer-navbar" class="row footer navbar-fixed-bottom padding-top2 padding-bottom2">
<div class="col-md-6">
<div class="">
<nav class="">
<div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
<ul class="">
<li class="">
<a class="" href="{% url 'shop:quienes_somos' %}">¿Quiénes somos?</a>
</li>
<li class="">
<a class="" href="{% url 'shop:como_comprar' %}">¿Cómo comprar?</a>
</li>
<li class="">
<a class="" href="{% url 'shop:contactanos' %}">Contáctanos</a>
</li>
</ul>
</div>
</nav>
<ul class="left footer-links footer-interact hidden-md-down">
<li><i class="fab fa-twitter"></i></i></li>
<li><i class="fab fa-instagram"></i></i></li>
<li><i class="fab fa-facebook-square"></i></i></li>
<li><i class="fab fa-youtube"></i></i></li>
</ul>
</div>
</div>
<div class="col-md-6 text-right">
<div class="">
<p><img src="{% static 'img/home/peru-flag.png' %}"
width="40px" height="40px">Perú</p>
</div>
<div class="right footer-legal">
<span>© 2019 StickersGallito</span>
Privacy & Terms
</div>
</div>
</div>
</div>
UPDATE 1
adding the container-fluid div and container div don't allow the background to go full width.
This works for me:
https://codepen.io/anon/pen/jooNYJ#anon-login
All changes I've done are in the first 2 divs
They should look like:
<div id="footer-navbar">
<div class="container row footer navbar-fixed-bottom padding-top2 my-0 mx-auto padding-bottom2">
***content***
</div>
</div>
The class container-fluid sets width to 100%, container doesn't. You need to have an inner wrapping div with the container class.
<div class="container-fluid">
<div class="container">
*** Put your footer in here ***
</div>
</div>
The inner div will be centered.
Related
I have developed a site on angular. All things are working fine. Now I want to adjust the footer.
Actual Footer
Expected Footer
Code
<footer>
<div class="row">
<div class="col-12">
<img src="../../assets/img/logo.svg" alt="" class="img-fluid" />
</div>
<div class="col-md-3 col-12">
<p>
<b>Manufactured by:</b>
</p>
</div>
<div class="col-md-2 col-6 mt-lg-0 mt-3">
<ul class="nav-menu">
<li>
<a [routerLink]="['/']">Home</a>
</li>
<li>
About us
</li>
<li>
Faqs
</li>
<li>
<a [routerLink]="['/latest-recipes']">recipes</a>
</li>
<li>
<a [routerLink]="['/stores']">Stores</a>
</li>
<!-- <li>
<a [routerLink]="['/where-to-buy']">where to buy</a>
</li> -->
</ul>
</div>
<div class="col-md-2 col-6 mt-lg-0 mt-3">
<ul class="px-0">
<li>Privacy & Policy</li>
<li>Terms & Condition</li>
</ul>
</div>
<div class="col-md-3 col-12">
<h1>Karachi Office</h1>
<p></p>
<h1>Lahore Office</h1>
<p></p>
<div class="social-icon d-flex align-items-center">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="col-md-2 col-12">
<img src="../../assets/img/ebs.png" class="img-fluif" />
</div>
</div>
</footer>
How can I align the footer? Any help would be highly appreciated.
You've made the image col-12 which will make the image spread across the full container. Remember that in bootstrap each container is split into 12, so saying that the image covers col-12 will cover all of them. From the looks of it you want to try around col-2.
Alternatively you could achieve the same without Bootstrap. Put the logo/manufactured by links in one div and float them left. Place the rest of the content in another div and float them right.
Add and Remover mt-3(margin-top) from the div.
This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
Closed 1 year ago.
I would like to know if there is a way I can add a black layer over my Background image but have it slightly transparent so you can still see the Background image.
I am using Bootstrap 4 & below is the code I am using including CSS :)
Any help will be much appreciated. Thanks for help
<nav class="navbar navbar-expand-lg navbar-light bg-light ">
<div id="container-fluid">
<!-- <input type="checkbox" id="check" /> -->
<div>
<div><label for="check" class="chechbtn"><i id="chechbtn" class="fas fa-bars p-2"></i></label></div>
<div><a class="navbar-1" href="{{url('/')}}"><img src="{{ asset('gelecek/img/logo.png') }}" alt="Logo" /></a></div>
</div>
<div>
<div >
<div class="collapse navbar-collapse " id="navbarText">
<ul class="navbar-nav mb-4 mb-lg-0">
<li class="nav-item">
<div class="dropdown">
<button class="dropbtn"><span>FAALİYETLERİMİZ</span></button>
<div class="dropdown-content">
<ul>
<li><span>Gelecek Yürüyüşü</span></li>
<li><span>5 Dakika Sohbetleri</span></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="https://geleceginbilimi.com/blog/">BLOG</a></li>
<li class="nav-item"><a class="nav-link" href="#">gelecek-uyeligi</a></li>
<li class="nav-item">
<div class="dropdown">
<button class="dropbtn"><span>HAKKIMIZDA</span></button>
<div class="dropdown-content">
<ul>
<li><span>Gelecek Vizyonu</span></li>
<li><span>Gelecek Meclisi</span></li>
<li>
<div class="dropdowndown">
<button class="dropbtn"><span>Gelecek Şurası</span></button>
<div class="dropdown-content">
<ul>
<li><span>Gelecek Daveti</span></li>
<li><span>Gelecek Akademisi</span></li>
<li><span>Gelecek medya</span></li>
<li><span>Geleceğin ajansi</span></li>
<li><span>Gelecek toplumu</span></li>
<li><span>Gelecek isleri</span></li>
<li><span> Gelecek tasavvuru</span></li>
</ul>
</div>
</div>
</li>
<li><span>Gelecek tasarimcilari</span></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div>
#auth
<div class="mr-2"><a type="button" href="{{ route('dashboard') }}" class="btn btn-outline">User Profile <i class="fas fa-sign-in-alt ml-2"></i></a></div>
#else
<div class="mr-2"><a type="button" href="{{ route('login') }}" class="btn btn-outline">login <i class="fas fa-sign-in-alt ml-2"></i></a></div>
#endauth
<div>Global <i class="fas fa-globe-africa ml-2"></i></div>
</div>
</div>
</div>
</nav>
<!-- Nav Bar End -->
<!-- Page Header Start -->
<div class="page-header mb-0" >
<div class="container ">
<div class="row">
<div class="col-12" style="padding: 36px;">
<h2>Gelecek Üyeliği</h2>
</div>
</div>
</div>
</div>
CSS background image
<style>
.page-header{
background-image: url(./gelecek/img/header_img.png);
}
</style>
You can use pseudo element ::after on your .page-header element. Make the .page-header position: relative so that the pseudo elements position properties will be relative to its position, then make your ::after position absolute and define the top and left properties to 0 so they line up with the page-header elements border box. The ::after pseudo element will have a height and width of 100% along with your black opaque layer using RGBA rgba(0, 0, 0, 0.5) -> black with a 0.5 opacity
.page-header {
background-image: url(https://allhdwallpapers.com/wp-content/uploads/2015/07/Sky-4.jpg);
position: relative;
}
.page-header::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
}
.page-header h2 {
color: white;
}
<div class="page-header mb-0">
<div class="container ">
<div class="row">
<div class="col-12" style="padding: 36px;">
<h2>Gelecek Üyeliği</h2>
</div>
</div>
</div>
</div>
You can simply use background color along with the image like this;
.page-header {
background-image: url(https://allhdwallpapers.com/wp-content/uploads/2015/07/Sky-4.jpg) rgb(163 204 170 / 50%);
}
I am using rgb(163 204 170 / 50%); with opacity, you can use color of your choice. Hope this will solve your problem.
You can learn about colors with opacity from w3Schools.
I'm trying to spread the elements across to the corner of the screen. I did try making use of the following code, but it isn't working.
<!-- Page Footer -->
<footer>
<div class="navbar mt-3 py-3 bg-dark">
<div class="container">
<small class="text-white">
<div class="d-flex justify-content-between">
<span class="text-white">Copyright © my website 2020</span>
<a class="text-white" href="{% url 'privacy-policy' %}">Privacy Policy</a>
</div>
</small>
</div>
</div>
</footer>
This is how it is apprearing:
I would like to have the Copyright text and Privacy Policy spread across the edges of the screen
<small> is an inline element so it doesn't span the 100% width... try using a block level element like <div> instead. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
You should also make sure width is set to 100% on this element.
<!-- Page Footer -->
<footer>
<div class="navbar mt-3 py-3 bg-dark">
<div class="container">
<div style="width:100%;" class="text-white">
<div class="d-flex justify-content-between">
<span class="text-white">Copyright © my website 2020</span>
<a class="text-white" href="{% url 'privacy-policy' %}">Privacy Policy</a>
</div>
</div>
</div>
</div>
</footer>
I'm creating an account page (header) for the first time, and I notice that some of the icons will not align perfectly with the text. I know how simple and easy this is for advanced developers, but I'm just starting off and really need some advice.
I have tried using padding and margin as a style element but didn't work.
<header>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-8">
<div class="row">
<div class="col-sm-3">
<img src="paylocity_logo.png" alt="logo" style="width:100%"S/></a>
</div>
<div class="col-sm-9 hidden-sm hidden-xs" id="project-details">
<a class="home-link" href="" title="Edit"> <i class="material-icons"> home </i> </a>
<div class="project">
User Profile
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 text-right" id="account">
<i class="material-icons">account_circle</i> <span>Tom Markart </span>
<div id="account-options">
<ul>
<li>
<span> <i class="material-icons">account_circle</i></span>View Profile
</li>
<li>
<span class="fa fa-cog"></span>Settings
</li>
<li>
<span class="fa fa-bug"></span>Report a Bug
</li>
<li>
<span class="fa fa-power-off"></span>Log Out
</li>
</ul>
</div>
</div>
</div>
</header>
I want to make them straight.
In your case, you can add the following rule:
.material-icons {
vertical-align: middle;
}
https://codepen.io/anon/pen/EBBbpd
Using flex:
Wrap text in <span> and a wrapper class to <a>.
...
<li>
<a class='wrapper' href="javascript:void(0);">
<span class="fa fa-cog"></span>
<span>Settings</span>
</a>
</li>
...
.wrapper {
display: flex;
align-items: center
}
I've a set of links of my footer. I want to put some extra spacing between each other, but now last item goes to the next line.
I think is important to note that I'm using Bootstrap 4, and that the Left Col is set to col-md-8 so there is enough space for the links.
Codepen
https://codepen.io/anon/pen/GaaJRm
Demo
ul>li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
zoom: 1;
*display: inline;
/* this fix is needed for IE7- */
}
.footer_text {
font-size: 12px;
font-weight: bold;
letter-spacing: .2em;
padding: 0px;
margin: 0px;
}
.footer_nav_links {
margin-right: 2%;
}
.footer_icons {
font-size: 18px;
color: grey;
}
<div id="footer-navbar" class="container-fluid footer_text">
<div id="footer-navbar" class="container row footer navbar-fixed-bottom padding-top2 my-0 mx-auto padding-bottom2 ">
<div class="col-md-8">
<div class="">
<nav class="">
<div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
<ul class="">
<li class="footer_nav_links">
<a class="" href="{% url 'shop:quienes_somos' %}">¿Quiénes somos?</a>
</li>
<li class="footer_nav_links">
<a class="" href="{% url 'shop:como_comprar' %}">¿Cómo comprar?</a>
</li>
<li class="footer_nav_links">
<a class="" href="{% url 'shop:contactanos' %}">Contáctanos</a>
</li>
</ul>
</div>
</nav>
<ul class="left footer-links footer-interact hidden-md-down">
<li><i class="fab fa-twitter footer_icons"></i></i></li>
<li><i class="fab fa-instagram footer_icons"></i></i></li>
<li><i class="fab fa-facebook-square footer_icons"></i></i></li>
<li><i class="fab fa-youtube footer_icons"></i></i></li>
</ul>
</div>
</div>
<div class="col-md-4 text-right">
<div class="">
<p><img src="{% static 'img/home/peru-flag.png' %}" width="40px" height="40px">Perú</p>
</div>
<div class="right footer-legal">
<span>© 2019 StickersGallito</span>
Privacy & Terms
</div>
</div>
</div>
</div>
</div>
</div>
Yes. The Left Col is set to col-md-8 and there is enough space. But the ul tag, which is the parent of all the footer_nav_links has a smaller width. You can add width: 100% for the ul tag to make its width equal to that of its parent which will open up space for the footer tags.
Modified Codepen
https://codepen.io/anon/pen/BeeNzY