How to give space between cards (aligned) in materialize?

Asked

Viewed 632 times

0

I lined up the cards horizontally, but I wanted to give them more space so they’re not so centered. I noticed that it makes them centered, when I took the cards increased in size and occupied the entire space of the DIV. would like to know how to handle the size of cards. follow the code.

<div class="section">
  <div class="row">
    <div class="col 12 m4">
      <div class="card">
        <div class="card-image">
          <img src="https://udemy-images.udemy.com/course/480x270/819602_c5df_2.jpg">
          <span class="card-title"></span>

        </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action center">
          <a href="#"><a class="waves-effect waves-light btn yellow darken-4"><i class="material-icons left">play_arrow</i>Click Here</a></a>
        </div>
      </div>
    </div>
    <div class="col s12 m4">
      <div class="card">
        <div class="card-image">
          <img src="https://s-media-cache-ak0.pinimg.com/564x/19/22/b0/1922b0418aa33e053e158158420a57a5.jpg">
          <span class="card-title"></span>
        </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action center">
          <a href="#"><a class="waves-effect waves-light btn yellow darken-4"><i class="material-icons left">play_arrow</i>Click Here</a></a>
        </div>
      </div>
    </div>

    <div class="col s12 m4">
      <div class="card">
        <div class="card-image">
          <img src="http://2.bp.blogspot.com/-kuQIp1Ve4wE/VogACRfWWPI/AAAAAAAABDo/VA2VSsFN1Bw/s1600/Learn%2BJava%2BLike%2Ba%2BKid%2BBuild%2BFun%2BDesktop%2Band%2BMobile%2BApps%2B%2Budemy%2Bcupon%2Bcode%2Bfree.jpg ">
          <span class="card-title"></span>
        </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action center">
          <a href="#"><a class="waves-effect waves-light btn yellow darken-4"><i class="material-icons left">play_arrow</i>Click Here</a></a>
        </div>
      </div>
    </div>
  </div>


</div>
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.