I have a col-md-6 div with an image already place inside the div, and i need to place some text specifically under the logo in the image. every attempt keeps placing it under the image, please help . i have no css in place yet
<div class=".container-fluid">
<div class="set7">
<div class="row">
<div class="col-md-6 text-center">
<img src="images/dpfront1.png">
<h6>Copyright © 2016 DepotSquare.All Rights Reserved. </h6>
</div>
</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</div>
Is this what you wanted?
.image {
position: relative;
width: 100%;
/* for IE 6 */
}
#img_head {
position: absolute;
//top: 10px;
left: 0;
width: 100%;
}
<!-- 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-fluid">
<div class="set7">
<div class="row text-center">
<div class="col-md-6 text-center image">
<img src="http://3.bp.blogspot.com/-JhISDA9aj1Q/UTECr1GzirI/AAAAAAAAC2o/5qmvWZiCMRQ/s1600/Twitter.png">
<div class="col-md-6" id="img_head">.col-md-6
<br />
<h6>Copyright © 2016 DepotSquare.All Rights Reserved. </h6>
</div>
</div>
</div>
</div>
</div>
</div>
Replace .col-md-6 with whatever text you want.
Related
I'm working on a site for a class project and everything is working fine except when I tried to make the footer sticky the sidebar overlaps the footer when content is added dynamically.
I have the sidebar height set to 90vh because I could not figure out how to get the background color to take up the full height of the sidebar when there was no content I set the sidebar overflow to auto which was working fine but when I try to make the footer sticky it works find until the content grows to big. Scrollbars do appear but the sidebar overlaps the footer.
Here is the html & css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.main-image {
background-image: url(../images/crypto.jpg);
background-repeat: no-repeat;
height: 90vh;
max-width: 100%;
clip: rect(0, 400px, 200px, 0);
}
.sidebar {
height: 90vh;
overflow: auto;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Crypto & Cocktails </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="icon" href="./assets/images/favicon.ico">
</head>
<body>
<!-- header -->
<header id="top">
<div class="row">
<div class="col s12 center #26a69a teal lighten-1">
<img src="assets/images/cryptococktailsheader.jpg" class="responsive-img" alt="Crypto & Cocktails" />
</div>
</div>
</header>
<main>
<div class="row">
<!-- sidebar -->
<div class="col s12 l2 #00695c teal darken-3 sidebar">
<span class="flow-text center">
<h5 class="white-text">Search Coinbase</h5>
<form id="coin-search" action="">
<input id="coin-input" type="text" class="white" name="coin-input"
placeholder="Cryptocurrency Ticker">
<button class="btn btn-lg btn-primary submitButton">Search</button>
</form>
</span>
<div id="myCoins" class="col-12"></div>
</div>
<div class="col s12 l10 content">
<div class="row">
<div class="col s12 l3 ">
<h2 id="coin-name"></h2>
<span id="coin-display" class="flow-text"></span>
<h3 id="drinkName"></h3>
<span id="drinkImg"></span>
<a class="right hide-on-med-and-up" href="#top">Back to top</a>
</div>
<div class="col s12 l7 main-image hide-on-small-only"></div>
</div>
</div>
</div>
</main>
<footer class="#26a69a teal lighten-1 center">
<div class="container">
<div class="row">
<div class="col l12">
<h5 class="white-text">Developers - Contact Us</h5>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2021 Copyright
</div>
</div>
</div>
</footer>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Materialize Framewrk -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<!-- Custom Scripts -->
<script src="./assets/scripts/main.js"></script>
<script src="./assets/scripts/cocktail.js"></script>
<script src="./assets/scripts/coinbase.js"></script>
</body>
We just had to add the z-index: 1; to the footer.
Website structure currently looks like this:
index.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<!-- Own styles -->
<link rel="stylesheet" href="css/styles.css">
<title>My website</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-4 sidebar d-flex flex-column align-items-center justify-content-center text-center fixed-top">
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
<p class="text-muted mt-5 mb-0">123 456 789</p>
<p class="text-muted">test#test.com</p>
<p class="mt-5 text-white">
Language 1
|
Language 2
</p>
<p class="social">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-twitter"></i></i>
</p>
<p class="text-muted">© Someone | 2015 - 2019</p>
</div>
<div class="col-12 col-md-8 offset-md-4 d-flex flex-column mt-5 content">
<p>Content</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
styles.css:
#media (max-width: 767.98px) {
.sidebar {
height: auto !important;
padding-top: 10px;
padding-bottom: 10px;
position: static;
}
}
.sidebar {
background-color: #9DB9E8;
height: 100vh;
}
On devices with class md and less I want to split sidebar on the left into two parts. First part should be on the top of the page only with following lines of code:
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
Second part should be at the bottom of the page (under div with class content) and contain all the remaining lines of code from sidebar. Both parts should have same styles as sidebar.
How do I achieve this in Bootstrap 4?
To do this, you should split them into two divs.
<div id="section1">
(what ever you want in 1st section.)
</div>
<div id="section2">
(whatever you want in 2nd section.)
</div>
Good day, slight issue here, I cannot seem place all three of my images in the same row together, can anyone help solve the issue? the first is in one row, then the second and third overlap each other. I have already used bootstrap's 12 column grid but the other 2 just kept going down a row. Also, is there a bootstrap code where the image adjusts to the row? thank you for reading.
heres a js fiddle link: https://jsfiddle.net/wxofr2ae/5/
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Homepage</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="img/link_health.jpg" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="img/link_wellness.jpg" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
</body>
</html>
CSS:
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 300px;
height: 300px;
}
Okay! I just solve your problem by doing just 3 steps:
Step 1: add the closing tag for the <div class="box"> of the BEAUTY block.
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you forgot this closing tag -->
Step 2: remove a redundant </div> tag of the <div class="container"> block
Step 3: change the css class, make width: 100%, this step will solve the image overlap:
.bhw_link {
width: 100%;
height: 300px;
}
You missed closing div <div class="box"> and change css of
.bhw_link {
width: 100%;
height: auto;
}
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 100%;
height: auto;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link"></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
It's just because you ommitted the closing tag
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you omitted this closing tag-->
</div>
Try class "img-responsive" for your image tag if you want to scale the image to the parent element or just set it to width 100% because the image is already inside the grid system of bootstrap
Using Bootstrap and have row which consist of 4 <div>. I need to column which is more them col-xx-1 and less than col-xx-2. How can I set half of col-xx-2 and rest space pass to next div?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-2">
THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
</div>
<div class="col-sm-5">
third text here
</div>
<div class="col-sm-1">
forth text here
</div>
<div class="col-sm-1">
forth text here
</div>
</div>
</div>
</div>
I think you have to create sub columns.
So
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-7"> // Extend the length to combine the two rows
<div class="col-sm-4"> // Gives 1/3 of the 8 length column
THIS ONE IS "COL-SM-1.5ish"
</div>
<div class="col-sm-8"> // Gives 2/3 of the 8 length column.
</div>
</div>
...
I combined the 2 columns together to make it col-sm-7, then did subcolumns within there, that give you more room to work with inside the main column. You can adjust accordingly from there.
Sorry i cant give you a 100% correct answer, i usually just browse for answers, hopefully this helps or guides you in the correct direction.
You can define your own classes on top of bootstrap
Bootstrap uses a 12 column grid. Your total columns need to equal 12. You had 3+2+5+1+1 = 12 originally. Now its 3+1.5+5.5+1+1 = 12
I have converted your original col-sm to col-xs instead, since its easier to read on stackoverflow. The principle is the same
[class*=col]{
box-sizing: border-box;
border: 1px solid black;
}
.col-xs-15,
.col-xs-55 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/*e.g. change this min-width depending on if you are using col-md, col-lg, etc*/
/*e.g. col-sm set min-width to 768px;*/
#media (min-width: 1px){
.col-xs-15,
.col-xs-55{
float: left;
}
.col-xs-15 {
width: 12.5%;
}
.col-xs-55 {
width: 45.8333333333%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjxsfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- your original file, I fixed errors you had here (you forgot to specify one row)-->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
first text here
</div>
<div class="col-xs-2">
THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
</div>
<div class="col-xs-5">
third text here
</div>
<div class="col-xs-1">
forth text here
</div>
<div class="col-xs-1">
forth text here
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- With changes -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
first text here
</div>
<div class="col-xs-15">
THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
</div>
<div class="col-xs-55">
third text here
</div>
<div class="col-xs-1">
forth text here
</div>
<div class="col-xs-1">
forth text here
</div>
</div>
</div>
</div>
</div>
I suggest looking at the bootstrap source code to implement your own classes as well
https://github.com/twbs/bootstrap/blob/v3.4.0-dev/dist/css/bootstrap.css
Simple by giving additional custom class and add it to your media-query
.custom-width{
width:15% !important;
}
Adjust your width in such a way so that it won't overflow your row
.col-sm-2,
.col-sm-3,
.col-sm-5,
.col-sm-1 {
border: 1px solid;
}
#media only screen and (min-width: 768px) {
/* Styles */
.custom-width {
width: 15% !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-2 custom-width">
THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
</div>
<div class="col-sm-5">
third text here
</div>
<div class="col-sm-1">
forth text here
</div>
<div class="col-sm-1">
forth text here
</div>
</div>
</div>
</div>
right now I'm working with materializeccs cards, but I have an issue with these. The thing here is that I want the card to be the same size as the image height is, so there will not be a white space under the image when resizing the screen. This is the code I have right now, If the screen goes smaller the image starts to make smaller too(cause the responsive-img class), leaving more and more white space under it.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/190/100/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
And this is how I need it, no matter what the screen size is, the card height must be the same as the image. Please help. Thank you all.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/100/190/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
try adding this css to customize you output :
.card-stacked {
max-height: 100px;
display: inline-block;
}
.card .card-content {
padding: 15px 25px !important;
}
.card-action {
padding: 5px 25px !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/190/100/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
try to add classes/styles:
.card-image: {
overflow: hidden;
max-width: 50%;
}
.card-image img {
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/100/190/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>