Center a div inside row

Question

Ok I know I am just making a beginner mistake but I cant seem to figure it out. I was going to use the class jumbotron but find the text change is not what I want. I need to create a 100% width container-fluid with a row and col the 1st col will contain an image 50% of the screen. The other half needs to be centered vertically and horizontally to the image. The other issue is it needs to line up with the headlines directly below it. Here is my code and I will try and do a bootply for anyone trying to help me out.

Ok I am not sure how long I will keep that image there but here is a screen shot of what I have and the red rectangles are issues or where the module needs to be: https://www.chrobinson.com/en-us/-/media/177FC7F22DA6496AB26BAA75C230BE41.ash

Bootply: http://www.bootply.com/i5cb1GIdxk

    <style>
    /* LESS Document */

/*********  TMC QUERIES  *********/
@tmcGreen:#c0c920;
@tmcLightblue:#4fb4e1;
@tmcDarkblue:#003a63;
@tmcOrange:#c05d1a;
@tmcDarkgrey:#939598;
@tmcLightgrey:#c7c8ca;

/************ CUSTOM FONTS **************/


/************* BASIC STYLES **************/
a {
    color:@tmcLightblue;
    text-decoration:none;
    }
a:hover {
    text-decoration:none;
    }
p {
    margin: 10px 0;
    }
body{
    font-family:"Lato";
    }
html,body {
    height:100%;
    }

/*********  NAV STYLES  *********/
.dividerNav{
    height:4px;
    background-color:#fff;
    }
.navbar.navbar-default > .container{
    border-bottom:1px solid @tmcDarkblue
    }
.menu-toggle-text{
    color:#4fb4e1;
    }
.navbar-toggle{
    border:none;
    padding:9px 1px;
    }
.navbar-toggle:hover .navbar-toggle:focus{
    background-color:none;
    }
.hover-dropdown{
    background-color:transparent;
    }
.hover-dropdown ul{
    border: medium none;
    border-radius:0px;
    background-color: rgba(0,58,99,0.80);
    padding: 25px 0;
    }
.navbar .hover-dropdown li a{
    color:#fff;
    margin: 0 18px;
    }
.header-list{
    margin-bottom:4px; 
    margin-top:15px;
    }
.navbar-brand{
    text-indent:-999px; 
    max-width:234px; 
    width:100%; 
    height:auto;
    }
.nav > li {
    display: block;
    position: static; 
    margin: 0 25px 0 0;
    }
.subscribe-input, .form-control:focus{
    box-shadow:none; 
    border-color:@tmcDarkblue;
    }
.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
    }
.navbar {
    text-align: center;
    margin-bottom:8px; 
    border-bottom:none; 
    border-top:0px; 
    border-radius:0px; 
    border-left:0px; 
    border-right:0px; 
    border-top:0px;
    }
.modeSelector{
    right:57px;
    }
.dropdown a{
    text-decoration:none;
    }
.navbar .hover-dropdown li a:hover {
    text-decoration:none;
    color:@tmcLightblue;
    }
.dropdown-menu{
    width:100%;
    text-align:center;
    box-shadow:none;
    border:none;
    border-radius:0;
    }
.modes{
    border:1px solid @tmcDarkblue;
    border-radius:0px; 
    text-align:left;
    }
.modes li a{
    color:@tmcDarkblue;
    }
.modes li a:hover{
    color:@tmcLightblue;
    }
.user-input, .pass-input{
    width:41.5%;
    float:left;
    }
.search-input{
    width:82%;
    }
.subscribe-input, .form-control{
    border-radius:0px;
    border-color:@tmcDarkblue;
    color:@tmcDarkgrey;
    float:left;
    margin-right:4px;
    }
.glyphicon-arrow-right{
    color:#c05d1a;
    }
.glyphicon-search{
    color:#c05d1a;
    }
.logo, .search-wrapper {
    padding-top:39px
    }
/*********  HEADER STYLES  *********/
.hero-image{
    margin-bottom:50px;
    }
.headlineHero a, .headlineHero a:hover{
    color:#fff;
    }
