How to give more spaces between icon and text? - html

Question

I am having trouble using Bootstrap with CSS and am still learning Bootstrap documentation by using Flex. I can't give more spaces for them because the text keeps following the icon when I give margin. I need a solution to make the result just like what I wanted. I use Bootstrap 4.
My Result:
The result I wanted:
Here's the code with Bootstrap and CSS from First Image (My Result)
div.order-1,div.order-2,div.order-3 {
color: #3379EA;
margin: auto;
margin-top:30px;
}
div.order-1 {
border-right: 3px solid #3379EA;
}
div.order-3 {
border-left: 3px solid #3379EA;
}
i.fas {
color: #3379EA;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="d-flex flex-nowrap justify-content-end" style="margin-top:30px;margin:auto;"><!-- I put margin again to make them center-->
<div class="order-1 p-2 justify-content-end text-center font-weight-bold">Smart<br>
<i class="fas fa-brain fa-2x"></i></div>
<div class="order-2 p-2 justify-content-end text-center font-weight-bold" >Wise<br>
<i class="fas fa-lightbulb fa-2x"></i></div>
<div class="order-3 p-2 justify-content-end text-center font-weight-bold">Accountable<br>
<i class="fas fa-users fa-2x"></i></div>
</div>
</div>
</div>
</div>
Thank you for helping.

Answer 1

Main thing is to use flex-fill and wrap your text into an element (I used a span) so you can style the border on it.
Note: Its good practice to not use <br/> for markup. see Is it sometimes bad to use <BR />?
.menu {
margin: 30px;
}
.menu .item {
color: #3379EA;
margin: auto;
margin-top: 30px;
}
.menu .item span {
color: #515151;
display: block;
height: 50px;
line-height: 50px;
border-right: 3px solid #3379EA;
}
.menu .item:last-child span {
border-right: 0;
}
.menu i.fas {
margin-top: 16px;
color: #3379EA;
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="menu d-flex flex-nowrap">
<div class="item order-1 justify-content-end text-center font-weight-bold flex-fill">
<span>Smart</span>
<i class="fas fa-brain fa-2x"></i></div>
<div class="item order-2 justify-content-end text-center font-weight-bold flex-fill">
<span>Wise</span>
<i class="fas fa-lightbulb fa-2x"></i></div>
<div class="item order-3 justify-content-end text-center font-weight-bold flex-fill">
<span>Accountable</span>
<i class="fas fa-users fa-2x"></i></div>
</div>