Работа с строками и столбцами boostrap

Question

Итак, я пытаюсь сделать эти поля, которые будут содержать текст и, возможно, некоторые img brackground, но коробки не будут выравниваться так, как они должны на маленьком экране.

Я попробовал несколько вещей, но текст не будет выравнивать на Боттона, не разрушая выравнивание

CSS:

.bigbox { 
text-align: center; 
    padding: 80px 40px; 
} 
.bigbox .bigbox-title { 

    text-align: left; 
    font-size: 28px; 
    color: #fff; 
} 

.bigbox .bigbox-text { 
    text-align: left; 
    font-size: 18px; 
    color: #fff; 
    opacity: .85; 
    margin-bottom: 20px; 
} 
.smallbox { 
text-align: center; 
    padding: 80px 40px; 
} 
.smallbox.smallbox-title { 

    text-align: left; 
    font-size: 28px; 
    color: #fff; 
} 
.smallbox.smallbox-text { 
    text-align: left; 
    font-size: 18px; 
    color: #fff; 
    opacity: .85; 
    margin-bottom: 20px; 
} 

HTML

<div class="full-width-container"> 
     <div class="row no-space-row "> 
      <div class="col-sm-6 bg-color-base"> 
       <div class="bigbox "> 
        <h2 class="bigbox-title">BOX 1</h2> 
        <p class="bigbox-text">DESCRIPTION</p> 
       </div> 
      </div> 
      <div class="col-sm-6"> 
       <div class="smallbox bg-color-purple "> 
        <h2 class="smallbox-title">BOX 1</h2> 
        <p class="smallbox-text">DESCRIPTION</p> 
       </div> 
       <div class="smallbox bg-color-purple-dark "> 
        <h2 class="smallbox-title">BOX 1</h2> 
        <p class="smallbox-text">DESCRIPTION</p> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Ключ в это display:flex на родительских делах. Это приводит к тому, что два ребенка div s будут одинаковой высоты.

Я удалил прокладку из второго div, чтобы поместить ее ближе к большой коробке, затем position:absolute d название большой коробки в нижней части div.

Я также играл с прокладкой немного, чтобы помочь с укладкой - но не получил его стиль, чтобы он выглядел так же, как изображение выше.

.row { 
 
    display:flex; 
 
} 
 
.bg-color-base { 
 
    background:red; 
 
} 
 
.bg-color-base + div{ 
 
    padding:0; 
 
} 
 
.bg-color-purple { 
 
    background:purple; 
 
} 
 
.bg-color-purple-dark { 
 
    background:blue; 
 
} 
 
.bigbox { 
 
text-align: center; 
 
    padding: 40px; 
 
    position:absolute; 
 
    bottom:0; 
 
} 
 
.bigbox .bigbox-title { 
 

 
    align-self: flex-end; 
 
    text-align: left; 
 
    font-size: 28px; 
 
    color: #fff; 
 
} 
 

 
.bigbox .bigbox-text { 
 
    text-align: left; 
 
    font-size: 18px; 
 
    color: #fff; 
 
    opacity: .85; 
 
    margin-bottom: 20px; 
 
} 
 
.smallbox { 
 
text-align: center; 
 
    padding: 160px 40px 10px; 
 
} 
 
.smallbox.smallbox-title { 
 

 
    text-align: left; 
 
    font-size: 28px; 
 
    color: #fff; 
 
} 
 
.smallbox.smallbox-text { 
 
    text-align: left; 
 
    font-size: 18px; 
 
    color: #fff; 
 
    opacity: .85; 
 
    margin-bottom: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="full-width-container"> 
 
     <div class="row no-space-row "> 
 
      <div class="col-xs-6 bg-color-base"> 
 
       <div class="bigbox "> 
 
        <h2 class="bigbox-title">BOX 1</h2> 
 
        <p class="bigbox-text">DESCRIPTION</p> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-6"> 
 
       <div class="smallbox bg-color-purple "> 
 
        <h2 class="smallbox-title">BOX 2</h2> 
 
        <p class="smallbox-text">DESCRIPTION</p> 
 
       </div> 
 
       <div class="smallbox bg-color-purple-dark "> 
 
        <h2 class="smallbox-title">BOX 3</h2> 
 
        <p class="smallbox-text">DESCRIPTION</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 2

Здесь ты иди. Текст должен быть в абсолютно позиционированном div.

http://codepen.io/ruchiccio/pen/Kzbeqa

.bcenter { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin-right: auto; 
    margin-left: auto; 
    width: 100%; 
    text-align:center; 
}