The inline-block property does not seem to be functioning as expected within Bootstrap

Take a look at my custom Navbar component:

const Navbar = () => {
  return (
    <div className='Navbar'>
      <ul className='list-group w-75 mx-auto'>
        <li className='list-group-item'>
          <i className='fab fa-twitter' id='twitter' />
        </li>
        {nav.map((item) => (
          <Nav key={v4()} iconClass={item.iconClass} name={item.name} />
        ))}
        <li className='mx-auto'>
          <button className='btn butn p-3'>Tweet</button>
        </li>
      </ul>
    </div>
  );
};

export default Navbar;

And here is the Nav component I'm using:

const Nav = ({ iconClass, name }) => {
return (
    <li onClick={onClick} className='d-flex align-items-center list-group-item'>
      <i className={iconClass} />
      <span>{name}</span>
    </li>
  );
};

export default Nav;

All li elements have display: block applied to them. I've been trying to change it to display: inline-block with no success using Bootstrap classes, inline styling or my own .scss file. Can you offer some suggestions to solve this issue?

htmlcssreactjsbootstrap-4

Answer №1

When it comes to Bootstrap list-group items, adding 

style="display: inline-block"
will not have any impact because the Bootstrap list-group utilizes flexbox with a vertical orientation (column):

.list-group {
  display: flex;
  flex-direction: column;
}
.list-group-item {
  position: relative;
  display: block;
}

If you desire a horizontal arrangement for list-group items instead of the default vertical layout, simply include the list-group-horizontal class to the list-group element. This class alters the default list-group flex direction from column (vertical) to row (horizontal).

To demonstrate this, here is the generated HTML code based on the aforementioned:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ebe6e6fdfafdfbe8f9c9bda7bfa7b9">[email protected]</a>/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/solid.min.css">
</head>

<body class="p-4">

  <h4>Existing Navbar</h4>

  <div class="navbar">
    <ul class="list-group w-75 mx-auto" style="background-color: #e0e0e0">
      <li class="list-group-item">
        <i class="fab fa-twitter" id="twitter"></i>
      </li>
      <!-- some items to stand in for Nav components -->
      <li onclick="alert('ambulance')" class="d-flex align-items-center list-group-item">
        <i class="fas fa-ambulance"></i>
      </li>
      <li onclick="alert('apple')" class="d-flex align-items-center list-group-item">
        <i class="fas fa-apple-alt"></i>
      </li>
      <li onclick="alert('baby carriage')" class="d-flex align-items-center list-group-item">
        <i class="fas fa-baby-carriage"></i>
      </li>
      <li onclick="alert('biking')" class="d-flex align-items-center list-group-item">
        <i class="fas fa-biking"></i>
      </li>
      <li class='mx-auto'>
        <button class='btn butn p-3'>Tweet</button>
      </li>
    </ul>
  </div>
</body>

It's evident that the list-group items are laid out vertically.

Here is the same HTML output with the addition of list-group-horizontal:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535415b435b45">[email protected]</a>/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/solid.min.css">

<body class="p-4">

  <h4>Modified Navbar</h4>

  <p>Changes:</p>

  <ul>
    <li>Removed "d-flex" from all list group items (had no effect)</li>
    <li>Added "list-group-horizontal" to ul (puts all li elements on same line)
    </li>
  </ul>

  <div class="navbar">
    <ul class="list-group w-75 mx-auto list-group-horizontal" style="background-color: #e0e0e0">
      <li class="list-group-item">
        <i class="fab fa-twitter" id="twitter"></i>
      </li>
      <!-- some items to stand in for Nav components -->
      <li onclick="alert('ambulance')" class="align-items-center list-group-item">
        <i class="fas fa-ambulance"></i>
      </li>
      <li onclick="alert('apple-alt')" class="align-items-center list-group-item">
        <i class="fas fa-apple-alt"></i>
      </li>
      <li onclick="alert('baby-carriage')" class="align-items-center list-group-item">
        <i class="fas fa-baby-carriage"></i>
      </li>
      <li onclick="alert('biking')" class="align-items-center list-group-item">
        <i class="fas fa-biking"></i>
      </li>
      <li class='mx-auto'>
        <button class='btn butn p-3'>Tweet</button>
      </li>
    </ul>
  </div>
</body>

To provide a full perspective, below is the code from the initial query with list-group-horizontal added to the <ul>:

const Navbar = () => {
  return (
    <div className='Navbar'>
      <ul className='list-group w-75 mx-auto list-group-horizontal'>
        <li className='list-group-item'>
          <i className='fab fa-twitter' id='twitter' />
        </li>
        {nav.map((item) => (
          <Nav key={v4()} iconClass={item.iconClass} name={item.name} />
        ))}
        <li className='mx-auto'>
          <button className='btn butn p-3'>Tweet</button>
        </li>
      </ul>
    </div>
  );
};

export default Navbar;

Furthermore, here is the updated Nav component with the removal of d-flex from the <li>:

const Nav = ({ iconClass, name }) => {
return (
    <li onClick={onClick} className='align-items-center list-group-item'>
      <i className={iconClass} />
      <span>{name}</span>
    </li>
  );
};

export default Nav;

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

Top Margin: Supported by Chrome and Safari

After troubleshooting why the margin-top is not working on Safari, but works fine on Chrome, I discovered a discrepancy. Chrome Upon hovering over an item in the image, the cursor changes as expected. This feature operates smoothly in Chrome. https://i. ...

javascriptphphtmlcss

When employing useNavigation, the URL is updated but the component does not render or appear on the

