colored timeline

This bootstrap snippet called "colored timeline" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: timeline,list

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div id="timeline-1" class="">
		<div class="row">
			<div class="col-xs-12 col-sm-10 col-sm-offset-1">
				<div class="timeline-container">
					<div class="timeline-label">
						<span class="label label-primary arrowed-in-right label-lg">
							<b>Today</b>
						</span>
					</div>

					<div class="timeline-items">
						<div class="timeline-item clearfix">
							<div class="timeline-info">
								<img alt="Avatar" src="https://bootdey.com/img/Content/avatar/avatar1.png">
								<span class="label label-info label-sm">16:22</span>
							</div>

							<div class="widget-box transparent">
								<div class="widget-header widget-header-small">
									<h5 class="widget-title smaller">
										<a href="#" class="blue">Susan</a>
										<span class="grey">reviewed a product</span>
									</h5>

									<span class="widget-toolbar no-border">
										<i class="ace-icon fa fa-clock-o bigger-110"></i>
										16:22
									</span>

									<span class="widget-toolbar">
										<a href="#" data-action="reload">
											<i class="ace-icon fa fa-refresh"></i>
										</a>

										<a href="#" data-action="collapse">
											<i class="ace-icon fa fa-chevron-up"></i>
										</a>
									</span>
								</div>

								<div class="widget-body">
									<div class="widget-main">
										Anim pariatur cliche reprehenderit, enim eiusmod
										<span class="red">high life</span>

										accusamus terry richardson ad squid …
										<div class="space-6"></div>

										<div class="widget-toolbox clearfix">
											<div class="pull-left">
												<i class="ace-icon fa fa-hand-o-right grey bigger-125"></i>
												<a href="#" class="bigger-110">Click to read …</a>
											</div>

											<div class="pull-right action-buttons">
												<a href="#">
													<i class="ace-icon fa fa-check green bigger-130"></i>
												</a>

												<a href="#">
													<i class="ace-icon fa fa-pencil blue bigger-125"></i>
												</a>

												<a href="#">
													<i class="ace-icon fa fa-times red bigger-125"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="timeline-item clearfix">
							<div class="timeline-info">
								<i class="timeline-indicator ace-icon fa fa-cutlery btn btn-success no-hover"></i>
							</div>

							<div class="widget-box transparent">
								<div class="widget-body">
									<div class="widget-main">
										Going to cafe for lunch
										<div class="pull-right">
											<i class="ace-icon fa fa-clock-o bigger-110"></i>
											12:30
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="timeline-item clearfix">
							<div class="timeline-info">
								<i class="timeline-indicator ace-icon fa fa-star btn btn-warning no-hover green"></i>
							</div>

							<div class="widget-box transparent">
								<div class="widget-header widget-header-small">
									<h5 class="widget-title smaller">New logo</h5>

									<span class="widget-toolbar no-border">
										<i class="ace-icon fa fa-clock-o bigger-110"></i>
										9:15
									</span>

									<span class="widget-toolbar">
										<a href="#" data-action="reload">
											<i class="ace-icon fa fa-refresh"></i>
										</a>

										<a href="#" data-action="collapse">
											<i class="ace-icon fa fa-chevron-up"></i>
										</a>
									</span>
								</div>

								<div class="widget-body">
									<div class="widget-main">
										Designed a new logo for our website. Would appreciate feedback.
										<div class="space-6"></div>

										<div class="widget-toolbox clearfix">
											<div class="pull-right action-buttons">
												<div class="space-4"></div>

												<div>
													<a href="#">
														<i class="ace-icon fa fa-heart red bigger-125"></i>
													</a>

													<a href="#">
														<i class="ace-icon fa fa-facebook blue bigger-125"></i>
													</a>

													<a href="#">
														<i class="ace-icon fa fa-reply light-green bigger-130"></i>
													</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="timeline-item clearfix">
							<div class="timeline-info">
								<i class="timeline-indicator ace-icon fa fa-flask btn btn-default no-hover"></i>
							</div>

							<div class="widget-box transparent">
								<div class="widget-body">
									<div class="widget-main"> Took the final exam. Phew! </div>
								</div>
							</div>
						</div>
					</div><!-- /.timeline-items -->
				</div><!-- /.timeline-container -->

				<div class="timeline-container">
					<div class="timeline-label">
						<span class="label label-success arrowed-in-right label-lg">
							<b>Yesterday</b>
						</span>
					</div>

					<div class="timeline-items">
						<div class="timeline-item clearfix">
							<div class="timeline-info">
								<i class="timeline-indicator ace-icon fa fa-beer btn btn-inverse no-hover"></i>
							</div>

							<div class="widget-box transparent">
								<div class="widget-header widget-header-small">
									<h5 class="widget-title smaller">Haloween party</h5>

									<span class="widget-toolbar">
										<i class="ace-icon fa fa-clock-o bigger-110"></i>
										1 hour ago
									</span>
								</div>

								<div class="widget-body">
									<div class="widget-main">
										<div class="clearfix">
											<div class="pull-left">
												Lots of fun at Haloween party.
												<br>
												Take a look at some pics:
											</div>

											<div class="pull-right">
												<i class="ace-icon fa fa-chevron-left blue bigger-110"></i>

												&nbsp;
												<img alt="Image 4" width="36" src="https://bootdey.com/img/Content/avatar/avatar1.png">
												<img alt="Image 3" width="36" src="https://bootdey.com/img/Content/avatar/avatar2.png">
												<img alt="Image 2" width="36" src="https://bootdey.com/img/Content/avatar/avatar3.png">
												<img alt="Image 1" width="36" src="https://bootdey.com/img/Content/avatar/avatar4.png">
												&nbsp;
												<i class="ace-icon fa fa-chevron-right blue bigger-110"></i>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="timeline-item clearfix">
							<div class="timeline-info">
								<i class="timeline-indicator ace-icon fa fa-trophy btn btn-pink no-hover green"></i>
							</div>

							<div class="widget-box transparent">
								<div class="widget-header widget-header-small">
									<h5 class="widget-title smaller">Lorum Ipsum</h5>
								</div>

								<div class="widget-body">
									<div class="widget-main">
										Anim pariatur cliche reprehenderit, enim eiusmod
										<span class="green bolder">high life</span>
										accusamus terry richardson ad squid …
									</div>
								</div>
							</div>
						</div>

						<div class="timeline-item clearfix">
							<div class="timeline-info">
								<i class="timeline-indicator ace-icon fa fa-cutlery btn btn-success no-hover"></i>
							</div>

							<div class="widget-box transparent">
								<div class="widget-body">
									<div class="widget-main"> Going to cafe for lunch </div>
								</div>
							</div>
						</div>

						<div class="timeline-item clearfix">
							<div class="timeline-info">
								<i class="timeline-indicator ace-icon fa fa-bug btn btn-danger no-hover"></i>
							</div>

							<div class="widget-box widget-color-red2">
								<div class="widget-header widget-header-small">
									<h5 class="widget-title smaller">Critical security patch released</h5>

									<span class="widget-toolbar no-border">
										<i class="ace-icon fa fa-clock-o bigger-110"></i>
										9:15
									</span>

									<span class="widget-toolbar">
										<a href="#" data-action="reload">
											<i class="ace-icon fa fa-refresh"></i>
										</a>

										<a href="#" data-action="collapse">
											<i class="ace-icon fa fa-chevron-up"></i>
										</a>
									</span>
								</div>

								<div class="widget-body">
									<div class="widget-main">
										Please download the new patch for maximum security.
									</div>
								</div>
							</div>
						</div>
					</div><!-- /.timeline-items -->
				</div><!-- /.timeline-container -->

				<div class="timeline-container">
					<div class="timeline-label">
						<span class="label label-grey arrowed-in-right label-lg">
							<b>May 17</b>
						</span>
					</div>

					<div class="timeline-items">
						<div class="timeline-item clearfix">
							<div class="timeline-info">
								<i class="timeline-indicator ace-icon fa fa-leaf btn btn-primary no-hover green"></i>
							</div>

							<div class="widget-box transparent">
								<div class="widget-header widget-header-small">
									<h5 class="widget-title smaller">Lorum Ipsum</h5>

									<span class="widget-toolbar no-border">
										<i class="ace-icon fa fa-clock-o bigger-110"></i>
										10:22
									</span>

									<span class="widget-toolbar">
										<a href="#" data-action="reload">
											<i class="ace-icon fa fa-refresh"></i>
										</a>

										<a href="#" data-action="collapse">
											<i class="ace-icon fa fa-chevron-up"></i>
										</a>
									</span>
								</div>

								<div class="widget-body">
									<div class="widget-main">
										Anim pariatur cliche reprehenderit, enim eiusmod
										<span class="blue bolder">high life</span>
										accusamus terry richardson ad squid …
									</div>
								</div>
							</div>
						</div>
					</div><!-- /.timeline-items -->
				</div><!-- /.timeline-container -->
			</div>
		</div>
	</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;}