.heroWrapper{
    position:relative;
    margin:0 0 50px;
    }
.heroText{
    position: absolute;
    top: 35%;
    width: 100%;
    }
.heroContainer{
    margin: 0px auto;
    }
.intro-text{
    margin:0 auto;
    background-color: rgba(106,69,52,0.32);
    border: 2px solid #fff;
    color:#fff;
    text-align:center;
    }
.intro-text h2 {
    font-size:x-large;
    margin: 15px 0 5px;
    }
.headlineHero{
    font-family:"lato";
    font-weight:bold;
    }
.intro-text h3 {
    font-size:medium;
    margin: 8px 0 10px;
    }
.btn-default{
    border-color:#c05d1a;
    border-radius:0px;
    }
.btn-hero, .hero-btn:hover, .hero-btn:active, .hero-btn:focus{
    margin:0 auto;
    color:#fff !important;
    border:1px solid #fff !important;
    background-color:transparent !important;
    }
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
    }
.glyphicon-hero{
    color:#fff !important;
    }
.image-responsive{
    display: block; 
    height: auto; 
    width: 100%;
    }
#navbar-collapse-2, #navbar-collapse-1{
    position: static; 
    width: 100%; 
    z-index: 2147483647;
    }
.nav > li.dropdown{
    /*border-bottom:2px solid #fff;*/
    }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
    color:@tmcLightblue;
    background-color:none; 
    background:none; 
    border-bottom:2px solid @tmcDarkblue;
    }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: transparent; 
    color:@tmcLightblue;
    }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: transparent !important; 
    color: @tmcLightblue;
    }
.navbar-nav > li > a{
    border-bottom:2px solid #fff;
    }
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    background-color: #fff; 
    border-color: @tmcOrange; 
    color: #fff;
    }
.glyphicon .glyphicon-search:hover {
    color: #fff;
    }

/********* HEADLINES *********/
.headlineBorder{
    display:inline; 
    text-transform:uppercase; 
    border-bottom:3px solid @tmcGreen;
    }
.headlineBorderblue{
    display:inline; 
    text-transform:uppercase; 
    border-bottom:3px solid @tmcDarkblue;
    }
.headlineBorderwhite{
    display:inline; 
    text-transform:uppercase; 
    border-bottom:3px solid #fff;
    color:#fff;
    }

.btn-blue{
    border-color:@tmcLightblue;
    }
.btn-blue:hover, .btn-blue:active, .btn-blue:focus{
    background-color:@tmcDarkblue; 
    border-color:#fff;
    }
.glyphicon-menu-right:hover{
    color:#fff !important;
    }
.headlineGlyph:hover{
    color:@tmcLightblue !important;
    }
.btn-mobile-right {
    border:none;
    }
.btn-mobile-right:hover, .btn-mobile-right:focus, .btn-mobile-right.focus, .btn-mobile-right:active, .btn-mobile-right.active, .open > .dropdown-toggle.btn-default {
    background-color: transparent;
    }
.glyphicon-menu-right, .glyphicon-menu-left{
    /*color:@tmcLightblue;*/
    }
.glyphicon-menu-right:hover, .glyphicon-menu-left:hover{
    color:#fff;
    }

.fourXfour{
    margin-bottom: 50px;
    }

/********* INSIDE PAGE HERO IMAGE ************/
.insideHero{padding:0;}
.insidePagehero{
    display: block;
    height: auto;
    width: 100%;
    }
.halfHero{
    padding:0;
    }
.insideHerocolorPicker{
    background:orange;
    }
.pageIntroheadline{
    display: inline-block;
    color:#fff;
    }
/*********  HOMEPAGE MARKETING AREA  *********/
.marketing-wrapper{
    width:100%; 
    margin-top:50px;
    margin-bottom:50px;
    }
.mareting-section{
    padding:0;
    }
/************************* FLIPPING STYLES *******************/
.marketing-wrapper.container-fluid{
    padding:0;
    }
.marketing-wrapper h2{
    margin-bottom:20px;
    }
