How can I create a div/button with stacked text inside? - html

Question

I've been trying to figure out how to produce this in CSS:
However, when I've tried this thus far, it's only partially been on track:
How can I fix the below CSS and HTML so that it works as a stacked text meter properly? I do have Bootstrap, and I'm using SCSS/SASS.
A Pen with the same code, including the full menu, shows the same issue:
https://codepen.io/anon/pen/zLYWZR
.buFontSize {
font-size: 11px;
padding: 0px;
}
.pointButton {
display: block;
border: rgba(255, 255, 255, 0.534) 1px solid !important;
justify-content: center;
padding: 0px !important;
}
.buttonBlock {
display: block;
}
<nav class="navbar navbar-expand navbar-dark">
<div class="navbar" id="navbarText">
<a class="navbar-brand navBrand" href="#">Link One</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link Two</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link Three</a>
</li>
</ul>
<ul class="navbar-nav float-right">
<span class="btn pointButton">
<div class="buttonBlock">
<div class="row">
<span class="buFontSize">Games</span>
</div>
<div class="row">
<span class="buFontSize">100000</span>
</div>
</div>
</span>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas faSize fa-user-friends"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="far faSize fa-envelope"></i></a>
</li>
</ul>
</div>
</nav>

Answer 1

You can use a button group with a br:
body {
background-color: black !important; /* test only */
}
.btn-group .btn {
background: transparent;
color: #ffffff;
border: 1px solid #ffffff;
line-height:1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group">
<div class="btn">
Games<br>
10000
</div >
<div class="btn">
Points<br>
000000
</div >
</div>
Example bootply

Answer 2

.buFontSize {
font-size: 11px;
color: #fff;
padding: 0px;
}
.pointButton {
display: block;
border: rgba(255, 255, 255, 0.534) 1px solid;
background: #000;
justify-content: center;
padding: 0px;
}
.buttonBlock {
display: block;
padding: 0px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<span class="btn pointButton">
<div class="buttonBlock">
<div class="row mb-2">
<div class="col-md-12">
<span class="buFontSize">Games</span>
</div>
<div class="col-md-12">
<span class="buFontSize">100000</span>
</div>
</div>
</div>
</span>

Answer 3

try this
body{
background-color: black;
}
.buttonBlock{
float: left;
margin: 0;
padding: 0;
border: 1px solid white;
width: 120px;
text-align: center;
display: inline-block;
color: white;
}
.buttonBlock > span{
display: block;
}
.buttonBlock:first-child{
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-ms-border-radius: 5px 0 0 5px;
-o-border-radius: 5px 0 0 5px;
}
.buttonBlock:last-child{
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-ms-border-radius: 0 5px 5px 0;
-o-border-radius: 0 5px 5px 0;
}
.buttonBlock:not(:first-child){
border-left: 0;
}
<span class="btn pointButton">
<div class="buttonBlock">
<span class="title">First</span>
<span class="points">100000</span>
</div>
<div class="buttonBlock">
<span class="title">Second</span>
<span class="points">100000</span>
</div>
<div class="buttonBlock">
<span class="title">Third</span>
<span class="points">100000</span>
</div>
<div class="buttonBlock">
<span class="title">Fourth</span>
<span class="points">100000</span>
</div>
<div class="buttonBlock">
<span class="title">Fifth</span>
<span class="points">100000</span>
</div>
</span>

Answer 4

Maybe Use
.somewrapperclass{
display: flex;
flex-flow: wrap row;
align-items: flex-start;
}
Don't use display block as there is a better alternative, check this complete guide to flexbox