→ 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

219

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

Bootstrap video player
Video player with buttons

Author:
Kemaya m

3 months ago

486

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

3 months ago

686

v.5.3
Countdown timer
Countdown timer with js

Author:
Moana silva

3 months ago

1.2k

v.5.3
Typewriter Effect

Author:
Anonymous

3 months ago

258

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

Author:
Prajwal Hallale

3 months ago

582

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

2 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

2 months ago

217

v.5.3
Parallax Image Gallery
An eye-catching gallery section with parallax scrolling effects and image captions.

Author:
Prajwal Hallale

7 months ago

397

v.5.3
Gradient Buttons

Author:
Prajwal Hallale

7 months ago

331

v.5.3
Bootstrap 5 chat template

Author:
Andreas Müller

3 months ago

320

v.5.3
Collapsible Nested list
Tree structure design for nested list

Author:
Moana silva

3 months ago

354

v.5.3
Contact us form with map

Author:
karia

7 months ago

2.5k

v.5.3

Didn't find component you were looking for?

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