.flipperWrap{
    padding:0;
    }
      .card {
        width:100%;
        max-width: 750.666px;
        height: 611px;
        margin: 0px;
        display: inline-block;
        clear:both;
      }

      .front, .back {
        padding: 0px;
      }
      .front {
        background-color: transparent;
      }
      .back {
        background-color: transparent;
      }
      .card div{

          }
.blogInside, .tmsInside, .globalInside{
    margin:80px auto; 
    height:50%; 
    width:62%;
    }
.blogBack{
    background-color:@tmcOrange; 
    color:#fff; 
    padding: 0px;
    }
.blogIcon{
    background:url("../images/blogIcon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
    display: inline-block; 
    height: 38px; 
    width: 46px; 
    float:left; 
    margin:0 22px 0 0;
    }
.tmsBack{
    background-color:@tmcDarkblue; 
    color:#fff; 
    padding: 0px;
    }
.tmsIcon{
    background:url('../images/tmsIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
    display: inline-block; 
    height: 38px; 
    width: 46px; 
    float:left; 
    margin:0 22px 0 0;
    }
.globalBack{
    background-color:@tmcLightblue; 
    color:#fff;
    padding: 0px;
    }
.globalIcon{
    background:url('../images/globalIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
    display: inline-block; 
    height: 38px; 
    width: 38px; 
    float:left; 
    margin:0 22px 0 0;
    }

/**************** LEADERSHIP SLIDER STYLES *****************/
.leadershipSlider{
    margin-top:50px;
    }
.leadershipCol {
    float: left;
    }
.leadershipName{
    color:#fff; 
    height:auto; 
    width:62%; 
    background-color:@tmcOrange; 
    padding:10px; 
    margin:-85px 0 0 38%; 
    border:1px solid #fff; 
    display:block; 
    float:left;
    }
.leadershipName .glyphicon.glyphicon-menu-right.pull-right{
    color:#fff; 
    margin:-8px 0;
    }
.leadershipImg{
    display:block; 
    float:left
    }
#carousel-index{
    margin:5px 0 0;
    }
.thumbnail {
    display: block; 
    padding: 4px; 
    margin-bottom: 0px; 
    line-height: 1.42857143; 
    -webkit-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
    border-radius: 0; border: none; 
    background-color: transparent;
    }
.carousel-control {
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 15%; 
    opacity: 1; 
    font-size: 20px; 
    color: #fff; 
    text-align: center; 
    text-shadow: none;
    }
.carousel-control.left {
    background-image: none; 
    position:relative; 
    display:table; 
    height:45px;
    width:45px;
    }
.carousel-control.right {
    left: auto; 
    position:relative; 
    right: 0; 
    background-image: none; 
    display:table;
    height:45px;
    width:45px;
    }
.carousel-control {
    padding-top:0;
    }
.well{
    background-color: transparent; 
    padding: 0px; 
    border: 0px solid #fff; 
    box-shadow:none; 
    border-radius: 0px; 
    margin-bottom: 0px;
    }
.btn-darkBlue{
    border-color:#fff; 
    background-color:@tmcDarkblue; 
    height:45px;
    width:45px;
    }
.btn-darkBlue:hover, .btn-darkBlue:active, .btn-darkBlue:focus{
    border-color:#fff; 
    background-color:@tmcDarkblue;
    }
.carouselNext, .carouselPrev {
    color:#fff;
    }
/**************** My Carousel Feed Styles ****************/
.myFeed .active{
    background-color:@tmcDarkblue;
    }
.carousel-indicators li {
    background-color: rgba(0, 0, 0, 0); 
    border: 1px solid @tmcDarkblue;
    }
.feedSlider{
    margin-top:80px;
    }
.myFeed {
    bottom: 0px; 
    left: 0; 
    list-style: outside none none; 
    margin-left: 0; 
    position:relative; 
    text-align: center; 
    width: 100%;
    }
.headlineBorderblue{
    display:inline; 
    text-transform:uppercase; 
    border-bottom:3px solid @tmcDarkblue;
    }
.headlineTitle{
    padding: 4px 0;
    }
.headlineGlyph{
    color:@tmcLightblue; 
    margin:-25px 0;
    }
.headlineGlyph:hover{
    color:@tmcDarkblue;
    }
.headlineWrapper{
    border-bottom:1px solid @tmcDarkblue;
    width:60%;
    }
.headlineWrapper-green{
    border-bottom:1px solid @tmcGreen; 
    width:60%;
    }
.headlineWrapper-white{
    border-bottom:1px solid #fff; 
    width:60%;
    }
.myfeedDigit{
    color:@tmcDarkblue; 
    font-size:5em; 
    float:left; 
    clear:both;
    }
/********  BEGIN FOOTER STYLES *********/
.footer{
    border-top:1px solid @tmcDarkblue; 
    margin:50px auto; 
    padding-top:25px;
    }
.subscribeText{
    color:@tmcLightblue; 
    margin:-4px 0 4px; 
    font-size:12px;
    }
.subscribe-input{
    width:78% !important;
    }
.copywriteText{
    color:@tmcDarkgrey; 
    font-size:9.5px;
    }
.footerSocialwrapper{
    float:right;
    text-align:center;
    }
.languageSelector{
    float:left;
    }
.subscribeForm{
    float:right;
    }
.subscribe-form{
    float:none;
    margin:0 auto; 
    width:100%;
    }
.subWrapper {
    float: left; 
    width: 100%;
    }
.btnSubscribe {
    float: left;
    height: 34px;
    width: 34px;
    }

@media (max-width:@screen-lg) {
    .card{
        height:384px;
        } 
    }
@media (max-width:@screen-md) {
    .card{
        height:300px;
        } 
    .navbar-nav > li > a {
        border-bottom: 0px solid #fff;
        }
    .modeSelector{
        right:0px;
        }
    .search-input{
        width:78%;
        }
    .user-input, .pass-input{
        width:37%;
        }
    /*FOOTER*/
    .footerSocialwrapper{
        float:right; 
        margin:10px auto;
        }
    .footerSocial li{
        padding-right: 5px; 
        padding-left:0px;
        float:left; 
        width:20%;
        display:inline;
        height:auto;
        }
    .subscribeForm{
        float:right;
        }
    .footerSocial {
        margin: auto; 
/*      width: 100%;*/
        display:inline-block;
        } 
    .subscribe-input {
        float: left;
        width: 80% !important;
        }
    }
@media (max-width:@screen-sm) {
    /*FEEDSLIDER*/ 
    .headlineWrapper, .headlineWrapper-green, .headlineWrapper-white{
        width:80%;
        }
    .mobile{
        color:#fff;
        } 
    .headlineHero{
        font-size:small;
        }
    .heroText{
        top: 15%;
        }
    .skills{
        font-size:x-small;
        } 
    .navbar-collapse{
        background-color: rgba(0,58,99,0.80);
        }
    .navbar-nav{
        margin:15px -15px;
        } 
    .nav > li > a{
        text-align:left; 
        padding-left:0px; 
        padding-right:0px; 
        color:#fff !important;
        } 
    .nav > li > a:hover{
        color:@tmcLightblue !important;
        } 
    .nav > li{
        margin:0px;
        }
    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
        border-bottom:0px solid transparent;
         color:@tmcLightblue !important;
        }
    .navbar-brand{
        max-width:156px;
        margin:0 0 0 5px;
        } 
    #navbar-collapse-2, #navbar-collapse-1{
        position: absolute; 
        width: 100%; 
        z-index: 2147483647;
        }
    .subscribe-input{
        border-radius:0px; 
        border-color:@tmcDarkblue; 
        color:@tmcDarkgrey; 
        float:left; 
        margin-right:4px;
        } 
    .search-form{
        background-color:transparent !important; 
        color:#fff;
        }
    .mobileSearch-btn{
        border-color: #fff; 
        background-color:transparent;
        } 
    .mobileSearch-btn:hover{
        border-color: #fff; 
        background-color:transparent;
        } 
    .glyphicon-search {
        color: #fff;
        } 
    .glyphicon-arrow-right{
        color: #fff;
        }
    .mobileLogin{
        text-align:left;
        } 
    .login-control{
        float:none;
        }
    .user-input, .pass-input{
        margin:0 0 5px 0;
        width:100%; 
        float:none;
        } 
    .dropdown-menu{
        text-align:left;
        } 
    .mobileDropdown{
        background-color: transparent !important; 
        border: 1px solid #fff !important; 
        color: #fff; 
        margin: 5px 0 0; 
        padding: 6px 13px; 
        display: block;
        } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        background-color: #fff; 
        padding: 5px 0;
        } 
    .mobileList{ 
        background-color: #fff !important;
        border-radius: 0;
        padding: 0;
    } 
    .navbar-nav .open .mobileList{
        position:absolute; 
        width:100%;
        } 
    .mobileList li{
        padding:4px 14px; 
        border-bottom:1px solid @tmcDarkblue;
        }
    /*Footer*/ 
    .footerSocial{
        /*float:left;*/
        }
    .languageSelector img {
        margin: 0 auto;
        }
    .footerSocial {
        margin: 10px auto;
        }
    .footerSocial img{
        height:auto;
        } 
    .subscribe-input {
        width: 82% !important;
        }
    .subscribeForm{
        float:none;
        height:auto;
        margin:0 auto;
        width:95%;
        } 
    .subscribeArrow{
        color:@tmcOrange !important;
        } 
    .card{
        height: 591px;
        } 
    }
