Fixed button position inside bootstrap col

Question

If someaone has some time to spare plese help me resolve this hopefully samll issue...

I'm building a website using bootstrap where I want to display news... I made the grid and inserted the text but at first the col's werent the same height (the height was adjusted based on the lenght of the text) so I gave them a fixed height of 264px; but now when i have a long text the "read more" button jumps out of the col... I need help making him stay inside the col...

My HTML:

<section id="main-content">
<div class="row">
        <div class="col-md-12">
          <div class="row">
            <div class="col-md-9">
              <div id="news">
                <div class="row">
                  <div class="col-md-12">
                    <div class="row">
                      <div class="col-md-4">
                        <div class="novica">
                          <h1 class="naslov">Festival mlajših dečkov u-12</h1>
                          <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo
                            s seznamom igralcev je - tukaj</p>
                          <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="novica">
                          <h1 class="naslov">Festival mlajših dečkov u-12</h1>
                          <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo
                            s seznamom igralcev je - tukaj</p>
                          <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="novica">
                          <h1 class="naslov">Festival mlajših dečkov u-12</h1>
                          <p>Ekipa MNZ bo v nedeljo,j</p>
                          <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div>
                        </div>
                      </div>
                    </div>
                    <div class="row row-eq-height">
                      <div class="col-md-4">
                        <div class="novica">
                          <h1 class="naslov">Festival mlajših dečkov u-12</h1>
                          <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo
                            s seznamom igralcev je - tukaj</p>
                          <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="novica">
                          <h1 class="naslov">Festival mlajših dečkov u-12hsbdfjhsdjfvsdjvf</h1>
                          <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo
                            s seznamom igralcejhdvfjsdhfhsdbd h ksjdbfkhs jhv je - tukaj</p>
                          <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="novica">
                          <a href="#"><h1 class="naslov text-center">Arhiv novic</h1></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

And the CSS:

#main-content .novica {
  background-color: #ebebeb;
  font-size: 0.8em;
  padding: 10px;
  margin-top: 24px;
  height: 264px;
}

#main-content .novica a {
  text-decoration: none;
}

.naslov {
  text-transform: uppercase;
  font-size: 1.5em !important;
  color: #191E4E !important;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: bold !important;
  line-height: 1.1;
}

.gumb {
  margin-top: 25px;
  padding-bottom: 12px;
}

.gumb-sivi {
  border-color: #898989;
  background-color: #898989;
  color: #fff;
  width: 100px !important;
  height: 28px !important;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: bold !important;
  line-height: 1.1;
  border-radius: 0px !important;
}

.gumb-sivi:hover, .gumb-sivi:active, .gumb-sivi:visited {
  border-color: #898989 !important;
  background-color: #898989 !important;
  color: #fff !important;
  border-radius: 0px !important;
}

I have seen and read some post with similar issues on here but none of the solutions worked for me... I also tried using the .row-eq-height but it changed nothin...

P.S. Sorry for bad english... its not my native language

Answer 1

By using position: absolute you can achieve that.

Update the .gumb rule like this and the button will align at the bottom

.gumb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;            /* move it 12px up from bottom */
}

Note, for this work properly also the parent of the .gump need to have a position other than static, though in your case bootstrap's columns has that already set, to position: relative.

#main-content .novica {
  background-color: #ebebeb;
  font-size: 0.8em;
  padding: 10px;
  margin-top: 24px;
  height: 264px;
}

#main-content .novica a {
  text-decoration: none;
}

.naslov {
  text-transform: uppercase;
  font-size: 1.5em !important;
  color: #191E4E !important;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: bold !important;
  line-height: 1.1;
}

.gumb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
}

.gumb-sivi {
  border-color: #898989;
  background-color: #898989;
  color: #fff;
  width: 100px !important;
  height: 28px !important;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: bold !important;
  line-height: 1.1;
  border-radius: 0px !important;
}

.gumb-sivi:hover,
.gumb-sivi:active,
.gumb-sivi:visited {
  border-color: #898989 !important;
  background-color: #898989 !important;
  color: #fff !important;
  border-radius: 0px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="main-content">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-9">
          <div id="news">
            <div class="row">
              <div class="col-md-12">
                <div class="row">
                  <div class="col-md-4">
                    <div class="novica">
                      <h1 class="naslov">Festival mlajših dečkov u-12</h1>
                      <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo s seznamom
                        igralcev je - tukaj</p>
                      <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="novica">
                      <h1 class="naslov">Festival mlajših dečkov u-12</h1>
                      <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo s seznamom
                        igralcev je - tukaj</p>
                      <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="novica">
                      <h1 class="naslov">Festival mlajših dečkov u-12</h1>
                      <p>Ekipa MNZ bo v nedeljo,j</p>
                      <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div>
                    </div>
                  </div>
                </div>
                <div class="row row-eq-height">
                  <div class="col-md-4">
                    <div class="novica">
                      <h1 class="naslov">Festival mlajših dečkov u-12</h1>
                      <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo s seznamom
                        igralcev je - tukaj</p>
                      <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="novica">
                      <h1 class="naslov">Festival mlajših dečkov u-12hsbdfjhsdjfvsdjvf</h1>
                      <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo s seznamom
                        igralcejhdvfjsdhfhsdbd h ksjdbfkhs jhv je - tukaj</p>
                      <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="novica">
                      <a href="#">
                        <h1 class="naslov text-center">Arhiv novic</h1>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

the way of doing this would be to create a second bootstrap row below the one you already have and putting the buttons within that row.

Your code should look something like this:

.main-section {
  /* optional code here */
}

.main-section row {
  /* optional code here */
}

.main-section col-sm-3 {
  /* optional code here */
}

.main-section h1 {
  text-align: center;
}

.main-section p {
  /* optional code here */
}

.button {
  height: 70px;
  width: 150px;
  margin: 10px auto;
}

<div class="main-setion">
  <div class="row">
    <div class="col-sm-3">
      <h1>example header</h1>
      <p>Example text</p>
    </div>
    <div class="col-sm-3">
      <h1>example header</h1>
      <p>Example text</p>
    </div>
    <div class="col-sm-3">
      <h1>example header</h1>
      <p>Example text</p>
    </div>
    <div class="col-sm-3">
      <h1>example header</h1>
      <p>Example text</p>
    </div>
  </div>
  <div class="buttons">
    <div class="row">
      <div class="col-sm-3">
        <div class="button">
          <!-- place optional text here -->
        </div>
      </div>
      <div class="col-sm-3">
        <div class="button">
          <!-- place optional text here -->
        </div>
      </div>
      <div class="col-sm-3">
        <div class="button">
          <!-- place optional text here -->
        </div>
      </div>
      <div class="col-sm-3">
        <div class="button">
          <!-- place optional text here -->
        </div>
      </div>
    </div>
  </div>
 </div>

By creating a second row underneath but remaining within the same parent div, you create a whole new row which will align to the same level across the board. Hope this has helped.

Best of luck my friend!