Make header take over the same width as the box below has

up vote
0
down vote

favorite

I have the following page where I have a header and bellow some boxes:

.bg-secondary-light {

  background-color: #ecf0f5;

}



#content-wrapper {

  min-height: 100vh;

  position: relative;

  margin-top: 59.5px;

}



#main_content {

  height: 100%;

  background-color: #ecf0f5;

}



#main_content main {

  background-color: #ecf0f5;

}



@media (min-width: 992px) {

  #main_content {

    width: 100%;

  }

}



@media (min-width: 992px) {

  #main_content.full_width {

    margin-left: 0px;

    width: 100%;

  }

}



#main_content {

  width: 100%;

}





/*############# Theme Element: BOX ##########*/



.box {

  position: relative;

  border: 1px solid black;

  border-radius: 5px;

  padding: 0 !important;

  background-color: white;

  /*Header*/

}



.box .box-header {

  display: block;

  position: relative;

  box-sizing: border-box;

  height: 3em;

  border-bottom: 1px solid black;

  padding: 0 !important;

  height: 1em;

  /* Wrapper For Button Groups */

}



@media (min-width: 576px) {

  .box .box-header {

    height: 2em;

  }

}



@media (min-width: 768px) {

  .box .box-header {

    height: 3em;

  }

}



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

  float: left;

  line-height: 2em;

  margin-left: 4px;

  line-height: 0.9em;

  font-size: 0.9em;

}



@media (min-width: 576px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    line-height: 2em;

    font-size: 1.1em;

  }

}



@media (min-width: 768px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    font-size: 2em;

    font-size: 2em;

  }

}



.box .box-header .box-toolbox {

  position: absolute;

  top: 5px;

  right: 10px;

  float: right;

  display: none;

}



@media (min-width: 768px) {

  .box .box-header .box-toolbox {

    display: inline-block;

  }

}



.box .box-footer {

  display: block;

  position: relative;

  border-top: 1px solid black;

  clear: both;

}



.box .box-content {

  display: block;

  position: relative;

  width: 100%;

  clear: both;

}



.box .box-content.box-text {

  padding-left: 5px;

  padding-right: 5px;

}





/*Headers*/



.title-wrapper {

  border-bottom: 1px solid;

  padding: 0;

  margin: 0;

}



.title-wrapper h1,

.title-wrapper h2,

.title-wrapper h3,

.title-wrapper h4,

.title-wrapper h5,

.title-wrapper h6 {

  margin: 0;

}

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



<!-- main content -->

<div id="main_content" class="d-flex">

  <main class="container-fluid m-1">

    <section>



      <div class="w-100 title-wrapper mb-1">

        <h1>Basic Boxes</h1>

      </div>



      <div class="row mb-1">

        <div class="box col">

          <div class="box-header">

            <h2>Full width Box with toolbox</h2>

            <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 text-center w-100">I take over the whole container width.</div>

          <div class="box-footer">

            footer

          </div>

        </div>

        <!-- /box -->

      </div>

      <!-- /row -->



      <div class="row flex-nowrap mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-primary">

              <h2>Info Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-info">

              <h2>Primary Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-success">

              <h2>Sucess Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-danger">

              <h2>Danger Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row">



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-warning">

              <h2>Warning Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-dark">

              <h2>Dark Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

      </div>

      <!-- /row -->



    </section>

  </main>



</div>

<!-- /main-content -->



</div>

<!-- /content-wrapper -->

But the header is not as wide as the boxes as seen in the following image:

Header and the box

Do you know how I can fix that?

edited Nov 10 at 21:53

asked Nov 10 at 21:45

Dimitrios Desyllas

1,83111342

header needs to be in a row
– ksav
Nov 10 at 21:58

add a comment |

up vote
0
down vote

favorite

I have the following page where I have a header and bellow some boxes:

.bg-secondary-light {

  background-color: #ecf0f5;

}



#content-wrapper {

  min-height: 100vh;

  position: relative;

  margin-top: 59.5px;

}



#main_content {

  height: 100%;

  background-color: #ecf0f5;

}



#main_content main {

  background-color: #ecf0f5;

}



@media (min-width: 992px) {

  #main_content {

    width: 100%;

  }

}



@media (min-width: 992px) {

  #main_content.full_width {

    margin-left: 0px;

    width: 100%;

  }

}



#main_content {

  width: 100%;

}





/*############# Theme Element: BOX ##########*/



.box {

  position: relative;

  border: 1px solid black;

  border-radius: 5px;

  padding: 0 !important;

  background-color: white;

  /*Header*/

}



.box .box-header {

  display: block;

  position: relative;

  box-sizing: border-box;

  height: 3em;

  border-bottom: 1px solid black;

  padding: 0 !important;

  height: 1em;

  /* Wrapper For Button Groups */

}



@media (min-width: 576px) {

  .box .box-header {

    height: 2em;

  }

}



@media (min-width: 768px) {

  .box .box-header {

    height: 3em;

  }

}



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

  float: left;

  line-height: 2em;

  margin-left: 4px;

  line-height: 0.9em;

  font-size: 0.9em;

}



@media (min-width: 576px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    line-height: 2em;

    font-size: 1.1em;

  }

}



@media (min-width: 768px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    font-size: 2em;

    font-size: 2em;

  }

}



.box .box-header .box-toolbox {

  position: absolute;

  top: 5px;

  right: 10px;

  float: right;

  display: none;

}



@media (min-width: 768px) {

  .box .box-header .box-toolbox {

    display: inline-block;

  }

}



.box .box-footer {

  display: block;

  position: relative;

  border-top: 1px solid black;

  clear: both;

}



.box .box-content {

  display: block;

  position: relative;

  width: 100%;

  clear: both;

}



.box .box-content.box-text {

  padding-left: 5px;

  padding-right: 5px;

}





