→ Anonymous
→ Calender

Calender

This bootstrap css example is contributed by Anonymous, on 19-Jul-2024. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Widget

Author Anonymous

656

v.4.6

Fork Fullscreen

<div class="container mt-5">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0 text-center">July 2024</h4>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Sun</th>
                                <th>Mon</th>
                                <th>Tue</th>
                                <th>Wed</th>
                                <th>Thu</th>
                                <th>Fri</th>
                                <th>Sat</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td>
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                                <td>4</td>
                                <td>5</td>
                                <td>6</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>8</td>
                                <td>9</td>
                                <td>10</td>
                                <td>11</td>
                                <td>12</td>
                                <td>13</td>
                            </tr>
                            <tr>
                                <td>14</td>
                                <td>15</td>
                                <td>16</td>
                                <td>17</td>
                                <td>18</td>
                                <td class="table-primary">19</td>
                                <td>20</td>
                            </tr>
                            <tr>
                                <td>21</td>
                                <td>22</td>
                                <td>23</td>
                                <td>24</td>
                                <td>25</td>
                                <td>26</td>
                                <td>27</td>
                            </tr>
                            <tr>
                                <td>28</td>
                                <td>29</td>
                                <td>30</td>
                                <td>31</td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .table td {
        width: 14.28%;
        height: 100px;
        vertical-align: top;
    }

.table-primary {
        position: relative;
    }

.table-primary::after {
        content: "Today";
        position: absolute;
        bottom: 5px;
        right: 5px;
        font-size: 0.8rem;
        color: #0d6efd;
    }
</style>

More Examples

Interactive Kanban Task Board

Author:
Anonymous

8 months ago

4k

v.5.3
Audio player with bootstrap

Author:
Arturo

4 months ago

1.6k

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

9 months ago

6.3k

v.5.3
Music Player
Working music player With start top buttons and progress bar

Author:
Prajwal Hallale

9 months ago

4.8k

v.5.3
Timer with bootstrap

Author:
Anonymous

4 months ago

1.2k

v.5.3
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

8 months ago

4.3k

v.5.3
Typewriter Effect

Author:
Anonymous

9 months ago

1.1k

v.4.6
bootstrap quiz template (Interactive)
Interactive MCQ Quiz show results at the end

Author:
Arturo

4 months ago

1.6k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

5 months ago

797

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

9 months ago

3k

v.5.3
Countdown timer
Countdown timer with js

Author:
Moana silva

9 months ago

7.1k

v.5.3
Music player with bootstrap 5
Animated music player design

Author:
Mateo Rojas

4 months ago

1.1k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent

BootstrapExamples From the makers of tailwindflex.com

BootstrapExamples is a free library offering a diverse range of Bootstrap CSS components. Developed by the community, it's open for anyone to use.

Contacts

Email:

[email protected]

Links

Search

Resources

Free Tailwind CSS Components Free CSS Components

© 2025 BootstrapExamples. All Rights Reserved.

v1.3