Skip to content Skip to sidebar Skip to footer
Home / Bootstrap 4 / Css / Footer / Html / Inline

How To Align Footer Items In Line In Css/bootstrap 4?

Post a Comment
I am working on the footer section in which I have Social Media Icons and Contact Us section. Here is the fiddle for it. At this moment in the fiddle, Contact Us and Social Media

Solution 1:

Use bootstrap grid. See below example (please check it in full screen view)

/*---------- Footer -----------*//*
.footer
{
    background-color: #343a40;
    background:url("../images/footer_background_full.jpg");
    background-size: 100% auto;
    margin-top:30px;
}

.footer_overlay
{
    position: relative;
    background-color: #212529;
    height: 100%;
    width: 100%;
    opacity: 0.3;
}
*/.footer {
	color: white;
	padding-top: 44px;
	background-color: rgb(243, 243, 243);
}

.footera {
	color: rgb(138, 138, 138);
}

.footera:hover {
	color: #fb875c
}

.footer.menu-itemsa {
	padding-bottom: 15px;
}

.appstore_soon_image_wrapper {
	max-width: 140px;
	max-height: 50px;
}

.appstore_soon_image_wrapperimg {
	width: 100%;
	height: 50px;
	object-fit: contain;
}

.footer_img {
	width: 155px;
	height: 45px;
}

.back_to_topa {
	color: #ff8b5a;
}

.copyrights_wrapper {
	border-top: 1px solid #666;
}

.p_copyright {
	color: #C0C0C0;
}

ul.social-network {
	list-style: none;
	display: inline;
	padding-left: 0;
	padding-right: 0;
}

ul.social-networkli {
	display: inline;
	/* margin: 0 3px; */
}

.social-circlelia {
	display: inline-block;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	/*border: 1px solid #C0C0C0; */text-align: center;
	width: 30px;
	height: 30px;
	font-size: inherit;
	background-color: transparent;
}

.social-circlelii {
	margin: 0;
	/*line-height:30px;*/line-height: 25px;
	text-align: center;
	color: #C0C0C0;
}

/* color of social icons on hover */.social-networka.icoFacebook:hoveri,
.social-networka.icoTwitter:hoveri,
.social-networka.icoLinkedin:hoveri,
.social-networka.icoInstagram:hoveri {
	color: #ff8b5a;
}

.social-networka:hover {
	border-color: #ff8b5a;
}

@mediaonly screen and (min-width: 768px) {
	.appstore_1 {
		display: block;
	}
	.appstore_2 {
		display: none;
	}
}

@mediaonly screen and (max-width: 768px) {
	.appstore_1 {
		display: none;
	}
	.appstore_2 {
		display: block;
	}
}

/*
.footer_head
{
    color: white;
    font-size: 2rem;
    font-weight:400;
    margin-top: 25px;
}
*/.footer_fixed {
	background-color: #343a40;
	color: #C0C0C0;
}
<!doctype html><html><head><metacharset="utf-8"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"crossorigin="anonymous"><linkrel="stylesheet"href="css/footer.css"><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg"crossorigin="anonymous"></head><body><divclass="fixed-bottom footer_fixed"><divclass="row"><divclass="col-md-6"><iclass="fas fa-phone pr-1"></i><ahref="tel:+1234567890"class="pr-3">
					+1 234 456 7890
				</a><spanclass="static-email"><iclass="fas fa-envelope pl-3 pr-1"></i><ahref="mailto:letsRuckify@Ruckify.com">
						helloworld@world.com
					</a></span></div><divclass="col-md-6"><ulclass="social-network social-circle"><li><ahref="https://www.facebook.com/"target="_blank"class="icoFacebook"title="Facebook"><iclass="fab fa-facebook-f"></i></a></li><li><ahref="https://twitter.com/"target="_blank"class="icoTwitter"title="Twitter"><iclass="fab fa-twitter"></i></a></li><li><ahref="https://www.linkedin.com/company/"target="_blank"class="icoLinkedin"title="LinkedIn"><iclass="fab fa-linkedin-in"></i></a></li><li><ahref="https://www.instagram.com/"target="_blank"class="icoInstagram"title="Instagram"><iclass="fab fa-instagram"></i></a></li></ul></div></div></p></div></body></html>