/*Headers*/



.title-wrapper {

  border-bottom: 1px solid;

  padding: 0;

  margin: 0;

}



.title-wrapper h1,

.title-wrapper h2,

.title-wrapper h3,

.title-wrapper h4,

.title-wrapper h5,

.title-wrapper h6 {

  margin: 0;

}

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



<!-- main content -->

<div id="main_content" class="d-flex">

  <main class="container-fluid m-1">

    <section>



      <div class="w-100 title-wrapper mb-1">

        <h1>Basic Boxes</h1>

      </div>



      <div class="row mb-1">

        <div class="box col">

          <div class="box-header">

            <h2>Full width Box with toolbox</h2>

            <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 text-center w-100">I take over the whole container width.</div>

          <div class="box-footer">

            footer

          </div>

        </div>

        <!-- /box -->

      </div>

      <!-- /row -->



      <div class="row flex-nowrap mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-primary">

              <h2>Info Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-info">

              <h2>Primary Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-success">

              <h2>Sucess Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-danger">

              <h2>Danger Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row">



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-warning">

              <h2>Warning Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-dark">

              <h2>Dark Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

      </div>

      <!-- /row -->



    </section>

  </main>



</div>

<!-- /main-content -->



</div>

<!-- /content-wrapper -->

But the header is not as wide as the boxes as seen in the following image:

Header and the box

Do you know how I can fix that?

edited Nov 10 at 21:53

asked Nov 10 at 21:45

Dimitrios Desyllas

1,83111342

header needs to be in a row
– ksav
Nov 10 at 21:58

add a comment |

up vote
0
down vote

favorite

I have the following page where I have a header and bellow some boxes:

.bg-secondary-light {

  background-color: #ecf0f5;

}



#content-wrapper {

  min-height: 100vh;

  position: relative;

  margin-top: 59.5px;

}



#main_content {

  height: 100%;

  background-color: #ecf0f5;

}



#main_content main {

  background-color: #ecf0f5;

}



@media (min-width: 992px) {

  #main_content {

    width: 100%;

  }

}



@media (min-width: 992px) {

  #main_content.full_width {

    margin-left: 0px;

    width: 100%;

  }

}



#main_content {

  width: 100%;

}





/*############# Theme Element: BOX ##########*/



.box {

  position: relative;

  border: 1px solid black;

  border-radius: 5px;

  padding: 0 !important;

  background-color: white;

  /*Header*/

}



.box .box-header {

  display: block;

  position: relative;

  box-sizing: border-box;

  height: 3em;

  border-bottom: 1px solid black;

  padding: 0 !important;

  height: 1em;

  /* Wrapper For Button Groups */

}



@media (min-width: 576px) {

  .box .box-header {

    height: 2em;

  }

}



@media (min-width: 768px) {

  .box .box-header {

    height: 3em;

  }

}



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

  float: left;

  line-height: 2em;

  margin-left: 4px;

  line-height: 0.9em;

  font-size: 0.9em;

}



@media (min-width: 576px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    line-height: 2em;

    font-size: 1.1em;

  }

}



@media (min-width: 768px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    font-size: 2em;

    font-size: 2em;

  }

}



.box .box-header .box-toolbox {

  position: absolute;

  top: 5px;

  right: 10px;

  float: right;

  display: none;

}



@media (min-width: 768px) {

  .box .box-header .box-toolbox {

    display: inline-block;

  }

}



.box .box-footer {

  display: block;

  position: relative;

  border-top: 1px solid black;

  clear: both;

}



.box .box-content {

  display: block;

  position: relative;

  width: 100%;

  clear: both;

}



.box .box-content.box-text {

  padding-left: 5px;

  padding-right: 5px;

}





/*Headers*/



.title-wrapper {

  border-bottom: 1px solid;

  padding: 0;

  margin: 0;

}



.title-wrapper h1,

.title-wrapper h2,

.title-wrapper h3,

.title-wrapper h4,

.title-wrapper h5,

.title-wrapper h6 {

  margin: 0;

}

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



<!-- main content -->

<div id="main_content" class="d-flex">

  <main class="container-fluid m-1">

    <section>



      <div class="w-100 title-wrapper mb-1">

        <h1>Basic Boxes</h1>

      </div>



      <div class="row mb-1">

        <div class="box col">

          <div class="box-header">

            <h2>Full width Box with toolbox</h2>

            <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 text-center w-100">I take over the whole container width.</div>

          <div class="box-footer">

            footer

          </div>

        </div>

        <!-- /box -->

      </div>

      <!-- /row -->



      <div class="row flex-nowrap mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-primary">

              <h2>Info Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-info">

              <h2>Primary Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-success">

              <h2>Sucess Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-danger">

              <h2>Danger Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row">



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-warning">

              <h2>Warning Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-dark">

              <h2>Dark Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

      </div>

      <!-- /row -->



    </section>

  </main>



</div>

<!-- /main-content -->



</div>

<!-- /content-wrapper -->

But the header is not as wide as the boxes as seen in the following image:

Header and the box

Do you know how I can fix that?

edited Nov 10 at 21:53

asked Nov 10 at 21:45

Dimitrios Desyllas

1,83111342

I have the following page where I have a header and bellow some boxes:

.bg-secondary-light {

  background-color: #ecf0f5;

}



#content-wrapper {

  min-height: 100vh;

  position: relative;

  margin-top: 59.5px;

}



#main_content {

  height: 100%;

  background-color: #ecf0f5;

}



#main_content main {

  background-color: #ecf0f5;

}



@media (min-width: 992px) {

  #main_content {

    width: 100%;

  }

}



@media (min-width: 992px) {

  #main_content.full_width {

    margin-left: 0px;

    width: 100%;

  }

}



#main_content {

  width: 100%;

}