@media (max-width:@screen-xs) { 
    .card{
        height: 275px;
        }
    }
    </style>

 <div class="container-fluid heroWrapper insideHerocolorPicker">
    <div class="row">
        <div class="col-sm-5">
            <img class="image-responsive insidePagehero" src="images/aboutHero.jpg" alt="" />
        </div>
        <div class="col-sm-5 col-sm-offset-1 pageIntroheadline">
          <div class="">
             <div class="headlineWrapper-white">
                  <div class="headlineTitle">
                      <h2 class="headlineBorderwhite">ABOUT</h2>
                  </div>
              </div>
              <p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
          </div>
        </div>
    </div>
</div> 



    <div class="container">
        <div class="row">
                <div class="col-sm-5 col-sm-offset-1 fourXfour">
                    <div class="">
                        <div class="headlineWrapper-green">
                            <div class="headlineTitle">
                                <h2 class="headlineBorder">WELCOME</h2>
                            </div>
                        </div>
                        <p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
                        <a href="#"><button type="go" class="btn btn-default btn-blue"><i class="glyphicon glyphicon-menu-right"></i></button></a>
                    </div>
                </div>
                <div class="col-sm-5 col-sm-offset-1 fourXfour">
                    <div class="">
                        <div class="headlineWrapper-green">
                            <div class="headlineTitle">
                                <h2 class="headlineBorder">WELCOME</h2>
                            </div>
                        </div>
                        <p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
                        <a href="#"><button type="go" class="btn btn-default btn-blue"><i class="glyphicon glyphicon-menu-right"></i></button></a>
                    </div>
                </div>
        </div>
    </div>

Answer 1

I feel this is my best solution for this. I used the micro breakpoints for screens in the css to pull this off. I also had to change the structure I had since I could not get the headlines below to line up correctly. Here is what I did: http://www.bootply.com/i5cb1GIdxk

<div class="container-fluid heroWrapper insideHerocolorPicker">
    <div class="row">
        <div class="col-sm-6 pageHero">
            <img class="image-responsive insidePagehero" src="images/aboutHero.jpg" alt="" />
        </div>
        <div class="container">
            <div class="row">
              <div class="col-sm-5 col-sm-offset-1 pageIntroheadline">
                 <div class="headlineWrapper-white">
                      <div class="headlineTitle">
                          <h2 class="headlineBorderwhite">ABOUT</h2>
                      </div>
                  </div>
                  <p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
              </div>
            </div>
        </div>
    </div>
</div>