What is the best way to design a div or button with text that is stacked on top of

I've been struggling to create this design using CSS:

https://i.sstatic.net/uRLKW.png

Although my attempts have not yielded the desired result, here's what I came up with so far:

https://i.sstatic.net/5uAwn.png

How can I adjust the CSS and HTML below to make it function as a properly stacked text meter? I have Bootstrap at my disposal and I'm working with SCSS/SASS.

A Pen containing the same code and full menu exhibits 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>

htmlcssbootstrap-4

Answer №1

One way to create a button group with line breaks is to use the following CSS:

body {
  background-color: black !important; /* testing purposes 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>

Check out this example on 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

give this a shot

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

Consider Utilizing 

.somewrapperclass{
    display: flex;
    flex-flow: wrap row;
    align-items: flex-start;
}

Avoid using display block and explore a more effective solution, refer to this comprehensive flexbox guide

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JavaScript or JQuery, move an image from one location to another by removing it and adding

Firstly, feel free to check out the JSFiddle example My task involves moving an image with the class "Full" after a div with the class "group-of-buttons" using JavaScript. Here is the snippet of HTML code: <img src="http://i.telegraph.co.uk/multimedia ...

javascriptjqueryhtmlcss

What is the best way to align the checkbox and label in a React form?

I've been struggling to align the labels next to the checkboxes on this form. I'm currently utilizing React with React-Hook-Form for validation and state management (you can find the code on GitHub: https://github.com/cipdv/ciprmt-mern/blob/main/ ...

cssreactjsformsreact-hook-form

Tips for scaling an image to perfectly fit the browser screen

I have spent a significant amount of time researching and coding, but I am still unable to get this seemingly trivial task to work. Here are the conditions: The browser window size is unknown, so any solution involving absolute pixel sizes will not work. ...

htmlcss

What is the best way to apply an animation class to a modal upon clicking a button?

When I click the "x" button on the modal, I want the animation to occur. However, what currently happens is that the modal closes without the animation. Then, upon reopening the modal, the animation occurs without any clicking involved. Below is my curren ...

javascripthtmlcssbootstrap-5

Is the order in which properties are executed always the same in CSS rules?

Have you ever wondered about the way browsers handle CSS properties within the same rule? The topic of rules precedence has been discussed at length, but this specific question focuses on the execution order by the browsers. In my view, I have always assu ...

cssproperties

ASP not recognizing AngularJS input states

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Staffing_Tool.Login" %> <!DOCTYPE html> <html> <head runat="server"> <script src="scripts/angular.min.js" type="text/javascript"></scr ...

htmlasp.netangularjs

Is it possible to dynamically assign and call functions through an Object in Angular 6?

I implemented a click handler for a button that is generated dynamically. Within the click handler function, I am invoking a callback function. However, I encountered an issue where an error message popped up stating that "Callback function is not a fu ...

javascripthtmlangularthis

Is it necessary to have authorization on a community website?

I'm currently revamping the website structure for a thriving open-source community. In order to combat potential spamming issues arising from a large number of members, I am considering offering certain options or features exclusively to authenticated ...

djangohtmlgithuboauthvs-web-site-project

Generating a QR code with a web link in Node.js

Currently, I am immersed in a project that requires me to generate a QR code with specific information using NodeJS. To kick things off, I've set up a canvas in HTML and transferred it to NodeJS. <canvas id="canvas" width="300" height="300">& ...

htmlnode.jsqr-code

Adding a MySQL-PHP combination programmatically

Currently, I am working on a custom HTML page that sends data to PHP variables which are then utilized to generate customized SQL queries. function load_table($db, $old_table, $startRow, $nameColumn, $ipColumn, $addressColumn, $cityColumn, $stateColumn, $ ...

phpmysqlhtmlsql

Choose dropdown option using Selenium

Struggling to choose an item from a dropdown menu using Selenium in a Java application. I've attempted different methods like Select, List < WebElement >, but no luck so far. Here's the HTML of the webpage: <div class="margin-top_2" ...

javahtmlseleniumselenium-webdriver

Is there a way I can add opacity to a div without impacting the other elements contained in it?

When I set the opacity of a div, it seems to affect all the other elements inside that div by making them transparent too. However, I am looking for a solution where the child elements do not inherit the opacity of their parent. Any assistance on this is ...

css

What is the best way to retrieve the attribute value of the parent tag within a function?

Below is the html structure in question: <script> function process(){ //how to get attribute window.allert(attr); } </script> <div attr="234234"> <div onclick="process()">some content</div> </d ...

javascriptjqueryhtmldom

Tips for replicating a directive with isolated scopes

Is there a way to transfer the text entered in my directives to $scope.output = [] when using ng-submit? Take a look at the live code: JSFiddle I've developed an anchor and attribute directive <a href="" data-clicker>add section</a> that ...

javascriptjqueryhtmlangularjs

Issue with .html causing .hover to malfunction

Attempting a basic image rollover using jQuery, I've encountered an issue with the code below: HTML: <div class="secondcircle" id="circleone"> <p> <img src="/../ex/img/group1.png"> </p> </div> JS: $("# ...

javascriptjqueryhtml

Delay the page briefly before redirecting

I want to implement a feature on my WordPress website where after successfully submitting a form, the visitor is shown a message like 'form submitted successfully' for a few seconds before being redirected back to the page they were on. The redir ...

phpjavascripthtmlwordpress

Combine all alt values of html tags within a selenium Webelement into a single string

What is the best way to extract all alt values from img tags and convert them into a sentence while preserving the order of surrounding text: (Note: the number of img tags between the texts may vary) <img alt="one"> Bobby gave: <img alt ...

pythonhtmlseleniumweb-scraping

Rotate the text 180 degrees on hover using either jquery or css

One of our clients is requesting a flip effect on the menu items of their website. When hovered over, the items should flip upside down on the horizontal axis and then return to their original position. An example similar to what they're looking for c ...

jquerycsstextflip

Unleash the Power of Animating Your Active Tabs

Is there a way to create animated tabs that slide in when clicked? I've experimented with using transition code but haven't quite achieved the desired effect yet. This is what I currently have: [data-tab-info] { display: non ...

javascripthtmlcss

Is there another way to retrieve a marketplace's product details using code?

When it comes to scraping products from various websites, I have discovered a clever method using window.runParams.data in the Chrome console. This allows me to easily access all the information without having to go through countless clicks to extract it f ...

javascriptpythonhtmlweb-scraping