CARDS - RESPONSIVE - BS4

by bizamajig

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
	
<div class="container">

<div class="row">
			<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
			<div class="card card-inverse card-primary text-center">
			  <img class="card-img-top" src="http://www.themdfactor.com/wp-content/uploads/2015/09/card1.jpg" alt="Card image cap">
			  <div class="card-block">
			    <h4 class="card-title">This is Card #1</h4>
			    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
			    <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
		  	</div>
			</div>
		</div>

		<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
			<div class="card card-inverse card-primary text-center">
			  <img class="card-img-top" src="http://www.themdfactor.com/wp-content/uploads/2015/09/card1.jpg" alt="Card image cap">
			  <div class="card-block">
			    <h4 class="card-title">This is Card #2</h4>
			    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
			    <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
		  	</div>
			</div>
		</div>


		<div class="col-md-3">
			<div class="card card-inverse card-success text-center">
			  <img class="card-img-top" src="http://www.themdfactor.com/wp-content/uploads/2015/09/card1.jpg" alt="Card image cap">
			  <div class="card-block">
			    <h4 class="card-title">This is Card #3</h4>
			    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
			    <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
		  	</div>
			</div>
		</div>

		<div class="col-md-3">
			<div class="card card-inverse card-info text-center">
			  <img class="card-img-top"...

CSS

/*
Tutorial Name: Bootstrap 4 Tutorial
Author: Samuel Dalusung
*/

/*@import 'main.css';*/


/* GENERAL STYLES
-------------------------------------------------*/
body {
    font-family:'Lato', sans-serif;
    font-size:1em;
    color:#777;
    font-weight:300;
    line-height:1.7;
    overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6 {
    color:#333;
    line-height:1.4;
    font-weight:700;
}

.mx-width {
    max-width:960px;
    margin:0 auto;
}

a,a:hover {
    color:#563d7c;
    text-decoration:none;
}

img {
    max-width:100%;
}

header {
    padding-bottom:50px;
}

.intro {
    font-family:'Lato';
    font-size:60px;
    line-height:1;
    font-weight:300;
    color:#fff
}

.learn {
    font-family:'Lato';
    font-size:27px;
    line-height:1.4;
    font-weight:300;
    color:#fff;
}

.jumbotron-fluid {
    padding:0;
}


/* PARALLAX
-------------------------------------------------*/
.parallax {
    text-align:center;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed!important;
    overflow:hidden;
}

.parallax-pattern-overlay {
    background-image:url(../img/pattern.png);
    background-repeat:repeat;
}


/* HEADING
-------------------------------------------------*/
.heading {
    padding-bottom:15px;
    text-align:center;
    max-width:960px;
    margin:0 auto;
    padding-top:80px;
}

.heading h2 {
    font-weight:600;
    font-family:'Raleway';
    font-size:40px;
    color:#333;
    margin:0;
    padding:5px;
}

.heading h2::first-letter {
    color:#563d7c;
    font-weight:700;
}

.heading h3 {
    font-size:1em;
    line-height:1.7;
}

#site-title {
    max-width:150px;
}


/* CONTACT
-------------------------------------------------*/
input.form-control {
    background:#fff;
    border:solid 1px #ddd;
    color:#000;
    padding:15px 30px;
    margin-right:3%;
    margin-bottom:30px;
    outline:none;
    border-radius: 0;
}



textarea.form-control {
   ...