Twitter Bootstrap Question posted in

Make half the div one color using Twitter Bootstrap

I need some help here. I am trying to create a page header with some trickiness to it. I need to have a container-fluid with the left half background blue and the right half white. I then need a h2 “Title” /h2 inside a ? container to center it in the 12 columns the title has a border-bottom which stretches the width of the browser though. Here is my code but again I know it is some what half done since I cant figure out the best way to get the 50% background color. I need this to work on IE8 to present and the rest of the major updated browsers.

I hope I can get an image in here for you guys. If not I will set up a bootply for my example.

enter image description here

Thanks ahead of time 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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok so I tried this several ways and feel this may be the best solution. Here is what I came up with. I hope it can solve other peoples issues 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>

  2. 0

    You are on the right track, just change the class to body element.

    For the fancy underling of the h2 element I have combined border-bottom property and styled hr (horizontal rules) element.

    h2 here is an inline-block element, therefore the border-bottom element is present only for the length of the h2 text. Margins for heading and horizontal rule have been modified 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search