/*############# Theme Element: BOX ##########*/



.box {

  position: relative;

  border: 1px solid black;

  border-radius: 5px;

  padding: 0 !important;

  background-color: white;

  /*Header*/

}



.box .box-header {

  display: block;

  position: relative;

  box-sizing: border-box;

  height: 3em;

  border-bottom: 1px solid black;

  padding: 0 !important;

  height: 1em;

  /* Wrapper For Button Groups */

}



@media (min-width: 576px) {

  .box .box-header {

    height: 2em;

  }

}



@media (min-width: 768px) {

  .box .box-header {

    height: 3em;

  }

}



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

  float: left;

  line-height: 2em;

  margin-left: 4px;

  line-height: 0.9em;

  font-size: 0.9em;

}



@media (min-width: 576px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    line-height: 2em;

    font-size: 1.1em;

  }

}



@media (min-width: 768px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    font-size: 2em;

    font-size: 2em;

  }

}



.box .box-header .box-toolbox {

  position: absolute;

  top: 5px;

  right: 10px;

  float: right;

  display: none;

}



@media (min-width: 768px) {

  .box .box-header .box-toolbox {

    display: inline-block;

  }

}



.box .box-footer {

  display: block;

  position: relative;

  border-top: 1px solid black;

  clear: both;

}



.box .box-content {

  display: block;

  position: relative;

  width: 100%;

  clear: both;

}



.box .box-content.box-text {

  padding-left: 5px;

  padding-right: 5px;

}





/*Headers*/



.title-wrapper {

  border-bottom: 1px solid;

  padding: 0;

  margin: 0;

}



.title-wrapper h1,

.title-wrapper h2,

.title-wrapper h3,

.title-wrapper h4,

.title-wrapper h5,

.title-wrapper h6 {

  margin: 0;

}

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



<!-- main content -->

<div id="main_content" class="d-flex">

  <main class="container-fluid m-1">

    <section>



      <div class="w-100 title-wrapper mb-1">

        <h1>Basic Boxes</h1>

      </div>



      <div class="row mb-1">

        <div class="box col">

          <div class="box-header">

            <h2>Full width Box with toolbox</h2>

            <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 text-center w-100">I take over the whole container width.</div>

          <div class="box-footer">

            footer

          </div>

        </div>

        <!-- /box -->

      </div>

      <!-- /row -->



      <div class="row flex-nowrap mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-primary">

              <h2>Info Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-info">

              <h2>Primary Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-success">

              <h2>Sucess Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-danger">

              <h2>Danger Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row">



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-warning">

              <h2>Warning Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-dark">

              <h2>Dark Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

      </div>

      <!-- /row -->



    </section>

  </main>



</div>

<!-- /main-content -->



</div>

<!-- /content-wrapper -->

But the header is not as wide as the boxes as seen in the following image:

Header and the box

Do you know how I can fix that?

.bg-secondary-light {

  background-color: #ecf0f5;

}



#content-wrapper {

  min-height: 100vh;

  position: relative;

  margin-top: 59.5px;

}



#main_content {

  height: 100%;

  background-color: #ecf0f5;

}



#main_content main {

  background-color: #ecf0f5;

}



@media (min-width: 992px) {

  #main_content {

    width: 100%;

  }

}



@media (min-width: 992px) {

  #main_content.full_width {

    margin-left: 0px;

    width: 100%;

  }

}



#main_content {

  width: 100%;

}





/*############# Theme Element: BOX ##########*/



.box {

  position: relative;

  border: 1px solid black;

  border-radius: 5px;

  padding: 0 !important;

  background-color: white;

  /*Header*/

}



.box .box-header {

  display: block;

  position: relative;

  box-sizing: border-box;

  height: 3em;

  border-bottom: 1px solid black;

  padding: 0 !important;

  height: 1em;

  /* Wrapper For Button Groups */

}



@media (min-width: 576px) {

  .box .box-header {

    height: 2em;

  }

}



@media (min-width: 768px) {

  .box .box-header {

    height: 3em;

  }

}



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

  float: left;

  line-height: 2em;

  margin-left: 4px;

  line-height: 0.9em;

  font-size: 0.9em;

}



@media (min-width: 576px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    line-height: 2em;

    font-size: 1.1em;

  }

}



@media (min-width: 768px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    font-size: 2em;

    font-size: 2em;

  }

}



.box .box-header .box-toolbox {

  position: absolute;

  top: 5px;

  right: 10px;

  float: right;

  display: none;

}



@media (min-width: 768px) {

  .box .box-header .box-toolbox {

    display: inline-block;

  }

}



.box .box-footer {

  display: block;

  position: relative;

  border-top: 1px solid black;

  clear: both;

}



.box .box-content {

  display: block;

  position: relative;

  width: 100%;

  clear: both;

}



.box .box-content.box-text {

  padding-left: 5px;

  padding-right: 5px;

}





/*Headers*/



.title-wrapper {

  border-bottom: 1px solid;

  padding: 0;

  margin: 0;

}



.title-wrapper h1,

.title-wrapper h2,

.title-wrapper h3,

.title-wrapper h4,

.title-wrapper h5,

.title-wrapper h6 {

  margin: 0;

}

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



<!-- main content -->

<div id="main_content" class="d-flex">

  <main class="container-fluid m-1">

    <section>



      <div class="w-100 title-wrapper mb-1">

        <h1>Basic Boxes</h1>

      </div>



      <div class="row mb-1">

        <div class="box col">

          <div class="box-header">

            <h2>Full width Box with toolbox</h2>

            <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 text-center w-100">I take over the whole container width.</div>

          <div class="box-footer">

            footer

          </div>

        </div>

        <!-- /box -->

      </div>

      <!-- /row -->



      <div class="row flex-nowrap mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-primary">

              <h2>Info Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-info">

              <h2>Primary Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-success">

              <h2>Sucess Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-danger">

              <h2>Danger Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row">



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-warning">

              <h2>Warning Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-dark">

              <h2>Dark Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

      </div>

      <!-- /row -->



    </section>

  </main>



