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:
Do you know how I can fix that?
html css html5 sass bootstrap-4
asked Nov 10 at 21:45
Dimitrios Desyllas
1,89511443
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:
Do you know how I can fix that?
html css html5 sass bootstrap-4
asked Nov 10 at 21:45
Dimitrios Desyllas
1,89511443
header needs to be in a row
– ksav
Nov 10 at 21:58
add a comment |
up vote
0
down vote
favorite
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:
Do you know how I can fix that?
html css html5 sass bootstrap-4
asked Nov 10 at 21:45
Dimitrios Desyllas
1,89511443
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:
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
html css html5 sass bootstrap-4
asked Nov 10 at 21:45
Dimitrios Desyllas
1,89511443
asked Nov 10 at 21:45
Dimitrios Desyllas
1,89511443
edited Nov 10 at 21:53
asked Nov 10 at 21:45
Dimitrios Desyllas
1,89511443
asked Nov 10 at 21:45
Dimitrios Desyllas
1,89511443
asked Nov 10 at 21:45
Dimitrios Desyllas
1,89511443
1,89511443
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
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,91221228
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');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
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,91221228
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,91221228
add a comment |
up vote
1
down vote
accepted
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,91221228
.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,91221228
answered Nov 10 at 21:59
ksav
3,91221228
answered Nov 10 at 21:59
ksav
3,91221228
answered Nov 10 at 21:59
ksav
3,91221228
3,91221228
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
header needs to be in a row
– ksav
Nov 10 at 21:58