Arrange five columns in a bootstrap layout with the first column aligned to the left, the last column aligned to the right, and the remaining columns spaced

I am looking to update my template that was originally created using bootstrap 3.3. There is a div with the following classes:

col-md-offset-2 col-md-8

Within this div, there are two rows. The second row will have five social media icons, but I am struggling to align the icons in a specific way. I want the first icon to be aligned with the left of the row above, the last icon to be aligned with the right, and the remaining icons to be evenly spaced out with equal distances between each.

Although I have managed to achieve equal spacing between the icons, they do not match the width of the row above.

I have created a fiddle to demonstrate the issue and showcase my current code. To view it properly, you will need a viewport of 992px and above. https://jsfiddle.net/ehgp0yw5/

What is the correct approach to solving this type of problem?

csstwitter-bootstrap

Answer №1

Here is the suggested code snippet:

.social-media {
  display:flex;
  justify-content:center;
}

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

Tips on adjusting the SVG view box for optimal visibility in a web browser

Recently, I've encountered an issue with the following code snippet: d3.xml("https://crossorigin.me/https://svgshare.com/i/5w9.svg").mimeType("image/svg+xml").get(function(error, xml) { if (error) throw error; document.body.appendChild(xml.docume ...

csssvg

The color of the text changes from its default color when not in use

Hey there, let me break this down for you... I'm currently in the process of styling a contact form. I've managed to change the text color of my input focus to white. However, when I click away from the form, the inputted text color reverts ba ...

htmlcsscontact-form

What is the best way to align an element on the right side of the screen?

I am having some trouble positioning a CSS element to the right side of the header. I attempted using the following code: position: Absolute; top: 20px; right 0px; This method works, however, when adjusting the browser window, the text also moves. I ha ...

htmlcss

Gleaming Dashboard tabBox with tabPanel Styles

Is there a way to customize the background color and other CSS settings when using tabBox and tabPanel in a Shiny dashboard? I've attempted to use .tab-pane, but it ends up changing the background color of the entire dashboard instead of just the pane ...

htmlcssrshinyshinydashboard

Center-align text so it is perfectly centered over an image

Looking for help with aligning text in social media images? Currently, the text is positioned at the bottom of each image. Check out this example: http://jsfiddle.net/uT4Ey/ CSS: .img { background-color: red; height: 3em; width: 3em; display: inl ...

htmlcss

Unexpectedly, CSS is failing to override React-Bootstrap and Bootstrap as intended

Currently, I am tackling a project that involves utilizing react-bootstrap along with my own custom CSS for styling. Both are imported in my index.js file as shown below: import React from 'react'; import ReactDOM from 'react-dom'; impo ...

cssreactjsreact-bootstrap

Can a website be designed to render consistently across all browsers without relying on a CSS reset?

Is it possible to create a website that renders well across all browsers without using CSS reset? Should CSS reset be used for websites of all sizes - small, one-page, large? Is it better to write all the CSS without a reset and only address necessary rend ...

htmlcss

Activate an event on a separate webpage using jQuery or JavaScript

Currently, I am in the process of working on a project with 2 distinct pages: Index Settings On the Settings page, I have implemented a button to close an element and hide it. However, I am encountering an issue where I want the elements on the Index pa ...

javascriptjquerycsseventsevent-handling

Is it possible to deactivate an anchor tag based on the result of a conditional statement that returns a string?

I've created an anchor tag (not a button) with text that redirects me to another page <StyledTableCell align="center"> <Link href={`/races/results/${race.id}`}>{race.race_name}</Link> </StyledTableCell> There is a ...

javascriptcssreactjs

Showing validation in a Bootstrap modal after it has been closed

I have implemented a form view in AngularJS with a modal from Angular-ui to showcase my form. I am happy with how everything functions, but there is one issue - when I dismiss the form, validation pop-ups appear if the form is not valid. Here is an overvi ...

angularjsvalidationtwitter-bootstrapangular-uiangular-ui-bootstrap

Creating a JavaScript-powered multi-department form: A step-by-step guide

Is there a way to maintain the form displayed on a webpage created in HTML5 and JavaScript for logging calls across three different departments? With buttons assigned to each department, clicking on them reveals the respective HTML form. That said, every t ...

javascripthtmlcss

Creating a unique custom bottom position for the popover and ensuring it is fixed while allowing it to expand

Creating a customized popover similar to Bootstrap's popover, I have successfully implemented popovers in all directions except for the top direction. My challenge lies in fixing the popover at the bottom just above the button that triggers it, and en ...

javascripthtmlcss

Footer refusing to stay fixed at the bottom of the viewport

Currently, I am utilizing fullpage.js with scrolloverflow.js activated on the second section. In this setup, I would like to have a footer that remains fixed at the bottom of the viewport for the second section only. However, instead of achieving this desi ...

javascriptjqueryhtmlcssfullpage.js

Guide to incorporating navigation buttons (back and forward) in a modal box

I have successfully created image thumbnails and linked them using the provided code. <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="https://maxcdn.bootstra ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to hide only the rows in a table when it is clicked using JavaScript?

Is there a way to hide rows in these tables by clicking on the table head? I'm currently using bootstrap 5 so JQuery is not an option. <table class="table table-info table-bordered"> <thead id="tablea"> ...

javascriptcssdom-eventsbootstrap-5

Blurred background images following the upgrade to Internet Explorer 11

This morning, I received an automatic update to IE 11 and noticed that some of my background images appeared blurry. After confirming that the images were not the issue, I opened Chrome and saw that they were crisp again. This left me completely puzzled. ...

cssbackground-imageinternet-explorer-11

Personalized FileInput within a card - Bootstrap 5

I am attempting to incorporate a custom file selection feature within a Bootstrap card: Here is my attempt: <style> label { cursor: pointer; } .custom-input-image { opacity: 0; position: absolute; z-index: -1; } </style> <div ...

htmlcssbootstrap-5

Ensure that the entire webpage is optimized to display within the viewport

My goal is to make the entire website fit perfectly into the viewport without requiring any scrolling. The main pages I am focusing on are index, music, and contact, as the other two pages lead to external sources (you can find the link at the bottom of th ...

javascripthtmlcssbootstrap-4

Interactive Bootstrap Modals

Is it possible to create a "page" viewing experience within a bootstrap modal? This type of user interface flow is common in many mobile apps, but after reviewing Bootstrap's components, I'm unsure how to implement this or if it's even supp ...

htmltwitter-bootstrapbootstrap-4single-page-application

HTML Buttons Remain Selected After Being Clicked

Currently working on a calculator app for a class project but I've hit a roadblock while setting up keyboard listeners. The keyboard functionality is fine, however, when it comes to clicking on buttons, specifically the non-keyboard functions, they re ...

javascripthtmlcsstwitter-bootstrap-3