How do I get the title over the image - bootstrap?

Question

How do I get the title over the image - bootstrap?

Navigation

#1 by (1 votes)

1

How do I put the title on top of the image with bootstrap?

<divclass="row">
           <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe ">
              <a data-toggle="modal" data-target="#exampleModal" href="#" ><img src="https://www.bigstockphoto.com/images/homepage/2016_popular_photo_categories.jpg"class="img-responsive"></a>
           </div>

CSS:

.gallery-title
{
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}
.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #42B32F;
    margin-bottom: 30px;

}
.filter-button:hover
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #42B32F;

}
.filter-button.active
{
    background-color: #42B32F;
    color: white;
}
.port-image
{
    width: 100%;
}

.gallery_product
{
    margin-bottom: 30px;
}

php css bootstrap

asked by anonymous 31.03.2017 / 18:30

1 answer

How do I play a sound only while an animated TextView is playing? Error connecting to PostgreSQL by pgAdmin 4

score 1 · Accepted Answer

You can position the text with position:relative , example:

.gallery_product
{
    margin-bottom: 30px;
}
.gallery_product .title{
  color:#fff;
  margin: 0;
  position:relative;
  bottom:50px;
  left:10px;
}
.gallery_product .title small{
  display:block;
}

<div class="row">
     <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe ">
        <a data-toggle="modal" data-target="#exampleModal" href="#" ><img src="https://www.bigstockphoto.com/images/homepage/2016_popular_photo_categories.jpg"class="img-responsive"></a>
        <h4 class="title">Título <small>Sub título</small></h4>
     </div>
</div>