CODEWITHSUNDEEP
htmlcssreactjsbootstrap-4
Shahobiddin Khusniddinov
Shahobiddin Khusniddinov

Reputation: 79

display:inline-block is not working in Bootstrap

Here is my 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 my Nav component:

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's are display: block. I want them to be display: inline-block. But it is not working. I've tried using Bootstrap, in my own .scss file, inline styling. But no change. Can you help, please?

Upvotes: 0

Views: 1048

Answers (1)

terrymorse
terrymorse

Reputation: 7096

Adding style="display: inline-block" to Bootstrap list-group items will have no effect, because Bootstrap list-group uses flexbox, with items oriented vertically (column):

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

If you want the items in a list group to be horizontal rather than vertical, add the list-group-horizontal class to the list-group element, which changes the default list-group flex direction from column (vertical) to row (horizontal).

To illustrate this, here is the HTML that would be produced by the code in the question above:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Notice that the orientation of the list-group items is vertical.

Here is that same HTML result, with list-group-horizontal added:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

For completeness, here is the code from the question, 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;

And the Nav component, with d-flex removed 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;

Upvotes: 1

Related Questions