.timeline-container {
    position: relative;
    padding-top: 4px;
    margin-bottom: 32px
}

.timeline-container:last-child {
    margin-bottom: 0
}

.timeline-container:before {
    content: "";
    display: block;
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    border: 1px solid #E2E3E7;
    background-color: #E7EAEF;
    width: 4px;
    border-width: 0 1px
}

.timeline-container:first-child:before {
    border-top-width: 1px
}

.timeline-container:last-child:before {
    border-bottom-width: 1px
}

.timeline-item {
    position: relative;
    margin-bottom: 8px
}

.timeline-item .widget-box {
    background-color: #F2F6F9;
    color: #595C66
}

.timeline-item .transparent.widget-box {
    border-left: 3px solid #DAE1E5
}

.timeline-item .transparent .widget-header {
    background-color: #ECF1F4;
    border-bottom-width: 0
}

.timeline-item .transparent .widget-header>.widget-title {
    margin-left: 8px
}

.timeline-item:nth-child(even) .widget-box {
    background-color: #F3F3F3;
    color: #616161
}

.timeline-item:nth-child(even) .widget-box.transparent {
    border-left-color: #DBDBDB!important
}

.timeline-item:nth-child(even) .widget-box.transparent .widget-header {
    background-color: #EEE!important
}

.timeline-item .widget-box {
    margin: 0 0 0 60px;
    position: relative;
    max-width: none
}

