I have a set of four icons positioned next to each other, but I want them to be evenly spaced apart. I tried using the justify-content-between class, but it didn't work. How can I achieve this?
I'm creating a Progressive Web App (PWA) for mobile phones.
- Below, I will provide the code and an image illustrating how I want the layout to look. I am utilizing Bootstrap and Angular Material for this project.
Here is the code snippet with the icons:
<div class="main flex down fixed-bottom" >
<mat-toolbar class="colour">
<mat-toolbar-row>
<div class="row justify-content-between">
<div class="icons">
<button mat-icon-button class="icons col-xs-3" >
<mat-icon>home</mat-icon>
</button>
<button mat-icon-button class="icons col-xs-3" >
<mat-icon>email</mat-icon>
</button>
<button mat-icon-button class="icons col-xs-3">
<mat-icon>add_comment</mat-icon>
</button>
<button mat-icon-button class="icons col-xs-3" >
<mat-icon>title</mat-icon>
</button>
</div>
</div>
</mat-toolbar-row>
</mat-toolbar>
</div>
This is the current appearance:
https://i.stack.imgur.com/YHbaZ.png
This is the desired layout: https://i.stack.imgur.com/CkHpP.png