A pure CSS / Bootstrap notice card: 2 templates

The Bootstrap notice cards

The notice card is like a typical yellow or other colored paper that you may stick as a reminder of some task or to write an important note and stick it to some easily “noticeable” place.

You may use notice card in websites for a special note to the users or for any other related purpose.

See the demos below where I created a few notice cards by using the Bootstrap framework along with customized CSS.

A yellow notice card with Bootstrap

In this template, a yellow notice card is created.

Bootstrap notice card

See online demo and code

The CSS:

.notice-card-shadow {

    max-width: 350px;

    position: relative;

}

.content-card{

    margin-top:30px;   

    margin-left:50px;

}

.notice-card {

    border-radius: 10px;

 

}

.notice-card {

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(164, 164, 0, 0.5);

    background-color: #FFFFFF;

    color: #252422;

    margin-bottom: 20px;

    position: relative;

    z-index: 1;

    background: #FCEBA6;

}

 

.notice-card.card-information .content {

    padding: 40px 55px;

    text-align: center;

}

.notice-card .content {

    padding: 20px 20px 10px 20px;

}

 

.notice-card .main-cat, .card .label {

    font-size: 21px;

    font-weight:800;

    margin-bottom: 0px;

    color: #7a9e9f;

}

.notice-card-shadow:before {

    background-image: url("images/shadow-card.png");

    background-position: center bottom;

    background-repeat: no-repeat;

    background-size: 100% 100%;

    bottom: -12%;

    content: "";

    display: block;

    left: -12%;

    position: absolute;

    right: 0;

    top: 0;

    z-index: 0;

}

h3 {

    font-size: 1.3em;

    font-weight: 900;

    line-height: 1.5em;

    width:auto;

    color: #008000;

}

.notice-card .description {

    font-size: 16px;

    color: #66615b;

}

 

The Markup of the notice card:

<div class="row">

    <div class="col-md-4 col-sm-6 content-card">

        <div class="notice-card-shadow">

            <div class="notice-card card-information">

                <div class="content">

                    <div class="main-cat">The main title</div>

                    <h3>Bootstrap Notice</h3>

                    <p class="description">The note of the card goes here! The note of the card goes here! The note of the card goes here! The note of the card goes here!</p>

                </div>

            </div>

        </div>

    </div>

 

</div>

 

Get the complete code from the demo page.

Another demo of notice card with pink color

Have a look at another template of notice card with pink color.

Bootstrap notice card pink

See online demo and code

The CSS used in the demo:

<style>

 

.notice-card-shadow {

    max-width: 350px;

    position: relative;

}

.content-card{

    margin-top:30px;   

    margin-left:50px;

}

.notice-card {

    border-radius: 10px;

 

}

.notice-card {

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(164, 164, 0, 0.5);

    color: #252422;

    margin-bottom: 20px;

    position: relative;

    z-index: 1;

    background: #F258DC;

}

 

.notice-card.card-information .content {

    padding: 40px 55px;

    text-align: center;

}

.notice-card .content {

    padding: 20px 20px 10px 20px;

}

 

.notice-card .main-cat, .card .label {

    font-size: 21px;

    font-weight:800;

    margin-bottom: 0px;

    color: #E2E2E2;

}

.notice-card-shadow:before {

    background-image: url("images/shadow-card.png");

    background-position: center bottom;

    background-repeat: no-repeat;

    background-size: 100% 100%;

    bottom: -20%;

    content: "";

    display: block;

    left: 0%;

    top:15%;

    position: absolute;

    right: -10%;

    top: 0;

    z-index: 0;

}

h3 {

    font-size: 1.3em;

    font-weight: 900;

    line-height: 1.5em;

    width:auto;

    color: #37408C;

}

.notice-card .description {

    font-size: 16px;

    color: #FFFF00;

}

 

 

</style>

 

Get the complete code from the demo page.

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️