Arranging Icons to Coordinate with Text in a Line

I am working on a layout that features 7 icons with short links and descriptions underneath each. My goal is to have 4 icons displayed horizontally in one row, followed by 3 icons in the second row. While I have managed to set up the text and links as desired, aligning them all horizontally in a single row has been a challenge. Below is the code I currently have:

<div class="col-sm-12" style="text-align: center; align-content: center; padding:25px; display:flex; flex-wrap: wrap; width: 100%;">
  <div class="row" style="text-align:center;">
    <div class="col-sm-12">
      <div class="placeholder1" style="position: relative; inline-block;">
        <i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/idt-team" style="font-size: 12pt; text-decoration:underline;">IDT Team</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
      <div class="placeholder2" style="position: relative; inline-block;">
        <i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/authentication" style="font-size: 12pt; text-decoration:underline;">Login Assistance</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
      <div class="placeholder3" style="position: relative; inline-block;">
        <i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/students" style="font-size: 12pt; text-decoration:underline;">Students</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
      <div class="placeholder3" style="position: relative; inline-block;">
        <i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/myfire-updates" style="font-size: 12pt; text-decoration:underline;">MyFIRE Updates</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <i class="fa-solid fa-database fa-4x" style="padding: 100px;"></i>
      <i class="fa-solid fa-chalkboard fa-4x" style="padding: 100px;"></i>
      <i class="fa-solid fa-person-chalkboard fa-4x" style="padding: 100px;"></i>
    </div>
  </div>
</div>

<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>

htmlcsstwitter-bootstrapflexboxbootstrap-5

Answer №1

After making some adjustments by removing the "col-sm-12" and "position relative" elements, I successfully achieved the desired content layout on each row. To enhance the display, I incorporated "display: flex" and "flex-wrap" elements in the parent "row" div. Moreover, to ensure responsiveness, I included the meta "viewport" link in the HTML head section.

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Untitled Document</title>
</head>

<body>

  <div class="row" style="text-align:center; align-items: center; display:flex; flex-wrap: wrap; width: 100%; justify-content: center;">

    <div class="placeholder1" style="inline-block;">
      <i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i>
      <a href="https://myfire.helpdocs.com/idt-team" style="font-size: 12pt; text-decoration:underline;">IDT Team</a>
      <p>One sentence blurb<br>describing this item.</p>
    </div>
    <div class="placeholder2" style="inline-block;">
      <i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i>
      <a href="https://myfire.helpdocs.com/authentication" style="font-size: 12pt; text-decoration:underline;">Login Assistance</a>
      <p>One sentence blurb<br>describing this item.</p>
    </div>
    <div class="placeholder3" style="inline-block;">
      <i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i>
      <a href="https://myfire.helpdocs.com/students" style="font-size: 12pt; text-decoration:underline;">Students</a>
      <p>One sentence blurb<br>describing this item.</p>
    </div>
    <div class="placeholder3" style="inline-block;">
      <i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i>
      <a href="https://myfire.helpdocs.com/myfire-updates" style="font-size: 12pt; text-decoration:underline;">MyFIRE Updates</a>
      <p>One sentence blurb<br>describing this item.</p>
    </div>

  </div>
  
  <script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>

</body>

</html>

Answer №2

By tweaking your current layout, you have the option to include `d-flex` and `justify-content-around` as classes on your `col-sm-12` division. Additionally, apply `w-100` onto the `row` so that they occupy the entire width.