</div>

<!-- /main-content -->



</div>

<!-- /content-wrapper -->

.bg-secondary-light {

  background-color: #ecf0f5;

}



#content-wrapper {

  min-height: 100vh;

  position: relative;

  margin-top: 59.5px;

}



#main_content {

  height: 100%;

  background-color: #ecf0f5;

}



#main_content main {

  background-color: #ecf0f5;

}



@media (min-width: 992px) {

  #main_content {

    width: 100%;

  }

}



@media (min-width: 992px) {

  #main_content.full_width {

    margin-left: 0px;

    width: 100%;

  }

}



#main_content {

  width: 100%;

}





/*############# Theme Element: BOX ##########*/



.box {

  position: relative;

  border: 1px solid black;

  border-radius: 5px;

  padding: 0 !important;

  background-color: white;

  /*Header*/

}



.box .box-header {

  display: block;

  position: relative;

  box-sizing: border-box;

  height: 3em;

  border-bottom: 1px solid black;

  padding: 0 !important;

  height: 1em;

  /* Wrapper For Button Groups */

}



@media (min-width: 576px) {

  .box .box-header {

    height: 2em;

  }

}



@media (min-width: 768px) {

  .box .box-header {

    height: 3em;

  }

}



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

  float: left;

  line-height: 2em;

  margin-left: 4px;

  line-height: 0.9em;

  font-size: 0.9em;

}



@media (min-width: 576px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    line-height: 2em;

    font-size: 1.1em;

  }

}



@media (min-width: 768px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    font-size: 2em;

    font-size: 2em;

  }

}



.box .box-header .box-toolbox {

  position: absolute;

  top: 5px;

  right: 10px;

  float: right;

  display: none;

}



@media (min-width: 768px) {

  .box .box-header .box-toolbox {

    display: inline-block;

  }

}



.box .box-footer {

  display: block;

  position: relative;

  border-top: 1px solid black;

  clear: both;

}



.box .box-content {

  display: block;

  position: relative;

  width: 100%;

  clear: both;

}



.box .box-content.box-text {

  padding-left: 5px;

  padding-right: 5px;

}





/*Headers*/



.title-wrapper {

  border-bottom: 1px solid;

  padding: 0;

  margin: 0;

}



.title-wrapper h1,

.title-wrapper h2,

.title-wrapper h3,

.title-wrapper h4,

.title-wrapper h5,

.title-wrapper h6 {

  margin: 0;

}

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



<!-- main content -->

<div id="main_content" class="d-flex">

  <main class="container-fluid m-1">

    <section>



      <div class="w-100 title-wrapper mb-1">

        <h1>Basic Boxes</h1>

      </div>



      <div class="row mb-1">

        <div class="box col">

          <div class="box-header">

            <h2>Full width Box with toolbox</h2>

            <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 text-center w-100">I take over the whole container width.</div>

          <div class="box-footer">

            footer

          </div>

        </div>

        <!-- /box -->

      </div>

      <!-- /row -->



      <div class="row flex-nowrap mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-primary">

              <h2>Info Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-info">

              <h2>Primary Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-success">

              <h2>Sucess Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-danger">

              <h2>Danger Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row">



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-warning">

              <h2>Warning Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-dark">

              <h2>Dark Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

      </div>

      <!-- /row -->



    </section>

  </main>



</div>

<!-- /main-content -->



</div>

<!-- /content-wrapper -->

html css html5 sass bootstrap-4

edited Nov 10 at 21:53

asked Nov 10 at 21:45

Dimitrios Desyllas

1,83111342

edited Nov 10 at 21:53

asked Nov 10 at 21:45

Dimitrios Desyllas

1,83111342

edited Nov 10 at 21:53

asked Nov 10 at 21:45

Dimitrios Desyllas

1,83111342

asked Nov 10 at 21:45

Dimitrios Desyllas

1,83111342

asked Nov 10 at 21:45

Dimitrios Desyllas

1,83111342

header needs to be in a row
– ksav
Nov 10 at 21:58

add a comment |

header needs to be in a row
– ksav
Nov 10 at 21:58

header needs to be in a row
– ksav
Nov 10 at 21:58

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

.bg-secondary-light {

  background-color: #ecf0f5;

}



#content-wrapper {

  min-height: 100vh;

  position: relative;

  margin-top: 59.5px;

}



#main_content {

  height: 100%;

  background-color: #ecf0f5;

}



#main_content main {

  background-color: #ecf0f5;

}



@media (min-width: 992px) {

  #main_content {

    width: 100%;

  }

}



@media (min-width: 992px) {

  #main_content.full_width {

    margin-left: 0px;

    width: 100%;

  }

}



#main_content {

  width: 100%;

}





/*############# Theme Element: BOX ##########*/



.box {

  position: relative;

  border: 1px solid black;

  border-radius: 5px;

  padding: 0 !important;

  background-color: white;

  /*Header*/

}



.box .box-header {

  display: block;

  position: relative;

  box-sizing: border-box;

  height: 3em;

  border-bottom: 1px solid black;

  padding: 0 !important;

  height: 1em;

  /* Wrapper For Button Groups */

}



@media (min-width: 576px) {

  .box .box-header {

    height: 2em;

  }

}



@media (min-width: 768px) {

  .box .box-header {

    height: 3em;

  }

}



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

  float: left;

  line-height: 2em;

  margin-left: 4px;

  line-height: 0.9em;

  font-size: 0.9em;

}



@media (min-width: 576px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    line-height: 2em;

    font-size: 1.1em;

  }

}