.timeline-item .widget-main {
    margin: 0;
    position: relative;
    max-width: none;
    border-bottom-width: 0
}

.timeline-item .widget-body {
    background-color: transparent
}

.timeline-item .widget-toolbox {
    padding: 4px 8px 0!important;
    background-color: transparent!important;
    border-width: 0!important;
    margin: 0!important
}

.timeline-info {
    float: left;
    width: 60px;
    text-align: center;
    position: relative
}

.timeline-info img {
    border-radius: 100%;
    max-width: 42px
}

.timeline-info .badge,
.timeline-info .label {
    font-size: 12px
}

.timeline-container:not(.timeline-style2) .timeline-indicator {
    opacity: 1;
    border-radius: 100%;
    display: inline-block;
    font-size: 16px;
    height: 36px;
    line-height: 30px;
    width: 36px;
    text-align: center;
    text-shadow: none!important;
    padding: 0;
    cursor: default;
    border: 3px solid #FFF!important
}

.timeline-label {
    display: block;
    clear: both;
    margin: 0 0 18px 34px
}

.timeline-item img {
    border: 1px solid #AAA;
    padding: 2px;
    background-color: #FFF
}

.timeline-style2:before {
    display: none
}

.timeline-style2 .timeline-item {
    padding-bottom: 22px;
    margin-bottom: 0
}

.timeline-style2 .timeline-item:last-child {
    padding-bottom: 0
}

.timeline-style2 .timeline-item:before {
    content: "";
    display: block;
    position: absolute;
    left: 90px;
    top: 5px;
    bottom: -5px;
    border-width: 0;
    background-color: #DDD;
    width: 2px;
    max-width: 2px
}

.timeline-style2 .timeline-item:last-child:before {
    display: none
}

.timeline-style2 .timeline-item:first-child:before {
    display: block
}

.timeline-style2 .timeline-item .transparent .widget-header {
    background-color: transparent!important
}

.timeline-style2 .timeline-item .transparent.widget-box {
    background-color: transparent!important;
    border-left: none!important
}

