Make buttons clean on mobile view-CodePudding

First of all I am a noob of CSS. Also I am using bootstrap framework. I have a question. Recently I created a set of buttons and they are viewable on mobile devices too.

Desktop view: https://i.stack.imgur.com/C8JCp.png

Mobile view: https://i.stack.imgur.com/IBPP0.png

So what I want to do is I need to give some small space between rows on mobile device view.

Like this: https://i.stack.imgur.com/fU55k.png

My Code:

<?php

include "header.php";
include "navbar.php";
?>

<div style="text-align: center;">
    <button type="button" >January</button> 
    <button type="button" >February</button>
    <button type="button" >March</button>
    <button type="button" >April</button>
    <button type="button" >May</button>
    <button type="button" >June</button>
    <button type="button" >July</button>
    <button type="button" >August</button>
    <button type="button" >September</button>
    <button type="button" >October</button>
    <button type="button" >November</button>
    <button type="button" >December</button>
</div>


<?php
include "footer.php"
?>

Anyone help for this? Thanks in Advance. Also sorry for my bad English.

CodePudding user response：

So for that you have to set bottom margin of 5px for all buttons like below

.btn-Margin{
  margin-bottom : 5px
}

<div style="text-align: center;">
    <button type="button" >January</button> 
    <button type="button" >February</button>
    <button type="button" >March</button>
    <button type="button" >April</button>
    <button type="button" >May</button>
    <button type="button" >June</button>
    <button type="button" >July</button>
    <button type="button" >August</button>
    <button type="button" >September</button>
    <button type="button" >October</button>
    <button type="button" >November</button>
    <button type="button" >December</button>
</div>