@media (min-width: 768px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    font-size: 2em;

    font-size: 2em;

  }

}



.box .box-header .box-toolbox {

  position: absolute;

  top: 5px;

  right: 10px;

  float: right;

  display: none;

}



@media (min-width: 768px) {

  .box .box-header .box-toolbox {

    display: inline-block;

  }

}



.box .box-footer {

  display: block;

  position: relative;

  border-top: 1px solid black;

  clear: both;

}



.box .box-content {

  display: block;

  position: relative;

  width: 100%;

  clear: both;

}



.box .box-content.box-text {

  padding-left: 5px;

  padding-right: 5px;

}





/*Headers*/



.title-wrapper {

  border-bottom: 1px solid;

  padding: 0;

  margin: 0;

}



.title-wrapper h1,

.title-wrapper h2,

.title-wrapper h3,

.title-wrapper h4,

.title-wrapper h5,

.title-wrapper h6 {

  margin: 0;

}

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



<!-- main content -->

<div id="main_content" class="d-flex">

  <main class="container-fluid m-1">

    <section>



      <div class="row mb-1">

        <div class="box col">

          <h1>Basic Boxes</h1>

        </div>

      </div>



      <div class="row mb-1">

        <div class="box col">

          <div class="box-header">

            <h2>Full width Box with toolbox</h2>

            <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 text-center w-100">I take over the whole container width.</div>

          <div class="box-footer">

            footer

          </div>

        </div>

        <!-- /box -->

      </div>

      <!-- /row -->



      <div class="row flex-nowrap mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-primary">

              <h2>Info Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-info">

              <h2>Primary Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-success">

              <h2>Sucess Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-danger">

              <h2>Danger Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row">



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-warning">

              <h2>Warning Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-dark">

              <h2>Dark Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

      </div>

      <!-- /row -->



    </section>

  </main>



</div>

<!-- /main-content -->



</div>

<!-- /content-wrapper -->

answered Nov 10 at 21:59

ksav

3,47921227

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243721%2fmake-header-take-over-the-same-width-as-the-box-below-has%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

.bg-secondary-light {

  background-color: #ecf0f5;

}



#content-wrapper {

  min-height: 100vh;

  position: relative;

  margin-top: 59.5px;

}



#main_content {

  height: 100%;

  background-color: #ecf0f5;

}



#main_content main {

  background-color: #ecf0f5;

}



@media (min-width: 992px) {

  #main_content {

    width: 100%;

  }

}



@media (min-width: 992px) {

  #main_content.full_width {

    margin-left: 0px;

    width: 100%;

  }

}



#main_content {

  width: 100%;

}





/*############# Theme Element: BOX ##########*/



.box {

  position: relative;

  border: 1px solid black;

  border-radius: 5px;

  padding: 0 !important;

  background-color: white;

  /*Header*/

}



.box .box-header {

  display: block;

  position: relative;

  box-sizing: border-box;

  height: 3em;

  border-bottom: 1px solid black;

  padding: 0 !important;

  height: 1em;

  /* Wrapper For Button Groups */

}



@media (min-width: 576px) {

  .box .box-header {

    height: 2em;

  }

}



@media (min-width: 768px) {

  .box .box-header {

    height: 3em;

  }

}



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

  float: left;

  line-height: 2em;

  margin-left: 4px;

  line-height: 0.9em;

  font-size: 0.9em;

}



@media (min-width: 576px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    line-height: 2em;

    font-size: 1.1em;

  }

}



@media (min-width: 768px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    font-size: 2em;

    font-size: 2em;

  }

}



.box .box-header .box-toolbox {

  position: absolute;

  top: 5px;

  right: 10px;

  float: right;

  display: none;

}



@media (min-width: 768px) {

  .box .box-header .box-toolbox {

    display: inline-block;

  }

}



.box .box-footer {

  display: block;

  position: relative;

  border-top: 1px solid black;

  clear: both;

}



.box .box-content {

  display: block;

  position: relative;

  width: 100%;

  clear: both;

}



.box .box-content.box-text {

  padding-left: 5px;

  padding-right: 5px;

}





/*Headers*/



.title-wrapper {

  border-bottom: 1px solid;

  padding: 0;

  margin: 0;

}



.title-wrapper h1,

.title-wrapper h2,

.title-wrapper h3,

.title-wrapper h4,

.title-wrapper h5,

.title-wrapper h6 {

  margin: 0;

}

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



<!-- main content -->

<div id="main_content" class="d-flex">

  <main class="container-fluid m-1">

    <section>



      <div class="row mb-1">

        <div class="box col">

          <h1>Basic Boxes</h1>

        </div>

      </div>



      <div class="row mb-1">

        <div class="box col">

          <div class="box-header">

            <h2>Full width Box with toolbox</h2>

            <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 text-center w-100">I take over the whole container width.</div>

          <div class="box-footer">

            footer

          </div>

        </div>

        <!-- /box -->

      </div>

      <!-- /row -->



      <div class="row flex-nowrap mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-primary">

              <h2>Info Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-info">

              <h2>Primary Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-success">

              <h2>Sucess Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-danger">

              <h2>Danger Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row">



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-warning">

              <h2>Warning Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-dark">

              <h2>Dark Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

      </div>

      <!-- /row -->



    </section>

  </main>



</div>

<!-- /main-content -->



</div>

<!-- /content-wrapper -->

answered Nov 10 at 21:59

ksav

3,47921227

add a comment |

up vote
1
down vote

accepted

.bg-secondary-light {

  background-color: #ecf0f5;

}



#content-wrapper {

  min-height: 100vh;

  position: relative;

  margin-top: 59.5px;

}



#main_content {

  height: 100%;

  background-color: #ecf0f5;

}



#main_content main {

  background-color: #ecf0f5;

}