.timeline-style2 .timeline-info {
    width: 100px
}

.timeline-style2 .timeline-indicator {
    font-size: 0;
    height: 12px;
    line-height: 12px;
    width: 12px;
    border-width: 1px!important;
    background-color: #FFF!important;
    position: absolute;
    left: 85px;
    top: 3px;
    opacity: 1;
    border-radius: 100%;
    display: inline-block;
    padding: 0
}

.timeline-style2 .timeline-date {
    display: inline-block;
    width: 72px;
    text-align: right;
    margin-right: 25px;
    color: #777
}

.timeline-style2 .timeline-item .widget-box {
    margin-left: 112px
}

.timeline-style2 .timeline-label {
    width: 75px;
    margin-left: 0;
    margin-bottom: 10px;
    text-align: right;
    color: #666;
    font-size: 14px
}

.timeline-time {
    text-align: center;
    position: static
}


.widget-box {
    padding: 0;
    box-shadow: none;
    margin: 3px 0;
    border: 1px solid #CCC
}

@media only screen and (max-width:767px) {
    .widget-box {
        margin-top: 7px;
        margin-bottom: 7px
    }
}

.widget-header {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
    min-height: 38px;
    background: repeat-x #f7f7f7;
    background-image: -webkit-linear-gradient(top, #FFF 0, #EEE 100%);
    background-image: -o-linear-gradient(top, #FFF 0, #EEE 100%);
    background-image: linear-gradient(to bottom, #FFF 0, #EEE 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0);
    color: #669FC7;
    border-bottom: 1px solid #DDD;
    padding-left: 12px
}

.widget-box.transparent>.widget-header,
.widget-header-flat {
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)
}

.widget-header:after,
.widget-header:before {
    content: "";
    display: table;
    line-height: 0
}

.widget-header:after {
    clear: right
}

.widget-box.collapsed>.widget-header {
    border-bottom-width: 0
}

.collapsed.fullscreen>.widget-header {
    border-bottom-width: 1px
}

.collapsed>.widget-body {
    display: none
}

.widget-header-flat {
    background: #F7F7F7
}

.widget-header-large {
    min-height: 49px;
    padding-left: 18px
}

.widget-header-small {
    min-height: 31px;
    padding-left: 10px
}

.widget-header>.widget-title {
    line-height: 36px;
    padding: 0;
    margin: 0;
    display: inline
}

.widget-header>.widget-title>.ace-icon {
    margin-right: 5px;
    font-weight: 400;
    display: inline-block
}

.infobox .infobox-content:first-child,
.infobox>.badge,
.infobox>.stat,
.percentage {
    font-weight: 700
}

.widget-header-large>.widget-title {
    line-height: 48px
}

.widget-header-small>.widget-title {
    line-height: 30px
}

.widget-toolbar {
    display: inline-block;
    padding: 0 10px;
    line-height: 37px;
    float: right;
    position: relative
}

.widget-header-large>.widget-toolbar {
    line-height: 48px
}

.widget-header-small>.widget-toolbar {
    line-height: 29px
}

.widget-toolbar.no-padding {
    padding: 0
}

.widget-toolbar.padding-5 {
    padding: 0 5px
}

.widget-toolbar:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: -1px;
    border: 1px solid #D9D9D9;
    border-width: 0 1px 0 0
}

.popover-notitle+.popover .popover-title,
.popover.popover-notitle .popover-title,
.widget-toolbar.no-border:before {
    display: none
}

.widget-header-large>.widget-toolbar:before {
    top: 6px;
    bottom: 6px
}

[class*=widget-color-]>.widget-header>.widget-toolbar:before {
    border-color: #EEE
}

.widget-color-orange>.widget-header>.widget-toolbar:before {
    border-color: #FEA
}

.widget-color-dark>.widget-header>.widget-toolbar:before {
    border-color: #222;
    box-shadow: -1px 0 0 rgba(255, 255, 255, .2), inset 1px 0 0 rgba(255, 255, 255, .1)
}

.widget-toolbar label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0
}

.widget-toolbar>.widget-menu>a,
.widget-toolbar>a {
    font-size: 14px;
    margin: 0 1px;
    display: inline-block;
    padding: 0;
    line-height: 24px
}

.widget-toolbar>.widget-menu>a:hover,
.widget-toolbar>a:hover {
    text-decoration: none
}

.widget-header-large>.widget-toolbar>.widget-menu>a,
.widget-header-large>.widget-toolbar>a {
    font-size: 15px;
    margin: 0 1px
}

.widget-toolbar>.btn {
    line-height: 27px;
    margin-top: -2px
}

.widget-toolbar>.btn.smaller {
    line-height: 26px
}

.widget-toolbar>.btn.bigger {
    line-height: 28px
}

.widget-toolbar>.btn-sm {
    line-height: 24px
}

.widget-toolbar>.btn-sm.smaller {
    line-height: 23px
}

.widget-toolbar>.btn-sm.bigger {
    line-height: 25px
}

.widget-toolbar>.btn-xs {
    line-height: 22px
}

.widget-toolbar>.btn-xs.smaller {
    line-height: 21px
}

.widget-toolbar>.btn-xs.bigger {
    line-height: 23px
}

.widget-toolbar>.btn-minier {
    line-height: 18px
}

.widget-toolbar>.btn-minier.smaller {
    line-height: 17px
}

.widget-toolbar>.btn-minier.bigger {
    line-height: 19px
}

.widget-toolbar>.btn-lg {
    line-height: 36px
}

.widget-toolbar>.btn-lg.smaller {
    line-height: 34px
}

.widget-toolbar>.btn-lg.bigger {
    line-height: 38px
}

.widget-toolbar-dark {
    background: #444
}

.widget-toolbar-light {
    background: rgba(255, 255, 255, .85)
}

.widget-toolbar>.widget-menu {
    display: inline-block;
    position: relative
}

.widget-toolbar>.widget-menu>a[data-action],
.widget-toolbar>a[data-action] {
    -webkit-transition: transform .1s;
    -o-transition: transform .1s;
    transition: transform .1s
}

.widget-toolbar>.widget-menu>a[data-action]>.ace-icon,
.widget-toolbar>a[data-action]>.ace-icon {
    margin-right: 0
}

.widget-toolbar>.widget-menu>a[data-action]:focus,
.widget-toolbar>a[data-action]:focus {
    text-decoration: none;
    outline: 0
}

.widget-toolbar>.widget-menu>a[data-action]:hover,
.widget-toolbar>a[data-action]:hover {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.widget-body {
    background-color: #FFF
}

.widget-main {
    padding: 12px
}

.widget-main.padding-32 {
    padding: 32px
}

.widget-main.padding-30 {
    padding: 30px
}

.widget-main.padding-28 {
    padding: 28px
}

.widget-main.padding-26 {
    padding: 26px
}

.widget-main.padding-24 {
    padding: 24px
}

.widget-main.padding-22 {
    padding: 22px
}

.widget-main.padding-20 {
    padding: 20px
}

.widget-main.padding-18 {
    padding: 18px
}

.widget-main.padding-16 {
    padding: 16px
}

.widget-main.padding-14 {
    padding: 14px
}

.widget-main.padding-12 {
    padding: 12px
}

.widget-main.padding-10 {
    padding: 10px
}

.widget-main.padding-8 {
    padding: 8px
}

.widget-main.padding-6 {
    padding: 6px
}

.widget-main.padding-4 {
    padding: 4px
}

.widget-main.padding-2 {
    padding: 2px
}

.widget-main.no-padding,
.widget-main.padding-0 {
    padding: 0
}

.widget-toolbar .progress {
    vertical-align: middle;
    display: inline-block;
    margin: 0
}

.widget-toolbar>.dropdown,
.widget-toolbar>.dropup {
    display: inline-block
}

.widget-toolbox.toolbox-vertical,
.widget-toolbox.toolbox-vertical+.widget-main {
    display: table-cell;
    vertical-align: top
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
.widget-box>.widget-header>.widget-toolbar>[data-action=settings],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=settings] {
    color: #99CADB
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
.widget-box>.widget-header>.widget-toolbar>[data-action=reload],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=reload] {
    color: #ACD392
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
.widget-box>.widget-header>.widget-toolbar>[data-action=collapse],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=collapse] {
    color: #AAA
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
.widget-box>.widget-header>.widget-toolbar>[data-action=close],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=close] {
    color: #E09E96
}

.widget-box[class*=widget-color-]>.widget-header {
    color: #FFF;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)
}

.widget-color-blue {
    border-color: #307ECC
}

.widget-color-blue>.widget-header {
    background: #307ECC;
    border-color: #307ECC
}

.widget-color-blue2 {
    border-color: #5090C1
}

.widget-color-blue2>.widget-header {
    background: #5090C1;
    border-color: #5090C1
}

.widget-color-blue3 {
    border-color: #6379AA
}

.widget-color-blue3>.widget-header {
    background: #6379AA;
    border-color: #6379AA
}

.widget-color-green {
    border-color: #82AF6F
}

.widget-color-green>.widget-header {
    background: #82AF6F;
    border-color: #82AF6F
}

.widget-color-green2 {
    border-color: #2E8965
}

.widget-color-green2>.widget-header {
    background: #2E8965;
    border-color: #2E8965
}

.widget-color-green3 {
    border-color: #4EBC30
}

.widget-color-green3>.widget-header {
    background: #4EBC30;
    border-color: #4EBC30
}

.widget-color-red {
    border-color: #E2755F
}

.widget-color-red>.widget-header {
    background: #E2755F;
    border-color: #E2755F
}

.widget-color-red2 {
    border-color: #E04141
}

.widget-color-red2>.widget-header {
    background: #E04141;
    border-color: #E04141
}

.widget-color-red3 {
    border-color: #D15B47
}

.widget-color-red3>.widget-header {
    background: #D15B47;
    border-color: #D15B47
}

.widget-color-purple {
    border-color: #7E6EB0
}

.widget-color-purple>.widget-header {
    background: #7E6EB0;
    border-color: #7E6EB0
}

.widget-color-pink {
    border-color: #CE6F9E
}

.widget-color-pink>.widget-header {
    background: #CE6F9E;
    border-color: #CE6F9E
}

.widget-color-orange {
    border-color: #E8B10D
}

.widget-color-orange>.widget-header {
    color: #855D10!important;
    border-color: #E8B10D;
    background: #FFC657
}

.widget-color-dark {
    border-color: #5a5a5a
}

.widget-color-dark>.widget-header {
    border-color: #666;
    background: #404040
}

.widget-color-grey {
    border-color: #9e9e9e
}

.widget-color-grey>.widget-header {
    border-color: #aaa;
    background: #848484
}

.widget-box.transparent {
    border-width: 0
}

.widget-box.transparent>.widget-header {
    background: 0 0;
    border-width: 0;
    border-bottom: 1px solid #DCE8F1;
    color: #4383B4;
    padding-left: 3px
}

.widget-box.transparent>.widget-header-large {
    padding-left: 5px
}

.widget-box.transparent>.widget-header-small {
    padding-left: 1px
}

.widget-box.transparent>.widget-body {
    border-width: 0;
    background-color: transparent
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action] {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2)
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=settings] {
    color: #D3E4ED
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=reload] {
    color: #DEEAD3
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=collapse] {
    color: #E2E2E2
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=close] {
    color: #FFD9D5
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action] {
    text-shadow: none
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=settings] {
    color: #559AAB
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=reload] {
    color: #7CA362
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=collapse] {
    color: #777
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=close] {
    color: #A05656
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen) {
    border-width: 0
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen)>.widget-header {
    border: 1px solid;
    border-color: inherit
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen)>.widget-body {
    border: 1px solid #D6D6D6;
    border-width: 0 1px 1px
}

.widget-box.no-border {
    border-width: 0
}

.widget-box.fullscreen {
    position: fixed;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFF;
    border-width: 3px;
    z-index: 1040!important
}

.widget-box.fullscreen:not([class*=widget-color-]) {
    border-color: #AAA
}

.widget-body .table {
    border-top: 1px solid #E5E5E5
}

.widget-body .table thead:first-child tr {
    background: #FFF
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 22nd 2016, 19:56

Views: 4.0K

Rated 5/5 based on 3 reviews