CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfrontend
Brarord
Brarord

Reputation: 651

How to align text next to icons using a boostrap?

I am trying to align text next to this icons but icons don't want to cooperation. Just kidding... I am totally noob on front-end, especially with bootstrap. Can someone tell me how to do it?

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">

<li class="active">
  <a href="#"><span class="fa fa-database mr-3"></span> Menedżer baz danych</a>
</li>
<li>
  <a href="#"><span class="fas fa-project-diagram mr-3"></span> Menedżer diagramów ER</a>
</li>
<li>
  <a href="#"><span class="fa fa-folder-open mr-3"></span> Katalog diagramów ER</a>
</li>
<li>
  <a href="#"><span class="fa fa-trophy mr-3"></span> Top Review</a>
</li>
<li>
  <a href="#"><span class="fa fa-cog mr-3"></span> Settings</a>
</li>
<li>
  <a href="#"><span class="fa fa-support mr-3"></span> Support</a>
</li>
<li>
  <a href="#"><span class="fa fa-sign-out mr-3"></span> Wyloguj</a>
</li>

How its look like for real:

enter image description here

Upvotes: 0

Views: 68

Answers (2)

Daniel
Daniel

Reputation: 887

If you want to vertically align icons and text on their line, you can use flexbox in your CSS stylesheet: 

li li > a {
display: flex;
align-items: center;
}

Upvotes: 0

Gerard
Gerard

Reputation: 15796

This might be a good start. Please note a li should always be inside an ul.

ul {
  list-style: none;
}
li {
  padding: 0.5em;
  background: black;
}
li:hover {
  background: blue;
}
li > a {
  display: flex;
  color: white;
  text-decoration: none;
}
li > a > span {
  min-width: 30px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<ul>
  <li class="active">
    <a href="#"><span class="fa fa-database mr-3"></span> Menedżer baz danych</a>
  </li>
  <li>
    <a href="#"><span class="fas fa-project-diagram mr-3"></span> Menedżer diagramów ER</a>
  </li>
  <li>
    <a href="#"><span class="fa fa-folder-open mr-3"></span> Katalog diagramów ER</a>
  </li>
  <li>
    <a href="#"><span class="fa fa-trophy mr-3"></span> Top Review</a>
  </li>
  <li>
    <a href="#"><span class="fa fa-cog mr-3"></span> Settings</a>
  </li>
  <li>
    <a href="#"><span class="fa fa-support mr-3"></span> Support</a>
  </li>
  <li>
    <a href="#"><span class="fa fa-sign-out mr-3"></span> Wyloguj</a>
  </li>
</ul>

Upvotes: 1

Related Questions