Consider this modification:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf1f1eaedeaecffeedeabb0aeb0ac">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="col-sm-12" style="text-align: center; align-content: center; padding:25px; display:flex; flex-wrap: wrap; width: 100%;">
  <div class="row w-100" style="text-align:center;">
    <div class="col-sm-12 d-flex justify-content-around align-items-center flex-wrap">
      <div class="placeholder1" style="position: relative; inline-block;">
        <i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/idt-team" style="font-size: 12pt; text-decoration:underline;">IDT Team</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
      <div class="placeholder2" style="position: relative; inline-block;">
        <i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/authentication" style="font-size: 12pt; text-decoration:underline;">Login Assistance</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
      <div class="placeholder3" style="position: relative; inline-block;">
        <i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/students" style="font-size: 12pt; text-decoration:underline;">Students</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
      <div class="placeholder3" style="position: relative; inline-block;">
        <i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/myfire-updates" style="font-size: 12pt; text-decoration:underline;">MyFIRE Updates</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
    </div>
  </div>
  <div class="row w-100">
    <div class="col-sm-12 d-flex justify-content-around align-items-center">
      <i class="fa-solid fa-database fa-4x" style="padding: 100px;"></i>
      <i class="fa-solid fa-chalkboard fa-4x" style="padding: 100px;"></i>
      <i class="fa-solid fa-person-chalkboard fa-4x" style="padding: 100px;"></i>
      <i class="null" style="padding: 100px;"></i>
    </div>
  </div>
</div>

<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>

Answer №3

To achieve the desired layout, you can utilize the Bootstrap grid system (BS grid). If you wish to have 4 items in a row, place each item inside a .col-3 class and wrap them all within a .row.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f5f8f8e3e4e3e5f6e7d7a2b9a6b9a4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid">

  <div class="row justify-content-center text-center">
    <div class="col-3">
      <div class="placeholder1">
        <i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i><br>
        <a href="https://myfire.helpdocs.com/idt-team" style="font-size: 12pt; text-decoration:underline;">IDT Team</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
    </div>
    <div class="col-3">
      <div class="placeholder2">
        <i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i><br>
        <a href="https://myfire.helpdocs.com/authentication" style="font-size: 12pt; text-decoration:underline;">Login Assistance</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
    </div>
    <div class="col-3">
      <div class="placeholder3">
        <i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i><br>
        <a href="https://myfire.helpdocs.com/students" style="font-size: 12pt; text-decoration:underline;">Students</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
    </div>
    <div class="col-3">
      <div class="placeholder3">
        <i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i><br>
        <a href="https://myfire.helpdocs.com/myfire-updates" style="font-size: 12pt; text-decoration:underline;">MyFIRE Updates</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
    </div>
  </div>
  <div class="row justify-content-center text-center">
    <div class="col-3">
      <i class="fa-solid fa-database fa-4x"></i>
    </div>
    <div class="col-3">
      <i class="fa-solid fa-chalkboard fa-4x"></i>
    </div>
    <div class="col-3">
       <i class="fa-solid fa-person-chalkboard fa-4x"></i>
    </div>
  </div>

</div>




<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>

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 for identifying the clicked location inside an element using JavaScript?

Is there a way in JavaScript to find out the exact position of a click within an element, like its distance from the left, right, or center? I'm struggling to determine whether the clicked area is on the left, center, or right side. https://i.stack.i ...

javascriptjquerycss

How to Use CSS to Perfectly Align Form Elements in the Center of

No matter what I try, I just can't seem to get these form elements centered on the page using CSS. Here is my code snippet: http://jsfiddle.net/VJLst/1/ <style> #divQuizFillBlank { margin-left: auto; margin-right: auto; } #textQuizFill ...

htmlcss

The Express error is thrown when attempting to read the property 'get' of an undefined value

Currently in the process of organizing my routes in a separate directory: server.js: var express = require("express"), parse = require("body-parser"), db = require("mysql"), mailer = r ...

javascripthtmlnode.jsexpress

Adjust the GTK3 tooltip color exclusively for Eclipse when it is operating on Ubuntu

I am using Eclipse Mars on Ubuntu 15.04 and looking to customize the GTK3 tooltip fg/bg color specifically for Eclipse without impacting other applications. I have come across instructions for changing this color system-wide, but I need guidance on how t ...

javacsseclipseubuntugtk3

Update the text box with the value of the checkbox selected before

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8> <link rel="stylesheet" href="ios7-switches.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <styl ...

javascriptjqueryhtmlcheckbox

Tips for maintaining the active tab after a page refresh by utilizing the hash in the URL

I came across this code snippet: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1c1a0918285d465a465b">[email protected]</a>/dist/css/bootstrap.min.css" ...

javascriptjquerybootstrap-5

Show HTML code inside a text box

