Creating a sleek and functional dashboard using HTML and leveraging the power of Bootstrap 4

I'm working on styling my HTML dashboard with Bootstrap 4. I want the text to be big and have minimal white space, but not too cluttered.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #table1 tr td {
            font-size: 100px;
        }

        .widgetLabel {
            font-size: 100px;
        }

        .mainNumber {
            font-size: 800px;
        }
    </style>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-3">
                <table id="table1" class="table table-bordered">
                    <tr><td><div>widget 1</div><div>55</div></td></tr>
                    <tr><td><div>widget 2</div><div>55</div></td></tr>
                    <tr><td><div>widget 3</div><div>55</div></td></tr>
                </table>
            </div>
            <div class="col-9 d-flex flex-column align-items-center justify-content-center">
                <div class="widgetLabel">Widget</div><div class="mainNumber">55</div>
            </div>
        </div>
    </div>
</body>
</html>

Image:

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

Any suggestions on achieving this look?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

This is nearly there - I didn't specifically search for a rounded font.

.block-of-things {
  font-size: 3em;
}

.custom-big-font {
  line-height: 0.5em; 
  font-size: 0.75em; 
}

.custom-huge-number {
  font-size: 5em; 
  line-height: 0.75em; 
}

.table.table-bordered {
  font-size: 2em;
}

.widget-header {
  background-color: #6AA84F; 
  font-size: 0.5em;
}

