How to make a rectangle centered AND responsive with Bootstrap? - html

Question

I'm trying to make a board-game adoption for web.
I want to use Bootstrap to make the elements responsive.
The main element of the game is a rectangle (the game board). This shall appear centered in all display-sizes and with a bit of margin to all sides.
Which attributes and CSS-rules do I have to apply?
Shall I use a normal container or container-fluid?
Would it be enough to make one column within the container / row and give it a class of "col-xs-12"?
As far as I know this would be applied to all devices beginning from the smallest to the largest upwards.
What I have tried so far:
html, body {
height: 100%;
}
.container {
margin: 10px auto;
height: 100%;
display: flex;
justify-content: center;
background-color: #ababab;
}
.row {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.board {
margin: 10px;
height: 400px;
width: calc(100% - 40px);
background-color: teal;
border: 1px solid black;
font-size: 2.5em;
font-weight: bold;
color: white;
text-align: center;
line-height: 400px;
}
<div class="container">
<div class="row">
<div class="col-xs-12 board">The game-board</div>
</div>
</div>

Answer 1

Here you can see an example : you dont need col-xs-12 . You have only to set contaier-fluid in the parent and some padding in div wrapper with box-sizing:border-box . Row is for reset the standard padding of container and col classes with negative margin. It's your decision if you want to .
html,body{height:100%;margin:0;padding:0;}
.container-fluid,.row{height:100%;background-color:grey}
.board-container{padding:40px;box-sizing:border-box}
.board{background-color:teal;height:100%;padding:40px;}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row board-container">
<div class="board">Board Game</div>
</div>
</div>

Answer 2

html, body {
height: 100%;
}
.container {
margin: 10px auto;
height: 100%;
display: flex;
justify-content: center;
background-color: #ababab;
}
.row {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.board {
margin: 10px;
height: calc(100% - 40px);;
width: calc(100% - 40px);
background-color: teal;
border: 1px solid black;
font-size: 2.5em;
font-weight: bold;
color: white;
text-align: center;
}
<div class="container">
<div class="row">
<div class="col-xs-12 board">The game-board</div>
</div>
</div>

Answer 3

html,body{
height:100%;
background:#FF3366;
}
.container {
width:100%;
height:100%;
}
.row{
height:100%;
margin:30px 30px 30px 30px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: teal;
border: 1px solid black;
font-size: 2.5em;
font-weight: bold;
color: white;
}
<div class="container">
<div class="row">
<div class="col-xs-12">The game-board</div>
</div>
</div>
Try this one.