CSS flex align buttons - html

Question

I'm trying to learn to align buttons correctly using flex.
On desktop looks like I want it:
So does in portrait on mobile:
However when on landscape, it looks like this:
I'd prefer it would look more align.
Here's my code for this part:
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
}
<div>
<div class="row">
<div class="btnWrap col" style="">
<button type="button" id="TopNames" class="btn btn-secondary btn-top active" onclick="topButtonClick(this)">Najpogostejša imena</button>
</div>
<div class="btnWrap col" style="">
<button type="button" id="TopBabyNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Imena novorojenčkov</button>
</div>
<div class="btnWrap col" style="">
<button type="button" id="TopDisappearingNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Izginjajoča imena</button>
</div>
<div class="btnWrap col" style="">
<button type="button" id="TopModernNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Sodobna imena</button>
</div>
<div class="btnWrap col" style="">
<button type="button" id="TopLastnames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Najpogostejši priimki</button>
</div>
</div>
</div>

Answer 1

This is how your html should be:
<div class="button-wrapper">
<button>Name</button>
<button>Name</button>
<button>Name</button>
<button>Name</button>
<button>Name</button>
</div>
This is css for desktop:
.button-wrapper{
display:flex;
align-items:center;
justify-content: space-between;
flex-direction: row;
}
This is css for mobile:
.button-wrapper{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

Answer 2

No need to add extra CSS property here, instead of that use bootstrap classes
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div>
<div class="row justify-content-center text-center">
<div class="btnWrap col-12 col-md-6 col-lg" style="">
<button type="button" id="TopNames" class="btn btn-secondary btn-top active" onclick="topButtonClick(this)">Najpogostejša imena</button>
</div>
<div class="btnWrap col-12 col-md-6 col-lg" style="">
<button type="button" id="TopBabyNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Imena novorojenčkov</button>
</div>
<div class="btnWrap col-12 col-md-4 col-lg" style="">
<button type="button" id="TopDisappearingNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Izginjajoča imena</button>
</div>
<div class="btnWrap col-12 col-md-4 col-lg" style="">
<button type="button" id="TopModernNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Sodobna imena</button>
</div>
<div class="btnWrap col-12 col-md-4 col-lg" style="">
<button type="button" id="TopLastnames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Najpogostejši priimki</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 3

Please have a look at below snippet. Add bootstrap classes to achieve desired result
.btnWrap{
margin-top:10px
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row justify-content-center text-center">
<div class="btnWrap col-12 col-lg" >
<button type="button" id="TopNames" class="btn btn-secondary btn-top active" onclick="topButtonClick(this)">Najpogostejša imena</button>
</div>
<div class="btnWrap col-12 col-lg" >
<button type="button" id="TopBabyNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Imena novorojenčkov</button>
</div>
<div class="btnWrap col-12 col-lg" >
<button type="button" id="TopDisappearingNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Izginjajoča imena</button>
</div>
<div class="btnWrap col-12 col-lg" >
<button type="button" id="TopModernNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Sodobna imena</button>
</div>
<div class="btnWrap col-12 col-lg" >
<button type="button" id="TopLastnames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Najpogostejši priimki</button>
</div>
</div>
</div>