Search code examples
htmlcsstwitter-bootstrapbootstrap-4

Designing my dashboard in HTML page with Bootstrap 4


I am styling my HTML dashboard using Bootstrap 4. The image below the 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>

Image:

enter image description here

How can I achieve this?


Solution

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