To learn more about bootstrap grid : https://getbootstrap.com/docs/4.1/layout/grid/

Solution 2:

You could use display flex

.fixed-bottomp {
    display: flex;
    justify-content: space-between;
}

.fixed-bottom.social-network {
    display: flex;
}

Solution 3:

Please check this one. I think it solves your problem. JSfiddle

/*---------- Footer -----------*//*
.footer
{
    background-color: #343a40;
    background:url("../images/footer_background_full.jpg");
    background-size: 100% auto;
    margin-top:30px;
}

.footer_overlay
{
    position: relative;
    background-color: #212529;
    height: 100%;
    width: 100%;
    opacity: 0.3;
}
*/.footer {
  color: white;
  padding-top: 44px;
  background-color: rgb(243, 243, 243);
}

.footera {
  color: rgb(138, 138, 138);
}

.footera:hover {
  color: #fb875c
}

.footer.menu-itemsa {
  padding-bottom: 15px;
}

.appstore_soon_image_wrapper {
  max-width: 140px;
  max-height: 50px;
}

.appstore_soon_image_wrapperimg {
  width: 100%;
  height: 50px;
  object-fit: contain;
}

.footer_img {
  width: 155px;
  height: 45px;
}

.back_to_topa {
  color: #ff8b5a;
}

.copyrights_wrapper {
  border-top: 1px solid #666;
}

.p_copyright {
  color: #C0C0C0;
}

ul.social-network {
  list-style: none;
  display: inline;
  padding-left: 0;
  padding-right: 0;
}

ul.social-networkli {
  display: inline;
  /* margin: 0 3px; */
}

.social-circlelia {
  display: inline-block;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  /*border: 1px solid #C0C0C0; */text-align: center;
  width: 30px;
  height: 30px;
  font-size: inherit;
  background-color: transparent;
}

.social-circlelii {
  margin: 0;
  /*line-height:30px;*/line-height: 25px;
  text-align: center;
  color: #C0C0C0;
}


/* color of social icons on hover */.social-networka.icoFacebook:hoveri,
.social-networka.icoTwitter:hoveri,
.social-networka.icoLinkedin:hoveri,
.social-networka.icoInstagram:hoveri {
  color: #ff8b5a;
}

.social-networka:hover {
  border-color: #ff8b5a;
}

@mediaonly screen and (min-width: 768px) {
  .appstore_1 {
    display: block;
  }
  .appstore_2 {
    display: none;
  }
}

@mediaonly screen and (max-width: 768px) {
  .appstore_1 {
    display: none;
  }
  .appstore_2 {
    display: block;
  }
}


/*
.footer_head
{
    color: white;
    font-size: 2rem;
    font-weight:400;
    margin-top: 25px;
}
*/.footer_fixed {
  background-color: #343a40;
  color: #C0C0C0;
}
<!doctype html><html><head><metacharset="utf-8"><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"crossorigin="anonymous"><linkhref="css/footer.css"><linkhref="https://use.fontawesome.com/releases/v5.0.10/css/all.css"integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg"crossorigin="anonymous"></head><body><divclass="fixed-bottom footer_fixed d-flex justify-content-center pt-3 pb-3"><pclass="mx-0 m-0 text-center"><iclass="fas fa-phone pr-1"></i><ahref="tel:+1234567890"class="pr-3">
                +1 234 456 7890
            </a><spanclass="static-email"><iclass="fas fa-envelope pl-3 pr-1"></i><ahref="mailto:letsRuckify@Ruckify.com">
                    helloworld@world.com
                </a></span><ulclass="social-network social-circle m-0 ml-3"><li><ahref="https://www.facebook.com/"target="_blank"class="icoFacebook"title="Facebook"><iclass="fab fa-facebook-f"></i></a></li><li><ahref="https://twitter.com/"target="_blank"class="icoTwitter"title="Twitter"><iclass="fab fa-twitter"></i></a></li><li><ahref="https://www.linkedin.com/company/"target="_blank"class="icoLinkedin"title="LinkedIn"><iclass="fab fa-linkedin-in"></i></a></li><li><ahref="https://www.instagram.com/"target="_blank"class="icoInstagram"title="Instagram"><iclass="fab fa-instagram"></i></a></li></ul></p></div></body></html>

Post a Comment for "How To Align Footer Items In Line In Css/bootstrap 4?"