→ 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

243

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

Marquee Animation
On hover stop effect

Author:
Anonymous

4 months ago

975

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

4 months ago

636

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

1 week ago

75

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

Author:
Prajwal Hallale

4 months ago

751

v.5.3
Typewriter Effect

Author:
Anonymous

4 months ago

301

v.4.6
Interactive Kanban Task Board

Author:
Anonymous

2 months ago

1.3k

v.5.3
Countdown timer
Countdown timer with js

Author:
Moana silva

4 months ago

1.7k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

1 week ago

59

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

2 months ago

335

v.5.3
Interactive Right-Side Menu
A sleek and responsive right sidebar featuring user profile, navigation, and activity feed with modern design elements

Author:
Mason Ashford

1 week ago

40

v.5.3
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
karia

8 months ago

315

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

1 week ago

75

v.5.3

Didn't find component you were looking for?

Search from 210+ 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

Resourses

Free Tailwind CSS Components

© 2024 BootstrapExamples. All Rights Reserved.

v1.2