I have tried multiple solutions but I was not able to achieve what I'm trying to achieve. I've build a php file that controls different components on a raspberry pi. Therefore I have 4 rows of buttons that I would like to center in the middle of the screen as a responsive design, no matter what the resolution is (xl,lg,md,sm).
The code so far is:
<!DOCTYPE html>
<html lang='us'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO' crossorigin='anonymous'>
<meta name='viewport' content='width=device-width' />
<style>
.input-group-button {
padding: 0;
border:none;
background: none;
}
.input-group .input-group-button:first-child .btn{
border-top-right-radius:0;
border-bottom-right-radius:0;
}
.input-group .input-group-button:last-child .btn{
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.input-group select.form-control{
-webkit-appearance: none;
}
</style>
</head>
<body>
<form class='justify-content-center' method='post' action='../index.php'>
<div class='row justify-content-center form-group'>
<div class='col-xl-2 col-lg-2 col-md-2 col-sm-2 text-center'>
<div class='input-group'>
<select name='2812efct' id='2812efct' class='form-control'>
<option selected>Select Effects</option>
<option value='0'>All Effects</option>
<option value='1'>Effect 1</option>
<option value='2'>Effect 2</option>
<option value='3'>Effect 3</option>
</select>
<div class='input-group-addon input-group-button'>
<button type='submit' class='btn btn-secondary' value='2812Effect' name='2812Effect'>Set Effect</button>
</div>
</div>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group col-xl-1 col-lg-1 col-md-1 col-sm-1 text-center' role='group'>
<button class='btn btn-secondary' type='submit' value='up' name='up'>Up</button>
<button class='btn btn-secondary' type='submit' value='down' name='down'>Down</button>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group col-xl-1 col-lg-1 col-md-1 col-sm-1 text-center' role='group'>
<button class='btn btn-secondary' type='submit' value='ledOn' name='ledOn'>LED On</button>
<button class='btn btn-secondary' type='submit' value='ledOff' name='ledOff'>LED Off</button>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group col-xl-1 col-lg-1 col-md-1 col-sm-1 text-center' role='group'>
<button class='btn btn-secondary btn-lg' type='submit' value='stop' name='stop'>Stop</button>
</div>
</div>
</form>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js' integrity='sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49' crossorigin='anonymous'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy' crossorigin='anonymous'></script>
</body>
</html>The Buttons seem to be somehow in the center but left aligned and if the screen goes smaller the buttons are going to stick on the left hand side.
I'm not sure I fully understand what yuo wanr, but maybe just remove col-xl-2 col-lg-2 col-md-2 col-sm-2 from everywhere.
.input-group-button {
padding: 0;
border:none;
background: none;
}
.input-group .input-group-button:first-child .btn{
border-top-right-radius:0;
border-bottom-right-radius:0;
}
.input-group .input-group-button:last-child .btn{
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.input-group select.form-control{
-webkit-appearance: none;
}<!DOCTYPE html>
<html lang='us'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO' crossorigin='anonymous'>
<meta name='viewport' content='width=device-width' />
</head>
<body>
<form class='justify-content-center' method='post' action='../index.php'>
<div class='row justify-content-center form-group'>
<div class='text-center'>
<div class='input-group'>
<select name='2812efct' id='2812efct' class='form-control'>
<option selected>Select Effects</option>
<option value='0'>All Effects</option>
<option value='1'>Effect 1</option>
<option value='2'>Effect 2</option>
<option value='3'>Effect 3</option>
</select>
<div class='input-group-addon input-group-button'>
<button type='submit' class='btn btn-secondary' value='2812Effect' name='2812Effect'>Set Effect</button>
</div>
</div>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group text-center' role='group'>
<button class='btn btn-secondary' type='submit' value='up' name='up'>Up</button>
<button class='btn btn-secondary' type='submit' value='down' name='down'>Down</button>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group text-center' role='group'>
<button class='btn btn-secondary' type='submit' value='ledOn' name='ledOn'>LED On</button>
<button class='btn btn-secondary' type='submit' value='ledOff' name='ledOff'>LED Off</button>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group text-center' role='group'>
<button class='btn btn-secondary btn-lg' type='submit' value='stop' name='stop'>Stop</button>
</div>
</div>
</form>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js' integrity='sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49' crossorigin='anonymous'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy' crossorigin='anonymous'></script>
</body>
</html>