Check out this code snippet: https://codesandbox.io/p/sandbox/hardcore-lake-mptzw3 App.jsx: import ContextProvider from "./provider/contextProvider"; import Routes from "./routes"; function App() { console.log("Inside App" ...

javascriptreactjsreact-router-dom

Using various videojs players within a single react element

In the process of developing a React application for Step-By-Step Assembly Instructions, I am incorporating functionality to display movies onClick. Each step may contain anywhere from 1 to 6 movies. However, I am encountering difficulties in mapping movie ...

reactjsvideo.js

Is there a way to simultaneously redirect to a new page and trigger an event on that page?

As a programming novice and a newcomer to this community, I am seeking assistance with my query. I am interested in learning how to redirect from page 1 to page 2 and then immediately trigger an event on page 2. Below is the code snippet from page 1: & ...

javascripthtmljquery

What could be causing the multiselect to fail to update?

Currently, I am having an issue with bsMultiselect and bootstrap 5. Despite having all the required scripts in place, the multiselect element only updates after a page reload. The goal is to have the multiselect updated when an option in another select e ...

bootstrap-4multi-selectbootstrap-5bsmultiselect

Tips for creating a responsive background image that adjusts after resizing the window to a certain width

Is there a way to create a responsive background-image that adjusts when the window is resized to a specific width, similar to the main image on ? ...

javascriptjquerycsshtmlresponsive-design

Firefox 3.5: The Notorious Code Copycat

Encountering an issue in Firefox 3.5.2 where after clicking a link on the page and then returning using the back button or another link, extra HTML code appears. Unsure if it's added by Firefox or related to PHP code. Unfortunately, unable to share t ...

phphtmlcssfirefox

Troubleshooting a glitch with passing a variable to a PHP script using AJAX

Explanation of the page functionality: When the quiz php page loads, a user can create a score using a function in quiz.js. This score is then stored in a variable score within quiz.js Once the score is generated, the user must click a button to move on ...

javascriptphphtmlajax

Reloading a page will display [object CSSStyleDeclaration]

Upon editing content and saving changes, instead of displaying my updated content when refreshing the page, it shows [object CSSStyleDeclaration]. function newElement() { let li = document.createElement("li"); let inputvalue = document.querySelector ...

javascripthtmlcss

To activate a function, simply click anywhere on the body: instruction

One of my latest projects involved creating a directive that allows users to click on a word and edit it in a text box. Once edited, clicking anywhere on the body should return the word back to its updated form. html <div markdown>bineesh</div& ...

javascripthtmlangularjs

If a specific class is identified, add a border to the div when clicked using JavaScript

Is there a way to use javascript/jquery to add a border to a selected div? I have multiple rows with columns, and I want only one column per row to be highlighted with a border when clicked. Each row should have one column with a border, so it's clear ...

javascriptjquerycssborderaddition

Simple HTML/CSS text blocks positioned beside images in a list format

I'm attempting to design a list (ul) where each li has an img on the left and text aligned to the left (including a title and paragraphs) positioned next to the image on the right. I've experimented with float: left and various display propertie ...

htmlcss

I successfully linked expressjs, nodejs, reactjs, and mysql in my project. I'm puzzled as to why everything runs smoothly after I restart my express server, but encounters issues when I refresh the page

express path users.js var express = require('express'); var router = express.Router(); const connection = require('./MySQL.js') /* Accessing user data. */ router.get('/', function(req, res, next) { connection.connect() ...

javascriptnode.jsreactjsexpressdebugging

Jest is unable to execute tests containing methods within a .tsx file

Typically, I only test files ending with .ts, but this time I have a file containing utility methods that return a react element. Therefore, my file has a .tsx extension and includes components from material ui and other libraries. Initially, I encountere ...

reactjsjestjsmaterial-uits-jest

What is the best way to incorporate a <c:forEach> loop into JSP operations?

I am attempting to calculate the product of two variables that are associated with an item in a loop. Below is the code snippet from the JSP file: <table> <thead> <tr> <th>PRICE</th> <th ...

javascripthtmljspjstl

Arrange the side by side display of uploaded image previews

Could someone please assist me with aligning my image upload preview in a row, similar to a brand/partners slider? The current preview output is not displaying as desired. Here is the code I have: <div class="image-gallery"> <div class ...

htmljquerycssimageupload

How come all the toggle switches are operating simultaneously?

** I have encountered an issue with storing toggle switch values in local storage. When I try to turn one toggle switch "ON", all the toggle switches turn "ON" simultaneously. This problem arises after using checked={value} in the tag. Can someone ple ...

javascriptreactjstoggletoggleswitch

Do we still require the material-ui custom touch event? It seems to cause many issues

It has come to my attention that material-ui still relies on a package that appears to be incompatible with new React updates from Facebook. There seems to be some frustration over this issue, making it challenging to keep up with React advancements. Is th ...

reactjsmaterial-ui

What is the best way to iterate through two arrays and display the common elements as buttons?

I have a list of keywords and a collection of objects. Each object in the collection has a title that may match one or more keywords from the list. I am trying to loop through all the objects, check for keyword matches, and return the titles of the objects ...

javascriptarraysreactjscomponents

Information will not load within the div

Currently, I am facing an issue within one of my ASP.NET MVC views. Upon page load, I am rendering a PartialView inside a div. <div id="#jobs"> @{ Html.RenderAction("Jobs", "Home", new { enviroment = "value" }); } </div> The acti ...

jqueryhtmlasp.net-mvc