Reputation: 77

Same size in Grid Bootstrap?

I am trying to set image size box similar to the text box size. I am not sure what grid number I am supposed to use I have tried a few but did not work out that well. The boxes are spaced perfect however the images under near are badly positioned.

pdf-thumb-box {
  display: inline-block !important;
  position: relative !important;
  overflow: hidden;
}

.pdf-thumb-box-overlay {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}

.pdf-thumb-box a {
  color: transparent;
}

.pdf-thumb-box a:hover .pdf-thumb-box-overlay {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  text-align: center;
  position: absolute;
  background-color: rgba(255, 0, 0, 0.58);
  color: #fff;
  width: 100%;
  height: 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.pdf-thumb-box-overlay span {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}


/**Cursor*/

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.secontainer {
  background-color: #E3F2FD;
}

.footercolour {
  background-color: #90CAF9;
}


/*material box*/

.box {
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  padding: 10px 25px;
  text-align: right;
  display: block;
  margin-top: 60px;
}

.box-icon span {
  color: #fff;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.info h4 {
  font-size: 26px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.info > p {
  color: #717171;
  font-size: 16px;
  padding-top: 10px;
  text-align: justify;
}

.info > a {
  background-color: #03a9f4;
  border-radius: 2px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: #fff;
  transition: all 0.5s ease 0s;
}

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <div class="box">
        <div class="box-icon">

        </div>
        <div class="info">
          <h4 class="text-center">Title</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!</p>

        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <div class="box">
        <div class="box-icon">
        </div>
        <div class="info">
          <h4 class="text-center">Title</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!</p>

        </div>
      </div>
    </div>
  </div>
</div>
<br>

<div class="container">
  <div class="row">

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

      <div class="pdf-thumb-box">
        <a href="#2013-Katalog" data-toggle="modal" data-target="#myModal">
          <div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg">
              <i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i>
              <i class="fa fa-eye fa-stack-1x pdf-thumb-eye">hjkhkjh</i>
              </span></div>
          <img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
        </a>

      </div>

    </div>


    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <div class="pdf-thumb-box">
        <a href="#2013-Katalog" data-toggle="modal" data-target="#myModal">
          <div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg">
          <i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i>
          <i class="fa fa-eye fa-stack-1x pdf-thumb-eye">hjkhkjh</i>
          </span></div>
          <img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
        </a>

      </div>

    </div>

  </div>
</div>


<!-- Trigger the modal with a button -->


<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>This is a large modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Answers (3)

Polynomial Proton

Reputation: 5135

You can make image width: 100% using

.pdf-thumb-box img {
  width: 100%;
}

.pdf-thumb-box img {
  width: 100%;
}

pdf-thumb-box {
  display: inline-block !important;
  position: relative !important;
  overflow: hidden;
}

.pdf-thumb-box-overlay {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}

.pdf-thumb-box a {
  color: transparent;
}

.pdf-thumb-box a:hover .pdf-thumb-box-overlay {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  text-align: center;
  position: absolute;
  background-color: rgba(255, 0, 0, 0.58);
  color: #fff;
  width: 95%;
  height: 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.pdf-thumb-box-overlay span {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}


/**Cursor*/

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.secontainer {
  background-color: #E3F2FD;
}

.footercolour {
  background-color: #90CAF9;
}


/*material box*/

.box {
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  padding: 10px 25px;
  text-align: right;
  display: block;
  margin-top: 60px;
}

.box-icon span {
  color: #fff;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.info h4 {
  font-size: 26px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.info > p {
  color: #717171;
  font-size: 16px;
  padding-top: 10px;
  text-align: justify;
}

.info > a {
  background-color: #03a9f4;
  border-radius: 2px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: #fff;
  transition: all 0.5s ease 0s;
}

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <div class="box">
        <div class="box-icon">

        </div>
        <div class="info">
          <h4 class="text-center">Title</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!</p>

        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <div class="box">
        <div class="box-icon">
        </div>
        <div class="info">
          <h4 class="text-center">Title</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!</p>

        </div>
      </div>
    </div>
  </div>
</div>
<br>

<div class="container">
  <div class="row">

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

      <div class="pdf-thumb-box">
        <a href="#2013-Katalog" data-toggle="modal" data-target="#myModal">
          <div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg">
              <i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i>
              <i class="fa fa-eye fa-stack-1x pdf-thumb-eye">hjkhkjh</i>
              </span></div>
          <img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
        </a>

      </div>

    </div>


    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <div class="pdf-thumb-box">
        <a href="#2013-Katalog" data-toggle="modal" data-target="#myModal">
          <div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg">
          <i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i>
          <i class="fa fa-eye fa-stack-1x pdf-thumb-eye">hjkhkjh</i>
          </span></div>
          <img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
        </a>

      </div>

    </div>

  </div>
</div>


<!-- Trigger the modal with a button -->


<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>This is a large modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

johannesMatevosyan

Reputation: 2208

If you need to make your image cover the whole width of a parent div the you need to give the width of an image equal to 100%.

.yourImageClass{
   width: 100%
}

In your code, bootstrap.css file gives max-width property equal to 100% therefore it does not cover the whole width. Check this: http://screencast.com/t/1cyEk0bf

Upvotes: 1

calabiyauman

Reputation: 55

Load the images on the page through your css. Then use the background-size css attribute to change the size of your image. Check out the w3c docs on that.

Upvotes: 0

Same size in Grid Bootstrap?

Answers (3)

Related Questions