Centering items in Bootstrap 4, while excluding the first element

.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 have the aim of achieving the design shown in the image below: https://i.sstatic.net/rzsV3.png

My goal is to center the text while having the image floated to the left. I attempted using the bootstrap class center-text but it ended up centering all elements...

This is the current structure of 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 go about accomplishing this layout?

htmlcssflexboxtwitter-bootstrap-4

Answer №1

Utilizing the flex attributes, you can easily position a div on each side. In my illustration, I have specified the logo's size as 100px. Make sure to assign the img with a class of img-fluid.

Furthermore, I have included a link to a CodePen demo for your reference. 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; /* adjust based on desired logo width */
}
</style>

Answer №2

When it comes to my technique, I rely on the properties text-align and float. Using text-align will ensure that all inline elements are aligned accordingly. This is particularly useful for aligning both text and images, as they are typically inline elements. By floating the image to the left, we can ensure that it remains positioned on the left side within its container.

Combining these two techniques allows us to keep the image fixed to the left while centering the rest of the content inside the c-footer, regardless of the width of the device! :)

.c-footer {
  background-color: #000;
  height: 80px;
  text-align: center;
}

.c-footer__logo {
  padding-left: 20px;
  float: left;
}

.c-footer__logo img {
  height: 80px; /* Design purposes only */
}

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to utilize d3.domain for extracting both d3.min and d3.max values from various columns within a JSON dataset?

I have a JSON file that contains data from different years for "male," "female," and "both" categories. I want to set the minimum value in my domain to be the lowest value across all three columns and do the same for the maximum value. Is there a way for ...

htmljsond3.jsvisualization

Issues with Disabling the Browser's Back Button with jquery

I have been attempting to prevent the back button from functioning in a specific Browser, Microsoft Bing. Interestingly, my code works only if I click somewhere in the window first. If I don't click anywhere and try to go back directly, it still allow ...

javascripthtmljquery

Conceal the icon for the Dropdown Menu arrow

Is there a way to hide the old arrow icon in the Select (drop down) after changing it with a new one? HTML: <div class="row"> <div class="col-sm-12"> <select name="country" class="form-control SearchBar"> <option ...

jquerycsstwitter-bootstrap-3

The attempt to transfer the image to the newly established file was unsuccessful

Whenever I try to upload an image to a file named 'uploads' within the same directory as my PHP files, I keep encountering an error message indicating an 'Undefined index'. Can someone explain what this error means and provide a solutio ...

phphtml

The fixed position setting does not anchor the elements to the bottom of a container

When applying the following styles: #fullpage-menu > .gradient { position: fixed; bottom: 0; left: 0; width: 100%; height: 0.3rem; } To the element with ID #fullpage-menu, which is styled as follows: #fullpage-menu { height: 100 ...

javascripthtmlcss

Creating an XPath expression for selecting multiple siblings of a div tag

Currently, I am working on writing an XPath expression for a specific section of code: <div class="line info"> <div class="unit labelInfo TextMdB">First</div> <div class="unit lastUnit"> <div clas ...

htmlcssseleniumxpath

Interactive website that transitions to a fresh page as we scroll further

As a beginner in web design, I've noticed a trend of companies using websites that automatically transition to the next page when scrolling down. An example of this is . What is this type of template called and are there any open source designs availa ...

cssscroll

Turn off automatic compilation for LESS styling

In my Eclipse environment, I am looking to have LESS compile only when explicitly triggered by mvn package. Currently, any changes made in my less file immediately update the CSS. How can I prevent this automatic behavior? <plugin> <groupId> ...

csseclipsemavenless

Stop automatic page refresh after submitting a jQuery post request

I've tried various solutions, but unfortunately, neither e.preventDefault() nor return false seem to be working for me. When I use prevent default ajax doesn't make post request. Even using $.post doesn't work as expected. Furthermore, addin ...

javascriptjqueryhtmlajax

Decoding HTML with PHP

I'm facing an issue with creating a Web page Parser. The structure of the page is as follows: <TABLE WIDTH=80%> <tr><td colspan=7><BR><BR></td></tr> <TR> <Td colspan=7><FONT FACE="arial" align ...

phphtmlparsing

Scrollbars in Jquery are not visible anymore when adjusting the size of a div element, causing them to expand

I'm facing an issue with a layout containing a div that expands to the screen size upon clicking a button. Initially, the div has enough content to necessitate scrolling. However, after collapsing back to its original size, the scroll bar disappears a ...

jqueryhtmlcss

Experience the latest HTML5 features directly within a Java desktop GUI, with seamless communication through

This Java desktop GUI utilizes a Java-based web services communication layer along with an HTML library to provide powerful charting and interactivity. I am looking to integrate an HTML5 view within the Java GUI. Can someone assist me in managing JavaScri ...

javajavascripthtmlswinguser-interface

Attempting to utilize a custom element, the message "You attempted to use polymer without loading it first" confirms that it has indeed been imported

I've been experimenting with a custom element for a paper-dialog popup that I want to incorporate. Surprisingly, when I create a test page within the same file where the custom element is defined, using all the identical imports as my main index, it w ...

jqueryhtmlpolymer

An error occurred while using Phonegap's FileTransfer() method - it seems that the File

After exploring various resources and finding no solutions, I have turned to this platform for help. I am attempting to initiate a .pdf download upon clicking on the following link: <a onclick="BeginDownload()" class="link" href="#">My guides</a ...

htmlcordovaphonegap-pluginsphonegap-build

JavaScript source control tool

Is there a Java-based version of GitHub? I am interested in developing a dynamic application using HTML5 and Javascript, and had the thought of integrating Git to monitor data changes. Therefore, I am curious if there exists a JavaScript adaptation of a G ...

javascriptjquerygithtml

What is the process to transfer data from JavaScript to HTML within a Laravel environment?

I am attempting to transfer a value from JavaScript to HTML as a variable. In order to do this, I am retrieving the value from a Laravel PHP controller. JavaScript $("ul.nav-tabs > li > a").click(function() { var id = $(this).attr("href").repla ...

javascripthtmllaravel

Looking for a regular expression to require either a dollar sign ($) or a percentage symbol (%) but not

At the moment, I currently have this input field set up on an HTML page within my Angular 9 application: <input type="text" formControlName="amountToWithholdInput" onkeyup="this.value = this.value.replace(/[^0-9.%$]/, &ap ...

htmlregexangularcurrencypercentage

Can you show me a method to integrate this HTML and CSS code into a Teachable page successfully?

Hey there, I've been encountering some challenges while working with HTML and CSS on a platform known as Teachable. Essentially, I'm aiming to create a layout with 2 columns: - Column 1 - Image - Column 2 - Text Whenever I apply <div class=" ...

htmlcss

What is the best way to incorporate an input bar in a Bootstrap panel header?

When designing a search box in my panel header, I floated both elements to get them onto the same line. Although functional, the vertical alignment of the title is displeasing and I am seeking a way to improve this without drastically changing its size. I ...

htmlcsstwitter-bootstrap

Customize the appearance of each TreeItem in JavaFX using CSS to assign unique

I am looking for a way to color individual Tree Items in a treeView based on specific conditions. I found a promising answer, but unfortunately, I am struggling to implement it. You can check out the answer here. My main obstacle is understanding how to u ...

cssjavafxtreeview