Full width header on box-like elements in html/css

Question

I am trying to replicate the Admin LTE's Box using scss (saas) and Bootstrap 4:

My code to achieve that is the following (I had to place the compiled css to the example) and can be found on my codepen as well:

 .box { position: relative; margin: 2px; border: 1px solid black; border-radius: 5px; /*Header*/ } .box .box-header { display: block; position: relative; box-sizing: border-box; height: 3em; border-bottom: 1px solid black; /* Wrapper For Button Groups */ } .box .box-header h1, .box .box-header h2, .box .box-header h3, .box .box-header h4, .box .box-header h5, .box .box-header h6 { display: inline-block; font-size: 2em; float: left; line-height: 2em; } .box .box-header .box-toolbox { position: absolute; top: 5px; right: 10px; display: inline-block; float: right; } .box .box-header.bg-primary h1, .box .box-header.bg-primary h2, .box .box-header.bg-primary h3, .box .box-header.bg-primary h4, .box .box-header.bg-primary h5, .box .box-header.bg-primary h6 { color: #fdfdfd; } .box .box-footer { display: block; position: relative; border-top: 1px solid black; } .box .box-content { display: block; position: relative; width: 100%; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="box col"> <div class="box-header bg-primary"> <h1>Title</h1> <div class="box-toolbox"> <div class="btn-group" role="group" aria-label="Box Icons"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> </div> </div> <div class="box-content">Dolorem veritatis provident ut et. A aut et sapiente accusamus et alias. Deserunt voluptatem et ipsam accusantium est. Est enim esse nihil dolorem. Deserunt assumenda error sit soluta.Facilis sint eveniet possimus magnam. Magni laudantium quasi a praesentium et a. Alias consequatur corrupti non consequatur qui vitae necessitatibus et. Occaecati et aliquid et. Architecto eveniet aspernatur pariatur quia laborum. Itaque cumque magnam impedit inventore reprehenderit dolor atque mollitia.Aut commodi ducimus porro. Porro et non alias aperiam dolorum veniam quo. Provident dolores veniam eum.Qui reprehenderit quam dolorum qui incidunt voluptates aut. Iure rerum eius molestias voluptatem quo laudantium nobis. Ex animi temporibus velit laborum at est odit pariatur.Laborum qui qui impedit eum. Non eos quo rem dolor quibusdam et. Amet dolorem magni vitae sequi deserunt et officia rem. Aspernatur harum non repellat omnis a commodi quo ipsum. Non ea quod recusandae id. Est iure corporis quisquam laboriosam aut. </div> <div class="box-footer"> footer </div> </div> <div class="box col"> <div class="box-header bg-primary"> <h1>Title</h1> <div class="box-toolbox"> <div class="btn-group" role="group" aria-label="Box Icons"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> </div> </div> <div class="box-content">Dolorem veritatis provident ut et. A aut et sapiente accusamus et alias. Deserunt voluptatem et ipsam accusantium est. Est enim esse nihil dolorem. Deserunt assumenda error sit soluta.Facilis sint eveniet possimus magnam. Magni laudantium quasi a praesentium et a. Alias consequatur corrupti non consequatur qui vitae necessitatibus et. Occaecati et aliquid et. Architecto eveniet aspernatur pariatur quia laborum. Itaque cumque magnam impedit inventore reprehenderit dolor atque mollitia.Aut commodi ducimus porro. Porro et non alias aperiam dolorum veniam quo. Provident dolores veniam eum.Qui reprehenderit quam dolorum qui incidunt voluptates aut. Iure rerum eius molestias voluptatem quo laudantium nobis. Ex animi temporibus velit laborum at est odit pariatur.Laborum qui qui impedit eum. Non eos quo rem dolor quibusdam et. Amet dolorem magni vitae sequi deserunt et officia rem. Aspernatur harum non repellat omnis a commodi quo ipsum. Non ea quod recusandae id. Est iure corporis quisquam laboriosam aut. </div> <div class="box-footer"> footer </div> </div> </div> </div>

My problem is that the header does not take up the whole width header as can be seen on the following images:

And the original view of the box (without the explanatory arrows):

How can I trim this space off?

Answer 1

You could add "p-0" class to the "box col" div. I think the space is from bootstrap's padding of col.

EDIT:

    <div class="box col p-0">

Answer 2

Updated answer. You can change width of box-content according to your requirements.

 .box { position: relative; margin: 2px; border: 1px solid black; border-radius: 5px; /*Header*/ } .box .box-header { display: block; position: relative; box-sizing: border-box; height: 3em; border-bottom: 1px solid black; /* Wrapper For Button Groups */ } .box .box-header h1, .box .box-header h2, .box .box-header h3, .box .box-header h4, .box .box-header h5, .box .box-header h6 { display: inline-block; font-size: 2em; float: left; line-height: 2em; } .box .box-header .box-toolbox { position: absolute; top: 5px; right: 10px; display: inline-block; float: right; } .box .box-header.bg-primary h1, .box .box-header.bg-primary h2, .box .box-header.bg-primary h3, .box .box-header.bg-primary h4, .box .box-header.bg-primary h5, .box .box-header.bg-primary h6 { color: #fdfdfd; } .box .box-footer { display: block; position: relative; border-top: 1px solid black; } .box .box-content { display: block; position: relative; width: 80%; /* Change this as per your requirement */ margin-left:auto; margin-right:auto; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="container-fluid"> <div class="row"> <div class="box col p-0"> <div class="box-header bg-primary"> <h1>Title</h1> <div class="box-toolbox"> <div class="btn-group" role="group" aria-label="Box Icons"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> </div> </div> <div class="box-content">Dolorem veritatis provident ut et. A aut et sapiente accusamus et alias. Deserunt voluptatem et ipsam accusantium est. Est enim esse nihil dolorem. Deserunt assumenda error sit soluta.Facilis sint eveniet possimus magnam. Magni laudantium quasi a praesentium et a. Alias consequatur corrupti non consequatur qui vitae necessitatibus et. Occaecati et aliquid et. Architecto eveniet aspernatur pariatur quia laborum. Itaque cumque magnam impedit inventore reprehenderit dolor atque mollitia.Aut commodi ducimus porro. Porro et non alias aperiam dolorum veniam quo. Provident dolores veniam eum.Qui reprehenderit quam dolorum qui incidunt voluptates aut. Iure rerum eius molestias voluptatem quo laudantium nobis. Ex animi temporibus velit laborum at est odit pariatur.Laborum qui qui impedit eum. Non eos quo rem dolor quibusdam et. Amet dolorem magni vitae sequi deserunt et officia rem. Aspernatur harum non repellat omnis a commodi quo ipsum. Non ea quod recusandae id. Est iure corporis quisquam laboriosam aut. </div> <div class="box-footer"> footer </div> </div> <div class="box col p-0"> <div class="box-header bg-primary"> <h1>Title</h1> <div class="box-toolbox"> <div class="btn-group" role="group" aria-label="Box Icons"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> </div> </div> <div class="box-content">Dolorem veritatis provident ut et. A aut et sapiente accusamus et alias. Deserunt voluptatem et ipsam accusantium est. Est enim esse nihil dolorem. Deserunt assumenda error sit soluta.Facilis sint eveniet possimus magnam. Magni laudantium quasi a praesentium et a. Alias consequatur corrupti non consequatur qui vitae necessitatibus et. Occaecati et aliquid et. Architecto eveniet aspernatur pariatur quia laborum. Itaque cumque magnam impedit inventore reprehenderit dolor atque mollitia.Aut commodi ducimus porro. Porro et non alias aperiam dolorum veniam quo. Provident dolores veniam eum.Qui reprehenderit quam dolorum qui incidunt voluptates aut. Iure rerum eius molestias voluptatem quo laudantium nobis. Ex animi temporibus velit laborum at est odit pariatur.Laborum qui qui impedit eum. Non eos quo rem dolor quibusdam et. Amet dolorem magni vitae sequi deserunt et officia rem. Aspernatur harum non repellat omnis a commodi quo ipsum. Non ea quod recusandae id. Est iure corporis quisquam laboriosam aut. </div> <div class="box-footer"> footer </div> </div> </div> </div>

Answer 3

Full width header and boxed content can't be achieved if both are in same container. An easy solution is to put header HTML out of the container.

    .box {
      position: relative;
      margin: 2px;
      border: 1px solid black;
      border-radius: 5px;
      /*Header*/
    }
    .box .box-header {
      display: block;
      position: relative;
      box-sizing: border-box;
      height: 3em;
      border-bottom: 1px solid black;
      /* Wrapper For Button Groups */
    }
    .box .box-header h1, .box .box-header h2, .box .box-header h3, .box .box-header h4, .box .box-header h5, .box .box-header h6 {
      display: inline-block;
      font-size: 2em;
      float: left;
      line-height: 2em;
    }
    .box .box-header .box-toolbox {
      position: absolute;
      top: 5px;
      right: 10px;
      display: inline-block;
      float: right;
    }
    .box .box-header.bg-primary h1, .box .box-header.bg-primary h2, .box .box-header.bg-primary h3, .box .box-header.bg-primary h4, .box .box-header.bg-primary h5, .box .box-header.bg-primary h6 {
      color: #fdfdfd;
    }
    .box .box-footer {
      display: block;
      position: relative;
      border-top: 1px solid black;
    }
    .box .box-content {
      display: block;
      position: relative;
      width: 100%;
    }

<!-- language: lang-html -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="box-header bg-primary">
  <h1>Title</h1>
  <div class="box-toolbox">
    <div class="btn-group" role="group" aria-label="Box Icons">
      <button type="button" class="btn btn-secondary">1</button>
      <button type="button" class="btn btn-secondary">2</button>
      <button type="button" class="btn btn-secondary">3</button>
      <button type="button" class="btn btn-secondary">4</button>
   </div>
</div>
          </div>

    <div class="container">
      <div class="row">
        <div class="box col">
          <div class="box-content">Dolorem veritatis provident ut et. A aut et sapiente accusamus et alias. Deserunt voluptatem et ipsam accusantium est. Est enim esse nihil dolorem. Deserunt assumenda error sit soluta.Facilis sint eveniet possimus magnam. Magni laudantium quasi
            a praesentium et a. Alias consequatur corrupti non consequatur qui vitae necessitatibus et. Occaecati et aliquid et. Architecto eveniet aspernatur pariatur quia laborum. Itaque cumque magnam impedit inventore reprehenderit dolor atque mollitia.Aut
            commodi ducimus porro. Porro et non alias aperiam dolorum veniam quo. Provident dolores veniam eum.Qui reprehenderit quam dolorum qui incidunt voluptates aut. Iure rerum eius molestias voluptatem quo laudantium nobis. Ex animi temporibus velit
            laborum at est odit pariatur.Laborum qui qui impedit eum. Non eos quo rem dolor quibusdam et. Amet dolorem magni vitae sequi deserunt et officia rem. Aspernatur harum non repellat omnis a commodi quo ipsum. Non ea quod recusandae id. Est iure
            corporis quisquam laboriosam aut.
          </div>
          <div class="box-footer">
            footer
          </div>
        </div>
      </div>
    </div>