Centering Buttons With Bootstrap 4

Question

Hi I have this screen:

And it needs to be viewable on phones, tablets and desktops. Uses BootStrap 4

What I want is a maximum width for each button AND for the buttons to be centered on the screen.

Here is my html/css:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="max-width=device-max-width, initial-scale=1">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<style> a { max-width: 400px; } </style>
</head>

<body>
{{template "navbar"}}

<div class="container">
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/camera" role="button">Camera</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/disk-memory" role="button">Disk &amp; Memory</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/network" role="button">Network</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/wifi-networks" role="button">WiFi Networks</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/speaker" role="button">Speaker Test</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/location" role="button">Location</a>
            </div>
        </div>

</div>

<script src="/static/js/jquery-3.3.1.slim.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function(){
        $("#btnBack").hide();
    });
</script>

Any help would be much appreciated, thanks.

score 1 · Accepted Answer · answered May 30 '19 at 22:57

Just add this styles:

<style> 
.row div{ 
    display: flex; 
    justify-content: center; 
} 

.btn-block{
    max-width: 400px;
}
</style>

Result:

<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="max-width=device-max-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style> 
.row div{ 
  display: flex; 
  justify-content: center; 
} 

.btn-block{
  max-width: 400px;
}
</style>
</head>

<body>
{{template "navbar"}}

<div class="container">
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/camera" role="button">Camera</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/disk-memory" role="button">Disk &amp; Memory</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/network" role="button">Network</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/wifi-networks" role="button">WiFi Networks</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/speaker" role="button">Speaker Test</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/location" role="button">Location</a>
            </div>
        </div>

</div>

<script src="/static/js/jquery-3.3.1.slim.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

And that does it. I knew it would be simple but I'm new to BootStrap, HTML, CSS etc. Thanks very much for the quick response. — davo36, May 30 '19 at 23:17

score 0 · Answer 2 · answered May 30 '19 at 22:54

0

.container {
position : absolute;
left : 50%;
top :50%;
transform : translate(-50%,-50%);
}

answered May 30 '19 at 22:54

khoubaib Boughalmi

1
2

1

It is not good idea use position: absolute for this – Brayan Garcia May 30 '19 at 22:59

Centering Buttons With Bootstrap 4

2 Answers2