@media (min-width: 992px) {

  #main_content {

    width: 100%;

  }

}



@media (min-width: 992px) {

  #main_content.full_width {

    margin-left: 0px;

    width: 100%;

  }

}



#main_content {

  width: 100%;

}





/*############# Theme Element: BOX ##########*/



.box {

  position: relative;

  border: 1px solid black;

  border-radius: 5px;

  padding: 0 !important;

  background-color: white;

  /*Header*/

}



.box .box-header {

  display: block;

  position: relative;

  box-sizing: border-box;

  height: 3em;

  border-bottom: 1px solid black;

  padding: 0 !important;

  height: 1em;

  /* Wrapper For Button Groups */

}



@media (min-width: 576px) {

  .box .box-header {

    height: 2em;

  }

}



@media (min-width: 768px) {

  .box .box-header {

    height: 3em;

  }

}



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

  float: left;

  line-height: 2em;

  margin-left: 4px;

  line-height: 0.9em;

  font-size: 0.9em;

}



@media (min-width: 576px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    line-height: 2em;

    font-size: 1.1em;

  }

}



@media (min-width: 768px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    font-size: 2em;

    font-size: 2em;

  }

}



.box .box-header .box-toolbox {

  position: absolute;

  top: 5px;

  right: 10px;

  float: right;

  display: none;

}



@media (min-width: 768px) {

  .box .box-header .box-toolbox {

    display: inline-block;

  }

}



.box .box-footer {

  display: block;

  position: relative;

  border-top: 1px solid black;

  clear: both;

}



.box .box-content {

  display: block;

  position: relative;

  width: 100%;

  clear: both;

}



.box .box-content.box-text {

  padding-left: 5px;

  padding-right: 5px;

}





/*Headers*/



.title-wrapper {

  border-bottom: 1px solid;

  padding: 0;

  margin: 0;

}



.title-wrapper h1,

.title-wrapper h2,

.title-wrapper h3,

.title-wrapper h4,

.title-wrapper h5,

.title-wrapper h6 {

  margin: 0;

}

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



<!-- main content -->

<div id="main_content" class="d-flex">

  <main class="container-fluid m-1">

    <section>



      <div class="row mb-1">

        <div class="box col">

          <h1>Basic Boxes</h1>

        </div>

      </div>



      <div class="row mb-1">

        <div class="box col">

          <div class="box-header">

            <h2>Full width Box with toolbox</h2>

            <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 text-center w-100">I take over the whole container width.</div>

          <div class="box-footer">

            footer

          </div>

        </div>

        <!-- /box -->

      </div>

      <!-- /row -->



      <div class="row flex-nowrap mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-primary">

              <h2>Info Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-info">

              <h2>Primary Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-success">

              <h2>Sucess Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-danger">

              <h2>Danger Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row">



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-warning">

              <h2>Warning Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-dark">

              <h2>Dark Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

      </div>

      <!-- /row -->



    </section>

  </main>



</div>

<!-- /main-content -->



</div>

<!-- /content-wrapper -->

answered Nov 10 at 21:59

ksav

3,47921227

add a comment |

up vote
1
down vote

accepted

.bg-secondary-light {

  background-color: #ecf0f5;

}



#content-wrapper {

  min-height: 100vh;

  position: relative;

  margin-top: 59.5px;

}



#main_content {

  height: 100%;

  background-color: #ecf0f5;

}



#main_content main {

  background-color: #ecf0f5;

}



@media (min-width: 992px) {

  #main_content {

    width: 100%;

  }

}



@media (min-width: 992px) {

  #main_content.full_width {

    margin-left: 0px;

    width: 100%;

  }

}



#main_content {

  width: 100%;

}





/*############# Theme Element: BOX ##########*/



.box {

  position: relative;

  border: 1px solid black;

  border-radius: 5px;

  padding: 0 !important;

  background-color: white;

  /*Header*/

}



.box .box-header {

  display: block;

  position: relative;

  box-sizing: border-box;

  height: 3em;

  border-bottom: 1px solid black;

  padding: 0 !important;

  height: 1em;

  /* Wrapper For Button Groups */

}



@media (min-width: 576px) {

  .box .box-header {

    height: 2em;

  }

}



@media (min-width: 768px) {

  .box .box-header {

    height: 3em;

  }

}



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

  float: left;

  line-height: 2em;

  margin-left: 4px;

  line-height: 0.9em;

  font-size: 0.9em;

}



@media (min-width: 576px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    line-height: 2em;

    font-size: 1.1em;

  }

}



@media (min-width: 768px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    font-size: 2em;

    font-size: 2em;

  }

}



.box .box-header .box-toolbox {

  position: absolute;

  top: 5px;

  right: 10px;

  float: right;

  display: none;

}



@media (min-width: 768px) {

  .box .box-header .box-toolbox {

    display: inline-block;

  }

}



.box .box-footer {

  display: block;

  position: relative;

  border-top: 1px solid black;

  clear: both;

}



.box .box-content {

  display: block;

  position: relative;

  width: 100%;

  clear: both;

}



.box .box-content.box-text {

  padding-left: 5px;

  padding-right: 5px;

}





/*Headers*/



.title-wrapper {

  border-bottom: 1px solid;

  padding: 0;

  margin: 0;

}



.title-wrapper h1,

.title-wrapper h2,

.title-wrapper h3,

.title-wrapper h4,

.title-wrapper h5,

.title-wrapper h6 {

  margin: 0;

}

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



<!-- main content -->