.widget-number {
  line-height: 0.9em!important; 
  font-size: 1.5em!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-4">
      <table class="table table-bordered">
        <tr>
          <td class="border border-secondary m-0 p-0">
            <div class="border border-secondary text-center text-white text-capitalize widget-header">widget a</div> 
            <div class="h1 m-0 p-0 font-weight-bold text-center widget-number">55</div> 
          </td> 
        </tr>  
        <tr class="m-0 p-0">
          <td class="border border-secondary m-0 p-0 w-25 container-fluid justify-content-center">
            <div class="border border-secondary text-center text-white text-capitalize widget-header">widget b</div> 
            <div class="h1 m-0 p-0 font-weight-bold text-center widget-number">55</div> 
          </td> 
        </tr>  
        <tr class="m-0 p-0">
          <td class="border border-secondary m-0 p-0 w-25 container-fluid justify-content-center">
            <div class="text-center text-white text-capitalize widget-header">widget c</div> 
            <div class="h1 m-0 p-0 font-weight-bold text-center widget-number">55</div> 
          </td> 
        </tr>
      </table> 
    </div> 
    <div class="border border-secondary block-of-things m-0 p-2 col-8 d-flex flex-column align-items-center justify-content-start">
      <div class="text-center m-0 p-0 custom-big-font">Widget</div> 
      <div class="m-0 p-0 font-weight-bold text-center custom-huge-number">55</div> 
    </div> 
  </div> 
</div>

Answer №2

Presented here is a Bootstrap 5 adaptation; in general, there are minimal discrepancies.

I made a small adjustment to accommodate the relatively large number '55' and ensured that the text above it aligns so the descender of the letter 'g' fits neatly with the number '55'.

.block-of-things {
  font-size: 3em;
}

.custom-big-font {
  font-weight: 400;
  line-height: 0.5em;
  font-size: 0.75em;
}

.custom-huge-number {
  font-weight: 500;
  font-size: 5em;
  line-height: 0.75em;
  margin-top: -10px;
}

.table.table-bordered {
  font-size: 2em;
}

.widget-header {
  background-color: #6AA84F;
  font-size: 0.5em;
}

.widget-number {
  line-height: 0.9em!important;
  font-size: 1.5em!important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b787f2e9f4e9f5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285d465b465a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-4">
      <table class="table table-bordered h-100">
        <tr>
          <td class="border border-secondary m-0 p-0">
            <div class="border border-secondary text-center text-white text-capitalize widget-header">widget a</div>
            <div class="h1 m-0 p-0 font-weight-bold text-center widget-number">55</div>
          </td>
        </tr>
        <tr class="m-0 p-0">
          <td class="border border-secondary m-0 p-0 w-25 container-fluid justify-content-center">
            <div class="border border-secondary text-center text-white text-capitalize widget-header">widget b</div>
            <div class="h1 m-0 p-0 font-weight-bold text-center widget-number">55</div>
          </td>
        </tr>
        <tr class="m-0 p-0">
          <td class="border border-secondary m-0 p-0 w-25 container-fluid justify-content-center">
            <div class="text-center text-white text-capitalize widget-header">widget c</div>
            <div class="h1 m-0 p-0 font-weight-bold text-center widget-number">55</div>
          </td>
        </tr>
      </table>
    </div>
    <div class="border border-secondary block-of-things m-0 p-3 col-8 d-flex flex-column align-items-center">
      <div class="text-center m-0 p-0 custom-big-font">Widget</div>
      <div class="p-0 font-weight-bold text-center custom-huge-number">55</div>
    </div>
  </div>
</div>

Answer №3

To make the font size adapt dynamically, simply attach an event listener to resize it accordingly.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #table1 tr td {
            font-size: 80px; /* Decrease font size */
            padding: 10px; /* Add padding for spacing */
        }

        .widgetLabel {
            font-size: 80px; /* Reduce font size */
            background-color: green; /* Green background */
            color: white; /* White text color for visibility */
            padding: 10px; /* Padding for appearance */
            text-align: center; /* Center horizontally */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%; /* Center vertically */
        }

        .mainNumber {
            font-size: 200px; /* Initial font size */
            max-height: 100%; /* Stay within parent height */
            overflow: hidden; /* Hide overflow if needed */
            display: flex;
            align-items: center;
            justify-content: center; /* Center both ways */
            margin: 0; /* Remove margin */
        }

        .right-widget-label {
            height: auto; /* Reset height */
            width: 100%;
        }

        /* Set container height to viewport height */
        .container-fluid {
            height: 100vh;
            display: grid;
            grid-template-columns: 1fr 3fr; /* Two columns grid */
        }

        /* Style left column */
        .left-column {
            display: flex;
            flex-direction: column;
            justify-content: top;
            align-items: center;
            margin:10px;
            height: 100vh;
        }

        /* Style right column */
        .right-column {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 1383px;
            margin:10px;
        }
    </style>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <div class="left-column">
            <table id="table1" class="table table-bordered">
                <tr><td><div class="widgetLabel">widget 1</div><div class="mainNumber">55</div></td></tr>
                <tr><td><div class="widgetLabel">widget 2</div><div class="mainNumber">55</div></td></tr>
                <tr><td><div class="widgetLabel">widget 3</div><div class="mainNumber">55</div></td></tr>
            </table>
        </div>
        <div class="right-column  table-bordered">
            <div class="widgetLabel right-widget-label">Widget</div>
            <div class="mainNumber" id="mainNumber">55</div>
        </div>
    </div>

    <script>
        // Dynamically adjust font size of main number using JavaScript
        window.addEventListener('resize', function() {
            var mainNumber = document.getElementById('mainNumber');
            var container = mainNumber.parentElement;
            var availableHeight = container.clientHeight;
            var fontSize = availableHeight * 0.9; // Adjust factor as needed
            mainNumber.style.fontSize = fontSize + 'px';
        });

        // Initial font size adjustment on page load
        window.dispatchEvent(new Event('resize'));
    </script>
</body>
</html>

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

Obtain user input from a form and assign it to a variable in a jQuery AJAX

How can I pass the value of an HTML Input Form to a jQuery AJAX call's URL as `amt` in `url: "http://localhost:8080/orderNo?amount=" + amt,`? The input value logs to the console when calling getAmtValue(), but I'm struggling to access the `amt` ...

javascriptjqueryhtmlajax

Is there a way to activate the width styling from one class to another?

I have these 2 elements in my webpage: //1st object <span class="ui-slider-handle" tabindex="0" style="left: 15.3153%;"></span> //2nd object <div id="waveform"> <wave style="display: block; position: relative; user-select: none; he ...

javascriptjqueryhtml

Ensure that input field is validated only upon clicking the save button in Angular framework

Can anyone suggest the most efficient method to validate required fields in an input form using AngularJS? I want to display an error message only after the user clicks the save button (submit). Thank you in advance. ...

javascripthtmlangularjsvalidation

What is the best way to ensure that the Bootstrap navbar remains collapsed at all times, regardless of the size of the

Is there a way to keep my Bootstrap navbar constantly collapsed regardless of the screen size? I'm currently using Bootstrap, and I've noticed that when the screen is larger, the navbar expands automatically. What can I do to ensure that the navb ...

cssnavbarbootstrap-5collapsable

How to extract a one-of-a-kind identification number from the browser using just JavaScript in a basic HTML file?

Is there a way to obtain a distinct identification number from a browser without resorting to techniques such as generating and storing a unique number in cookies or local storage, and without utilizing a server-side language? ...

javascripthtml

Submenu in submenu not registering CSS hover events

Currently, on a website project that I'm developing, there is a submenu nested within another submenu. Interestingly enough, the level-2 submenu happens to be taller than its parent level-1 submenu. To control the visibility of these submenus, I' ...

htmlcss

Strategies for resolving minor validation challenges (Almost complete, just a few finishing touches needed ...)

This question was originally posted in Spanish on es.stackoverflow.com by Julian Dumitrel: I had planned to make a record, step by step, where I had 3 different steps all within one <form>. After finishing my form validator successfully, I encounte ...

javascriptjqueryhtmlformsvalidation

Adding query strings to the end of a URL in order to redirect to a new destination

After successfully capturing a query string at the start of my survey with PHP syntax, I now have it stored in a variable. My next challenge is to redirect to a different URL at the end of the survey, while also including that same query string. For insta ...

phpjqueryhtmlajax

I encountered an error stating "angular not found" when attempting to dynamically load my Angular scripts

My Angular application is running smoothly. However, I found it tedious to include multiple script tags in my HTML documents every time. To simplify this process, I decided to create a small script that would automatically generate the necessary tags for m ...

javascripthtmlangularjs

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

There is a jQuery slider on my website that behaves strangely when I navigate away from the Chrome browser and return later. It seems to speed through all pending slides quickly when it was not visible. Now, I want the slider to pause when it becomes invi ...

javascripthtmljquerycss

Experience the full power of the bootstrap grid system with a unique feature: nested overflow-y scrolling

Struggling with the bootstrap grid and a nested div with overflow-y. I followed advice from this stack overflow post, attempting to add min-height:0 to the parent ancestor, but can't seem to make it work. View screenshot here - Chrome on the left, Fi ...

htmlcssbootstrap-4grid-layout

Reset all divs to their default state except for the one that is currently active using jQuery

Here's the plan for my script: Once a user clicks on a "learn more" button, it will reveal the relevant information in the corresponding box. I'm aiming to implement a feature where if you click on another "learn more" button while one box is a ...

javascriptjquerycsscss-selectors

Repairing the base navigation interface and correcting the hyperlink to redirect to a different webpage

Can anyone assist with aligning my bottom navigation bar and fixing a link issue on both navigation bars? I've been struggling to center it. Do you think using padding could solve the problem? I've tried guessing the pixel count, but to no avail ...

htmlcss

Instructions for creating a Google Maps overlay that hovers above the zoom bar

Let me share my workaround for creating an overlay and dealing with z-index issues when using Google Maps API. The problem arises when dragging the map and the overlay ends up behind control elements like the zoom bar. No matter how much I adjust the z-ind ...

cssgoogle-maps-api-3

How to Retrieve Multiple Values by Passing Arguments using AJAX, PHP, and MYSQL

I am currently working on developing an ajax Based Search feature. This is just a demo showing how it will function. However, I have encountered an issue with returning the results. I want to display the result twice, but it is only appearing once. Below i ...

phpmysqlhtmlajaxjquery

Why is it that in IE9, submitting a basic form using jQuery doesn't seem to work?

Take a look at the code snippet below: <html> <head> <style type="text/css"> #myform {display:none;} </style> </head> <body> <button type="button" id="uploadbutton">Upload Images</button> <form name="myf ...

javascriptjqueryhtmlforms

What are the steps to create a button with similar design using css3?

How can I create a button with the same lower part as shown in this picture? I've already achieved 50% of it with border-radius, but need help expanding the lower part to match. Any suggestions? https://i.sstatic.net/3ZJFS.jpg .list{ height: 280px; ...

htmlcssbuttoncss-shapes

What is the best method to insert multiple rows of the same height into a table cell in

My datatable is causing me trouble as I try to add more rows in the td after the Name column. The rows are not aligning properly, and I need a solution. I want these new rows to be aligned with each other, but the number of rows may vary based on user inp ...

htmlcsshtml-tabledatatable

Why is Chrome ignoring the flexbox CSS in the footer section of my website?

My footer flexbox CSS is working on various browsers and devices, but for some reason, Chrome on my iMac is not responding correctly. The website is www.batistaelectric.com. It works on my iPhone Chrome browser, Safari iPhone browser, iMac Safari browser, ...

htmlcssflexbox

Adjusting the tab size and space size to their default settings within VSCode

I'm currently facing an issue with my VSCode setup. I am trying to configure the space size to be equal to 1 and tab size to be equal to 2 as the default for every project. However, despite my efforts, it keeps reverting back to spaces: 4 for each new ...

htmlcssvisual-studio-code