How to make cards on the image


Tags: html,css,html5,twitter-bootstrap,twitter-bootstrap-3

Problem :

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.



Solution :

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;
}

    CSS Howto..

    how to change stack order of of text label in JavaScript?

    Best practice: How to use (repeat) CSS style attributes correctly?

    How to overlay zoom icons over images and always keep them lined up perfectly?

    Show 100% of background

    How to Replace image in CSS background using jQuery?

    Div style in css, how to start under then button

    How to make the same distance between tags with only CSS?

    How do I align 2 divs (each has its own padding) next to each other?

    How to set background color with opacity by css?

    How to make horizontal lines with words in the middle using CSS?

    How to push up text in CSS?

    How to code CSS for all browsers in jQuery.css() method?

    CSS how do you stretch to fit and maintain the aspect ratio?

    how to make 2 fixed-width sidebar div and 1 flexible-width main div?

    on hover and on click how to fade out image and fade in content text

    How do I fit custom size icons into jQuery UI buttons?

    How to parse CSS font shorthand format

    How to add css in php file? [closed]

    How to simulate multiple
    tag with CSS

    How to capture extra css class in addition to the pseduo class in this less (css) code?

    How do I get a computed style?

    How to show only half of bootstrap glyphicon with css

    How to get CSS to E-Mails back in Magento 1.9.1

    How do I change the css of a different element on hover?

    How do I apply properties to a previous sibling on hover?

    How do I position images left and right in wordpress post

    How to remove extra space under paragraph in HTML/CSS

    how to make a custom scroll bar with css

    how to make the navbar fixed to top

    CSS: How to change font-size of something that already has “font-size: 0.9em !important” on it [duplicate]