<div id="main_content" class="d-flex">

  <main class="container-fluid m-1">

    <section>



      <div class="row mb-1">

        <div class="box col">

          <h1>Basic Boxes</h1>

        </div>

      </div>



      <div class="row mb-1">

        <div class="box col">

          <div class="box-header">

            <h2>Full width Box with toolbox</h2>

            <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 text-center w-100">I take over the whole container width.</div>

          <div class="box-footer">

            footer

          </div>

        </div>

        <!-- /box -->

      </div>

      <!-- /row -->



      <div class="row flex-nowrap mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-primary">

              <h2>Info Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-info">

              <h2>Primary Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-success">

              <h2>Sucess Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-danger">

              <h2>Danger Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row">



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-warning">

              <h2>Warning Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-dark">

              <h2>Dark Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

      </div>

      <!-- /row -->



    </section>

  </main>



</div>

<!-- /main-content -->



</div>

<!-- /content-wrapper -->

answered Nov 10 at 21:59

ksav

3,47921227

.bg-secondary-light {

  background-color: #ecf0f5;

}



#content-wrapper {

  min-height: 100vh;

  position: relative;

  margin-top: 59.5px;

}



#main_content {

  height: 100%;

  background-color: #ecf0f5;

}



#main_content main {

  background-color: #ecf0f5;

}



@media (min-width: 992px) {

  #main_content {

    width: 100%;

  }

}



@media (min-width: 992px) {

  #main_content.full_width {

    margin-left: 0px;

    width: 100%;

  }

}



#main_content {

  width: 100%;

}





/*############# Theme Element: BOX ##########*/



.box {

  position: relative;

  border: 1px solid black;

  border-radius: 5px;

  padding: 0 !important;

  background-color: white;

  /*Header*/

}



.box .box-header {

  display: block;

  position: relative;

  box-sizing: border-box;

  height: 3em;

  border-bottom: 1px solid black;

  padding: 0 !important;

  height: 1em;

  /* Wrapper For Button Groups */

}



@media (min-width: 576px) {

  .box .box-header {

    height: 2em;

  }

}



@media (min-width: 768px) {

  .box .box-header {

    height: 3em;

  }

}



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

  float: left;

  line-height: 2em;

  margin-left: 4px;

  line-height: 0.9em;

  font-size: 0.9em;

}



@media (min-width: 576px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    line-height: 2em;

    font-size: 1.1em;

  }

}



@media (min-width: 768px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    font-size: 2em;

    font-size: 2em;

  }

}



.box .box-header .box-toolbox {

  position: absolute;

  top: 5px;

  right: 10px;

  float: right;

  display: none;

}



@media (min-width: 768px) {

  .box .box-header .box-toolbox {

    display: inline-block;

  }

}



.box .box-footer {

  display: block;

  position: relative;

  border-top: 1px solid black;

  clear: both;

}



.box .box-content {

  display: block;

  position: relative;

  width: 100%;

  clear: both;

}



.box .box-content.box-text {

  padding-left: 5px;

  padding-right: 5px;

}





/*Headers*/



.title-wrapper {

  border-bottom: 1px solid;

  padding: 0;

  margin: 0;

}



.title-wrapper h1,

.title-wrapper h2,

.title-wrapper h3,

.title-wrapper h4,

.title-wrapper h5,

.title-wrapper h6 {

  margin: 0;

}

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



<!-- main content -->

<div id="main_content" class="d-flex">

  <main class="container-fluid m-1">

    <section>



      <div class="row mb-1">

        <div class="box col">

          <h1>Basic Boxes</h1>

        </div>

      </div>



      <div class="row mb-1">

        <div class="box col">

          <div class="box-header">

            <h2>Full width Box with toolbox</h2>

            <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 text-center w-100">I take over the whole container width.</div>

          <div class="box-footer">

            footer

          </div>

        </div>

        <!-- /box -->

      </div>

      <!-- /row -->



      <div class="row flex-nowrap mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-primary">

              <h2>Info Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-info">

              <h2>Primary Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-success">

              <h2>Sucess Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-danger">

              <h2>Danger Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row">



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-warning">

              <h2>Warning Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-dark">

              <h2>Dark Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

      </div>

      <!-- /row -->



    </section>

  </main>



</div>

<!-- /main-content -->



</div>

<!-- /content-wrapper -->

.bg-secondary-light {

  background-color: #ecf0f5;

}



#content-wrapper {

  min-height: 100vh;

  position: relative;

  margin-top: 59.5px;

}



#main_content {

  height: 100%;

  background-color: #ecf0f5;

}



#main_content main {

  background-color: #ecf0f5;

}



@media (min-width: 992px) {

  #main_content {

    width: 100%;

  }

}



@media (min-width: 992px) {

  #main_content.full_width {

    margin-left: 0px;

    width: 100%;

  }

}



#main_content {

  width: 100%;

}





/*############# Theme Element: BOX ##########*/



.box {

  position: relative;

  border: 1px solid black;

  border-radius: 5px;

  padding: 0 !important;

  background-color: white;

  /*Header*/

}



.box .box-header {

  display: block;

  position: relative;

  box-sizing: border-box;

  height: 3em;

  border-bottom: 1px solid black;

  padding: 0 !important;

  height: 1em;

  /* Wrapper For Button Groups */

}



@media (min-width: 576px) {

  .box .box-header {

    height: 2em;

  }

}



@media (min-width: 768px) {

  .box .box-header {

    height: 3em;

  }

}



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

  float: left;

  line-height: 2em;

  margin-left: 4px;

  line-height: 0.9em;

  font-size: 0.9em;

}



@media (min-width: 576px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    line-height: 2em;

    font-size: 1.1em;

  }

}



@media (min-width: 768px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    font-size: 2em;

    font-size: 2em;

  }

}



.box .box-header .box-toolbox {

  position: absolute;

  top: 5px;

  right: 10px;

  float: right;

  display: none;

}



@media (min-width: 768px) {

  .box .box-header .box-toolbox {

    display: inline-block;

  }

}