I have a text box that I populate with data from a Json response like this: <div class="gadget-body" style="height:100px"> <label>{{ textData}}</label> </div> Now, the Json response contains HTML code with <p> and < ...

htmlcss

Can a Dashcode Webkit Web app be transformed into traditional HTML and CSS?

I have developed a blog using Dashcode, incorporating HTML, CSS, and Javascript to pull data from an xml file. It's pretty simple... My perspective on this is: 1. JavaScript should be compatible with all browsers (with some variations). 2. I may need ...

javascripthtmlwebkitcssdashcode

Are there any SVG libraries available that can create line graphs similar to those seen in Google Analytics?

The line graph in Google Analytics that is created using SVG is quite impressive. Are there any libraries available that can generate similar line graphs to those in Google Analytics? ...

javascripthtmlsvg

The Chart feature in the ASP.NET WebHelpers Library

My goal was to incorporate a chart from the webhelpers library into my Visual Studio Webforms project. When I click the button, the chart should appear on the page. However, when I click the button, the chart takes over the entire page, causing the buttons ...

c#htmlasp.net

Vue.js component still not transitioning out despite using mode="out-in"

As I navigate my way through learning about vue.js, one issue that has been puzzling me is how to make routed pages fade in and out when a user switches to a new page. Despite thinking it would be a simple task with vue, I have been struggling quite a bit ...

cssvue.jsvuejs3vue-routervue-transitions

Ensuring User Input Integrity with JavaScript Prompt Validation

I need help with validating input from a Javascript prompt() in an external js file using HTML code. I know how to call the Javascript function and write the validation logic, but I'm unsure how to handle the prompt and user input in HTML. Do I need ...

javascripthtml

Expand the width of the image gradually until it reaches its initial size within a flexible DIV container

I am working with a <div> container that occupies 80% of the screen on a responsive page. Within this <div>, I am attempting to display an image that is sized at 400 x 400 pixels. My objective: As the screen width increases: The <div> ...

javascripthtmlcssimage

Having trouble positioning items to the right in bootstrap

<div id="unique-content-wrapper"> <nav class="navbar navbar-expand-lg navbar-light bg-light" id=""> <button class="navbar-toggler" id="menu-toggle"><span class="mater ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to seamlessly transition between images in a slider every 3 seconds using javascript?

<!DOCTYPE html> <html> <head> <title>Hello</title> <meta http-equiv="Content-Type" type="text/html" charset="UTF-8"/> <style> *{margin:0; padding:0;} .mySlides{ position:relative; width:1000px; ...

javascripthtmlcss

Having Trouble with Click Function: Loading Pages into Div using Jquery/Ajax

Struggling to load content from other pages into a specific div by clicking on a URL link? Despite having previously executed the code successfully, it seems to redirect to the linked page instead of loading in the desired div. Even with an alarm set up as ...

javascriptphpjqueryhtmlajax

The Bootstrap col-md class causes the label text to be truncated

I am encountering an issue where a label extends beyond a certain length and ends up being placed under other elements. Check out the image for reference: form input I would like the entire label text to be visible. I believe the col-md-1 class from boot ...

htmlcssspringtwitter-bootstrapjsp

Is there a way to automate the uploading of captcha images to this solving service using Python?

Currently, I am working on a Python program with the goal of solving captchas on a website. My plan is to integrate 2captcha into the solution. Using Selenium, I have managed to write a Python script that fulfills all required tasks except for solving the ...

pythonhtmlseleniumselenium-webdriver2captcha

Customizing the appearance of input range in Firefox

I am having trouble styling the HTML input range element. I have successfully styled it for webkit browsers, but my styling does not seem to work on -moz- browsers. I attempted to use pseudo elements before and after on moz-range-thumb, but it seems that F ...

htmlcss

How come my countdown application functions properly when accessed through the browser via the HTML page, but encounters issues when utilized with an HTTP server?

I have encountered an issue where the app functions correctly when I open the HTML file in my browser, but fails to load the CSS and JavaScript when accessing it through localhost:3000. HTML: <html> <head> <link href="./main.css" rel="st ...

javascriptjqueryhtmlcss