J.DOe J.DOe - 15 days ago 5
CSS Question

How to make cards on the image

I need to make a card, on the image here similarly like this:
enter image description here

Here is my code:

HTML

<section>
<div class="download-section">
<div class="container">





<div id="raise" class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-primary">View Details</button>
</div>
</div>
</div>
</div>
</div>
</section>


CSS

.download-section {

width: 100%;
color: #fff;
background: url(../img/projects.jpg) center center no-repeat #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}


I am trying to make a card, but I don't see the table boundary. I am using Bootstrap-3.
Can someone help me? how can i fix it.

Answer

An approach of what I think you want... Something like this:

We have a container, with a row inside it that has 3 cols. Total sum must be 12, so we add 3 col-md-4.

HTML

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="panel mycard">
          <div class="panel-body">
            <p>Here goes some beautiful text</p>
            <button type="button" class="btn btn-primary">View Details</button>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel mycard">
          <div class="panel-body">
            <p>Here goes some beautiful text</p>
            <button type="button" class="btn btn-primary">View Details</button>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel mycard">
          <div class="panel-body">
            <p>Here goes some beautiful text</p>
            <button type="button" class="btn btn-primary">View Details</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

CSS

.mycard {
  border: 1px solid #ccc;
  text-align: center;
}
Comments