.box .box-footer {

  display: block;

  position: relative;

  border-top: 1px solid black;

  clear: both;

}



.box .box-content {

  display: block;

  position: relative;

  width: 100%;

  clear: both;

}



.box .box-content.box-text {

  padding-left: 5px;

  padding-right: 5px;

}





/*Headers*/



.title-wrapper {

  border-bottom: 1px solid;

  padding: 0;

  margin: 0;

}



.title-wrapper h1,

.title-wrapper h2,

.title-wrapper h3,

.title-wrapper h4,

.title-wrapper h5,

.title-wrapper h6 {

  margin: 0;

}

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



<!-- main content -->

<div id="main_content" class="d-flex">

  <main class="container-fluid m-1">

    <section>



      <div class="row mb-1">

        <div class="box col">

          <h1>Basic Boxes</h1>

        </div>

      </div>



      <div class="row mb-1">

        <div class="box col">

          <div class="box-header">

            <h2>Full width Box with toolbox</h2>

            <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 text-center w-100">I take over the whole container width.</div>

          <div class="box-footer">

            footer

          </div>

        </div>

        <!-- /box -->

      </div>

      <!-- /row -->



      <div class="row flex-nowrap mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-primary">

              <h2>Info Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-info">

              <h2>Primary Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-success">

              <h2>Sucess Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-danger">

              <h2>Danger Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row">



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-warning">

              <h2>Warning Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-dark">

              <h2>Dark Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

      </div>

      <!-- /row -->



    </section>

  </main>



</div>

<!-- /main-content -->



</div>

<!-- /content-wrapper -->

.bg-secondary-light {

  background-color: #ecf0f5;

}



#content-wrapper {

  min-height: 100vh;

  position: relative;

  margin-top: 59.5px;

}



#main_content {

  height: 100%;

  background-color: #ecf0f5;

}



#main_content main {

  background-color: #ecf0f5;

}



@media (min-width: 992px) {

  #main_content {

    width: 100%;

  }

}



@media (min-width: 992px) {

  #main_content.full_width {

    margin-left: 0px;

    width: 100%;

  }

}



#main_content {

  width: 100%;

}





/*############# Theme Element: BOX ##########*/



.box {

  position: relative;

  border: 1px solid black;

  border-radius: 5px;

  padding: 0 !important;

  background-color: white;

  /*Header*/

}



.box .box-header {

  display: block;

  position: relative;

  box-sizing: border-box;

  height: 3em;

  border-bottom: 1px solid black;

  padding: 0 !important;

  height: 1em;

  /* Wrapper For Button Groups */

}



@media (min-width: 576px) {

  .box .box-header {

    height: 2em;

  }

}



@media (min-width: 768px) {

  .box .box-header {

    height: 3em;

  }

}



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

  float: left;

  line-height: 2em;

  margin-left: 4px;

  line-height: 0.9em;

  font-size: 0.9em;

}



@media (min-width: 576px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    line-height: 2em;

    font-size: 1.1em;

  }

}



@media (min-width: 768px) {

  .box .box-header h1,

  .box .box-header h2,

  .box .box-header h3,

  .box .box-header h4,

  .box .box-header h5,

  .box .box-header h6 {

    font-size: 2em;

    font-size: 2em;

  }

}



.box .box-header .box-toolbox {

  position: absolute;

  top: 5px;

  right: 10px;

  float: right;

  display: none;

}



@media (min-width: 768px) {

  .box .box-header .box-toolbox {

    display: inline-block;

  }

}



.box .box-footer {

  display: block;

  position: relative;

  border-top: 1px solid black;

  clear: both;

}



.box .box-content {

  display: block;

  position: relative;

  width: 100%;

  clear: both;

}



.box .box-content.box-text {

  padding-left: 5px;

  padding-right: 5px;

}





/*Headers*/



.title-wrapper {

  border-bottom: 1px solid;

  padding: 0;

  margin: 0;

}



.title-wrapper h1,

.title-wrapper h2,

.title-wrapper h3,

.title-wrapper h4,

.title-wrapper h5,

.title-wrapper h6 {

  margin: 0;

}

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



<!-- main content -->

<div id="main_content" class="d-flex">

  <main class="container-fluid m-1">

    <section>



      <div class="row mb-1">

        <div class="box col">

          <h1>Basic Boxes</h1>

        </div>

      </div>



      <div class="row mb-1">

        <div class="box col">

          <div class="box-header">

            <h2>Full width Box with toolbox</h2>

            <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 text-center w-100">I take over the whole container width.</div>

          <div class="box-footer">

            footer

          </div>

        </div>

        <!-- /box -->

      </div>

      <!-- /row -->



      <div class="row flex-nowrap mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-primary">

              <h2>Info Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-info">

              <h2>Primary Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row mb-1">



        <div class="col-6 p-0 pr-1">

          <div class="box">

            <div class="box-header text-light bg-success">

              <h2>Sucess Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>

        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-danger">

              <h2>Danger Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>

            <div class="box-footer">

              footer

            </div>

          </div>

          <!-- /box -->

        </div>



      </div>

      <!-- /row -->



      <div class="row">



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-warning">

              <h2>Warning Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>



        <div class="col-6 p-0 pl-1">

          <div class="box">

            <div class="box-header text-light bg-dark">

              <h2>Dark Header</h2>

            </div>

            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>

            <div class="box-footer">footer</div>

          </div>

          <!-- /box -->

        </div>

      </div>

      <!-- /row -->



    </section>

  </main>



</div>

<!-- /main-content -->



</div>

<!-- /content-wrapper -->

answered Nov 10 at 21:59

ksav

3,47921227

answered Nov 10 at 21:59

ksav

3,47921227

answered Nov 10 at 21:59

ksav

3,47921227

answered Nov 10 at 21:59

ksav

3,47921227

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky