Make half div the same color using Twitter Bootstrap
I need help here. I am trying to create a page title with some tweak to it. I need to have a container liquid with the left half of the background blue and the right half of the white. Then I need h2 "Title" / h 2 inside a? container to center it in 12 columns, the header has a bounding bottom that stretches the width of the browser. Here is my code, but again I know this is some half because I can't find a better way to get a 50% background color. I need this to work with IE8 for presentation and the rest of the major updated browsers.
Hope I can get an image here for you guys. If not, I'll set up bootply for my example.
Thanks in advance for your help.
<style>
.halfWrapper{
background: linear-gradient(to right, blue 0%, blue 50%, #fff 50%, #fff 100%);
display:block;
padding:0;
}
.halfAndhalf {
width:50%;
background:blue;
display:inline-block;
}
.halfWrapper h2{color:#fff; text-transform:capitalize; border-bottom:1px solid green;}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 halfWrapper">
<div class="container halfContain">
<h2>Case Studies</h2>
</div>
</div>
</div>
</div>
source to share
You are on the right track, just change the class to body
.
For fancy subordination of the element, h2
I combined the property border-bottom
and styled the element hr
(horizontal rules).
h2
the element is here inline-block
, so the element border-bottom
is only present for the length of the text h2
. The margins for the title and horizontal rule have been changed to zero pixels.
body {
background: linear-gradient(to right, black 0%, black 50%, #fff 50%, #fff 100%);
display: block;
padding: 0;
}
/* couldn't find it in html
.halfAndhalf {
width: 50%;
background: blue;
display: inline-block;
}
*/
.halfWrapper h2 {
color: #fff;
font-family: monospace;
font-size: 26px;
text-transform: uppercase;
border-bottom: 2px solid #4EB2DF;
display: inline-block;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}
.style-one {
border: 0px;
height: 1px;
background: #4EB2DF;
padding-top: 0px !important;
margin-top: 0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 halfWrapper">
<div class="container halfContain">
<h2>Case Studies</h2>
<hr class="style-one">
</div>
</div>
</div>
</div>
source to share
Ok, so I tried several ways and felt that this might be the best solution. Here's what I came up with. I hope that he can solve the problems of other peoples that are similar.
<style>
.halfWrapper{
/*background: linear-gradient(to right, @tmcDarkblue 0%, @tmcDarkblue 50%, #fff 50%, #fff 100%);*/
background:@tmcDarkblue;
display:block;
padding: 120px 0 50px;
}
.halfContained{
background:#fff;
display:block;
padding: 174px 0 30px;
}
.halfContained .col-xs-12{
padding:0;
}
.halfBorder{
border-bottom:1px solid @tmcLightblue;
padding:0;
}
.style-one {
border: 0px;
height: 1px;
background: #4EB2DF;
padding-top: 0px !important;
margin-top: 0px !important;
}
.halfWrapper h2{color:#fff; text-transform:capitalize; border-bottom:1px solid @tmcLightblue; display:inline-block; margin-bottom:0;}
.halfContained h2{color:#fff; text-transform:capitalize; border-bottom:1px solid @tmcLightblue;}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 halfWrapper">
<div class="col-xs-11 col-xs-offset-1 col-sm-offset-5 halfBorder">
<h2>CASE STUDIES</h2>
</div>
</div>
<div class="hidden-xs col-sm-6 halfContained">
<div class="col-xs-12">
<hr class="style-one">
</div>
</div>
</div>
</div>
source to share