Центр div внутри строки

Question

Хорошо, я знаю, что я просто делаю ошибку начинающего, но я не могу понять это. Я собирался использовать класс jumbotron, но найти изменение текста не то, что я хочу. Мне нужно создать контейнерную жидкость шириной 100% со строкой и col, в 1-й колонке будет отображаться изображение 50% экрана. Другая половина должна быть центрирована по вертикали и горизонтали к изображению. Другая проблема заключается в том, что она должна соответствовать заголовкам непосредственно под ним. Вот мой код, и я постараюсь сделать загрузку для тех, кто пытается мне помочь.

Ok Я не знаю, как долго я буду держать это изображение там, но вот снимок экрана, что у меня есть и красные прямоугольники вопросы или где модуль должен быть: 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

Я считаю, что это мое лучшее решение для этого. Я использовал микро точки останова для экранов в css, чтобы снять это. Мне также пришлось изменить структуру, которую я имел, так как я не мог получить заголовки ниже, чтобы правильно подобрать. Вот что я сделал: 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>