bootstrap 4 center items except first element [duplicate] - html

Question

This question already has answers here:
Flexbox horizontal menu centering while keeping last element to the right side [duplicate]
(1 answer)
How can I "pin" one node to left viewport edge, while keeping other node horizontally centered relative to viewport?
(3 answers)
Closed 5 years ago.
.c-footer {
background: #000;
padding: 20px 0;
color: #fff; }
.c-footer__logo {
display: inline; }
.c-footer__link {
color: inherit; }
.c-footer__link a {
color: inherit; }
.c-footer__link a:hover {
color: #fff; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="c-footer text-center">
<div class="c-footer__logo">
<img src="http://dynamicdog.se/wp-content/themes/dynamicdog/img/logo.png">
</div>
<span class="c-footer__link">
Malmö<span> - </span>
</span>
<span class="c-footer__link">
Stockholm<span> - </span>
</span>
<span class="c-footer__link">
Malmö<span> - </span>
</span>
<span class="c-footer__link">
Stockholm<span> - </span>
</span>
<span class="c-footer__link">
Malmö<span> - </span>
</span>
<span class="c-footer__link">
Stockholm
</span>
</div>
I want to accomplish the picture below:
Centering the text while having the image floated to the left. I tried with the bootstrap class center-text however it centers all elements...
Heres my markup:
<div class="c-footer">
<div class="c-footer__logo">
<img src="/static/media/q-logo.98ed5701.png">
</div>
<span class="c-footer__link">
Malmö<span> - </span>
</span>
<span class="c-footer__link">
Stockholm<span> - </span>
</span>
</div>
How would you accomplish this?

Answer 1

Using the flex properties, you can just have a div on each side. Since the logo is 100px in my example, I have it set as 100px. Remember to the have the img have a class of img-fluid.
I've also attached a codepen for you.
https://codepen.io/Gwapedwink/pen/yPmaVN?editors=1100#0
<footer>
<div class="container d-flex align-items-center">
<div class="footer-side">
<img src="http://placehold.it/400/fff/999&text=LOGO" class="img-fluid" />
</div>
<div class="mx-auto d-flex">
Link Label
Link Label
Link Label
Link Label
Link Label
</div>
<div class="footer-side">
<!-- nothing here, homie -->
</div>
</div>
</footer>
<style>
/* this is all that matters */
footer .footer-side {
width: 100px; /* whatever you want the logo width to be */
}
</style>

Answer 2

In my approach, I use text-align and float. text-align will align all inline items. this affects both the text and the image since both are inline. Since we want the image to stay on the left side, we can float the image.This should place the image along the left side of its container.
Those two combined makes the image stick to the left while rest of the content inside c-footer is aligned to the center regardless of device width! :)
.c-footer {
background-color: #000;
height: 80px;
text-align: center;
}
.c-footer__logo {
padding-left: 20px;
float: left;
}
.c-footer__logo img {
height: 80px; /* Just for the looks of the example */
}
.c-footer__link a{
line-height: 80px;
color: #fff;
}
.c-footer__link:after {
color: #fff;
content: '\00a0-\00a0'
}
.c-footer__link:last-child:after {
content: ''
}
<footer class="c-footer">
<div class="c-footer__logo">
<img src="https://i.gyazo.com/1e2e3e71c2e236cb827f8026d1aa813e.png">
</div>
<span class="c-footer__link">
Bergen
</span>
<span class="c-footer__link">
Oslo
</span>
<span class="c-footer__link">
Stavanger
</span>
<span class="c-footer__link">
Kristiansand
</span>
<span class="c-footer__link">
Trondheim
</span>
<span class="c-footer__link">
Drammen
</span>
</footer>