bootstrap 4 center items except first element

Question

.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">
  <a href="#">Malmö</a><span> - </span>
 </span>
 <span class="c-footer__link">
  <a href="#">Stockholm</a><span> - </span>
 </span>
  <span class="c-footer__link">
  <a href="#">Malmö</a><span> - </span>
 </span>
 <span class="c-footer__link">
  <a href="#">Stockholm</a><span> - </span>
 </span>
  <span class="c-footer__link">
  <a href="#">Malmö</a><span> - </span>
 </span>
 <span class="c-footer__link">
  <a href="#">Stockholm</a>
 </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">
  <a href="#">Malmö</a><span> - </span>
 </span>
 <span class="c-footer__link">
  <a href="#">Stockholm</a><span> - </span>
 </span>
</div>

How would you accomplish this?

It should be in the question, not 3rd party link...which btw needs a login — Asons, Dec 08 '17 at 22:14

score 0 · Answer 1 · answered Dec 08 '17 at 22:44

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">
      <a href="#" class="d-inline-block p-3 mx-2">Link Label</a>
      <a href="#" class="d-inline-block p-3 mx-2">Link Label</a>
      <a href="#" class="d-inline-block p-3 mx-2">Link Label</a>
      <a href="#" class="d-inline-block p-3 mx-2">Link Label</a>
      <a href="#" class="d-inline-block p-3 mx-2">Link Label</a>
    </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>

score 0 · Answer 2 · answered Dec 08 '17 at 23:15

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">
      <a href="#">Bergen</a>
    </span>
    <span class="c-footer__link">
      <a href="#">Oslo</a>
    </span>
    <span class="c-footer__link">
      <a href="#">Stavanger</a>
    </span>
    <span class="c-footer__link">
      <a href="#">Kristiansand</a>
    </span>
    <span class="c-footer__link">
      <a href="#">Trondheim</a>
    </span>
    <span class="c-footer__link">
      <a href="#">Drammen</a>
    </span>
</footer>

bootstrap 4 center items except first element

2 Answers2