Designing my dashboard in html page with bootstrap 4

Rod
October 9, 2023
137 views
0 votes
2 Answers

I need help please, styling my html dashboard using Bootstrap 4.

Image below code is what I would like it look like.

In other words, I’d like the text to be as big as possible and with very little white space if possible and where doesn’t look to jumbled together.

<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>

Answers

You can add an event listener to resize the font size dynamically.

<!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 the font size */
            padding: 10px; /* Add padding for better spacing */
        }

        .widgetLabel {
            font-size: 80px; /* Decrease the font size */
            background-color: green; /* Add green background color */
            color: white; /* Set text color to white for visibility */
            padding: 10px; /* Add padding for better appearance */
            text-align: center; /* Center text horizontally */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%; /* Center text vertically */
        }

        .mainNumber {
            font-size: 200px; /* Initial font size */
            max-height: 100%; /* Ensure it doesn't exceed parent height */
            overflow: hidden; /* Hide overflow if necessary */
            display: flex;
            align-items: center;
            justify-content: center; /* Center main number both vertically and horizontally */
            margin: 0; /* Remove margin to reduce space */
        }

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

        /* Set container height to 100vh (viewport height) */
        .container-fluid {
            height: 100vh;
            display: grid;
            grid-template-columns: 1fr 3fr; /* Define a grid with two columns */
        }

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

        /* Style the 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>
        // JavaScript to dynamically adjust the font size of mainNumber
        window.addEventListener('resize', function() {
            var mainNumber = document.getElementById('mainNumber');
            var container = mainNumber.parentElement;
            var availableHeight = container.clientHeight;
            var fontSize = availableHeight * 0.9; // Adjust the factor as needed
            mainNumber.style.fontSize = fontSize + 'px';
        });

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

This is pretty close – I did not go find a rounded looking font however.

.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>

Please signup or login to give your own answer.

Click here to cancel reply.