Ways to align the icon and text to the left side of the screen?

I am looking to utilize Bootstrap's list group feature to create a navigation bar similar to the image below:

https://i.sstatic.net/bndVl.png

I am curious about how I can shift them to the left. Here is what I have attempted so far.

.list-group-item {
  display: flex;
  align-items: center;
}

.list-group-item a {
  float: left;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07656868737473756677473329312935">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="list-group">
  <a class="list-group-item list-group-item-action"><i class="fa-brands fa-twitter"></i></a>
  <a href="../home.html" class="list-group-item-action"><i class="fa-solid fa-house"></i>Home</a>
  <a href="../explore/index.css" class="list-group-item list-group-item-action active" aria-current="true"><i class="fa-solid fa-hashtag"></i>Explore</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-bell"></i>Notifications</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-envelope"></i>Messages</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-bookmark"></i>Bookmarks</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-list"></i>Lists</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-user"></i>Profile</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-circle-minus"></i>More</a>
</div>

Update

I experimented with setting the icons' min-width, but it did not work as expected because I now realize that I did not clearly present the entire issue... This list-group is part of a column in my grid. My apologies!

Below you will find my complete code:

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Explore</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02606d6d76717670637242372c332c32">[email protected]</a>/dist/css/bootstrap.min.css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container text-center">
    <div class="row">
      <!-- Left column -->
      <div class="col">
        <div class="list-group">
          <a class="list-group-item list-group-item-action"><i class="fa-brands fa-twitter"></i></a>
          <a href="../home.html" class="list-group-item list-group-item-action"><i
                            class="fa-solid fa-house"></i>Home</a>
          <a href="../explore/index.css" class="list-group-item list-group-item-action active" aria-current="true"><i class="fa-solid fa-hashtag"></i>Explore</a>
          <a href="#" class="list-group-item list-group-item-action"><i
                            class="fa-solid fa-bell"></i>Notifications</a>
          <a href="#" class="list-group-item list-group-item-action"><i
                            class="fa-solid fa-envelope"></i>Messages</a>
          <a href="#" class="list-group-item list-group-item-action"><i
                            class="fa-solid fa-bookmark"></i>Bookmarks</a>
          <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-list"></i>Lists</a>
          <a href="#" class="list-group-item list-group-item-action"><i
                            class="fa-solid fa-user"></i>Profile</a>
          <a href="#" class="list-group-item list-group-item-action"><i
                            class="fa-solid fa-circle-minus"></i>More</a>
        </div>
      </div>
      <!-- Center column -->
      <div class="col">
        Column
      </div>
      <!-- Right column -->
      <div class="col">
        Column
      </div>
    </div>
  </div>

</body>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To ensure all icons are the same size and centrally aligned, you can set a minimum width for the icons. This will help in stacking the text neatly.

Using Flexbox may not be ideal as it is limited to one-dimensional alignment and may not support alignment across rows.

.list-group-item i {
  min-width: 30px;
  text-align: center;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818c8c979097918293a3d7cdd5cdd1">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="list-group">
  <a class="list-group-item list-group-item-action"><i class="fa-brands fa-twitter"></i></a>
  <a href="../home.html" class="list-group-item list-group-item-action"><i class="fa-solid fa-house"></i>Home</a>
  <a href="../explore/index.css" class="list-group-item list-group-item-action active" aria-current="true"><i class="fa-solid fa-hashtag"></i>Explore</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-bell"></i>Notifications</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-envelope"></i>Messages</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-bookmark"></i>Bookmarks</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-list"></i>Lists</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-user"></i>Profile</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-circle-minus"></i>More</a>
</div>

Answer №2

It appears that you are looking to align the navbar to the left within the col based on your code snippet. If this is the case, here is a solution for you:

.list-group-item {
  display: flex;
  align-items: center;
}

.list-group-item i {
  margin-right: 0.5rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>"
  <title>Explore</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9e9393888f888e9d8cbcc9d2cdd2cc">[email protected]</a>/dist/css/bootstrap.min.css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container text-center">
    <div class="row">
      <!-- Left column -->
      <div class="col">
        <div class="list-group">
          <a class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fab fa-twitter mr-2"></i>Twitter</a>
          <a href="../home.html" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-house mr-2"></i>Home</a>
          <a href="../explore/index.css" class="list-group-item list-group-item-action active d-flex align-items-center" aria-current="true"><i class="fas fa-hashtag mr-2"></i>Explore</a>
          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-bell mr-2"></i>Notifications</a>
          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-envelope mr-2"></i>Messages</a>
          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-bookmark mr-2"></i>Bookmarks</a>
          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-list mr-2"></i>Lists</a>
          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-user mr-2"></i>Profile</a>
          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-circle-minus mr-2"></i>More</a>
        </div>
      </div>
      <!-- Center column -->
      <div class="col">
        Column
      </div>
      <!-- Right column -->
      <div class="col">
        Column
      </div>
    </div>
  </div>
</body>

</html>

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 process for writing <p></p> and showcasing it on your website?

Is there a way to display the code <p></p> as text on an HTML page without it being processed as HTML, resulting in an empty paragraph? ...

html

What is the best way to reposition the caret within an <input type="number"> element?

How can I make the caret move when an input is clicked? The code I found works with text, but not with number. Also, is there a way to pass the length without specifying a value (e.g. 55) in the parameters? HTML <input type="number" name="cost" value= ...

javascriptjqueryhtml

Using Selenium to verify if text appears in bold format or not

<div class="searchCenter largeFont"> <b> 1 </b> <a href="search/?p=2&q=move&mt=1"> 2 </a> <a href="search/?p=3&q=move&mt=1"> 3 </a> <a href="search/?p=4&q=move&mt=1"> 4 </a> < ...

cssselenium

The perplexing problem of scrolling in Dojox/mobile/scrollableview

I've noticed some scroll issues with the dojox/mobile/ScrollableView (version 1.10+) in my cordova application, specifically on Android phones. This problem seems to be affecting other widget-based architectures and even some store apps as well. I wou ...

javascripthtmlcordovadojodojox.mobile

Tips for making a div with a single triangular side using Reactjs

Hey there, I'm looking to design a header similar to the one shown in this image. Can someone provide guidance on how I can achieve this UI using React.js? https://i.sstatic.net/zmW5x.jpg ...

htmlcssreactjs

Having trouble scaling image with CSS, not reacting to size properties

I have little experience in web development, but a small business client has me working on their website while I handle other tasks for them. I've created a home page design that is almost ready to be turned into a template for the chosen CMS. Things ...

htmlcssimage

I'm encountering difficulties in automatically populating the category field from an API

Hey there! I have set up a signup form and I am trying to automatically fetch categories from the server API to populate an input area. Everything seems to be in place, but for some reason, I am unable to retrieve the data. API: Here is the code I'm ...

javascripthtmlformsapi

The functionality of CSS scroll snap does not seem to be compatible with the CSS Grid

When utilizing CSS scroll snap with Flexbox, the snapping functionality works adequately: * { box-sizing: border-box; margin: 0; padding: 0; } .slider { font-family: sans-serif; scroll-snap-type: mandatory; scroll-snap-points-y: repeat(100vw ...

htmlcsscss-grid

Why does the for loop assign the last iteration of jQuery onclick to all elements?

I've encountered an issue with my code that I'd like to discuss var btns = $('.gotobtn'); $('#'+btns.get(0).id).click(function() { document.querySelector('#navigator').pushPage('directions.html', myInf ...

javascriptjqueryhtml

Replacing a JSON vault using XHR: A step-by-step guide

Can someone assist me in replacing the JSON data from a JSON file on a website using JavaScript XHR? setagaya.json: {"trains":[{"operation_number":1,"line_id":26007,"station_id":784,"track_number":1,"up":true},{"operation_number":2,"line_id":26007,"stati ...

javascripthtmljson

A division of text is colliding with a division that holds a list with no particular

Hello everyone, I am new to HTML/CSS and I am facing an issue that I believe can be easily resolved. Currently, my code has four sections, with the last three displaying as expected in a consecutive manner. However, the second section is overlapping on t ...

htmlcss

How to extract a one-of-a-kind identification number from the browser using just JavaScript in a basic HTML file?

Is there a way to obtain a distinct identification number from a browser without resorting to techniques such as generating and storing a unique number in cookies or local storage, and without utilizing a server-side language? ...

javascripthtml

JavaScript expression not being processed

What could be the reason behind not receiving the value for dish.price, dish,description, etc.? Where am I making a mistake in this code snippet? <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="utf-8"> < ...

cssangularjshtmltwitter-bootstrap

How to efficiently remove duplicate items from multiple select dropdowns in Angular using ng-repeat?

Need help with dynamically assigning objects to select boxes in AngularJS. I have a scenario where I add multiple select boxes to a form, but each box should only display items that haven't been selected in other boxes. How can I achieve this functio ...

javascripthtmlangularjsobjectdrop-down-menu

Enhancing User Experience on Android Devices: Automatic Website Zoom-In Feature for Responsive Design

For the first time, I am delving into creating a responsive website design. I seem to be encountering difficulties when it comes to smartphones. I have been using the following meta-tag to ensure that the website loads "zoomed in". (I found this method on ...

androidhtmlcssviewstate

How to target the following element with CSS that has a specified class name

Would it be possible to achieve this using CSS alone, or would I need to resort to jQuery? This is how my code currently looks: <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr class="some-class">...</tr> // My g ...

jquerycssselector

Leveraging LESS variables within media queries

After inputting the less code below into : @item-width: 120px; @num-cols: 3; @margins: 2 * 20px; @layout-max-width: @num-cols * @item-width + @margins; @media (min-width: @layout-max-width) { .list { width: @layout-max-width; } } The resul ...

cssless

How can I retrieve the URL for a specific location on Google Maps using latitude and longitude coordinates?

Is it possible to generate a URL using latitude and longitude coordinates that will take me directly to a Google Maps page showing that location? For instance, consider the following sample code: var lat = 43.23; var lng = 114.08; var url = 'http:/ ...

htmlgoogle-maps

Having issues with jQuery's .hover and .mouseleave functions causing unintentional looping. Any suggestions on how to resolve this

What I want to achieve: When hovering over the image, it fades out. Text should fade in after the image fades out. Text should fade out when the mouse leaves. The original image should fade back in. End with the original image and no text displayed. Iss ...

javascriptjquerycsshtmlimage

What is the best way to stack div elements one after the other?

I am a complete beginner in HTML and I have a project for my web design class about a movie. http://jsfiddle.net/Lbo1ftu9/ <div id="footer"> <a href="D:/MOVIE REPORT/akira.htm" title="GO BACK?"><img src="D:/IMAGES/goback.gif"> My code ...

htmlcss