bootstrap Archives - csshint - A designer hub https://csshint.com/tag/bootstrap/ Sun, 30 Jul 2023 17:57:46 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 Bootstrap 5 – Responsive Login Form https://csshint.com/bootstrap-5-responsive-login-form/ Sun, 30 Jul 2023 17:56:52 +0000 https://csshint.com/?p=8442 How to create Responsive Login Form using Bootstrap 5. Designed by Meb Zone a codepen user. See the Pen Bootstrap 5 – Responsive Login Form by Web Zone (@skcals) on CodePen. HTML <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bootstrap 5 - Login Form</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" /> </head> <body class="main-bg"> […]

The post Bootstrap 5 – Responsive Login Form appeared first on csshint - A designer hub.

]]> How to create Responsive Login Form using Bootstrap 5. Designed by Meb Zone a codepen user.

Navigation Menu expand On Click

HTML

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bootstrap 5 - Login Form</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" />
</head>

<body class="main-bg">
  <!-- Login Form -->
  <div class="container">
    <div class="row justify-content-center mt-5">
      <div class="col-lg-4 col-md-6 col-sm-6">
        <div class="card shadow">
          <div class="card-title text-center border-bottom">
            <h2 class="p-3">Login</h2>
          </div>
          <div class="card-body">
            <form>
              <div class="mb-4">
                <label for="username" class="form-label">Username/Email</label>
                <input type="text" class="form-control" id="username" />
              </div>
              <div class="mb-4">
                <label for="password" class="form-label">Password</label>
                <input type="password" class="form-control" id="password" />
              </div>
              <div class="mb-4">
                <input type="checkbox" class="form-check-input" id="remember" />
                <label for="remember" class="form-label">Remember Me</label>
              </div>
              <div class="d-grid">
                <button type="submit" class="btn text-light main-bg">Login</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CSS

:root{
  --main-bg:#e91e63;
}

.main-bg {
  background: var(--main-bg) !important;
}

input:focus, button:focus {
  border: 1px solid var(--main-bg) !important;
  box-shadow: none !important;
}

.form-check-input:checked {
  background-color: var(--main-bg) !important;
  border-color: var(--main-bg) !important;
}

.card, .btn, input{
  border-radius:0 !important;
}

 

Output

Bootstrap 5 – Responsive Login Form

Bootstrap 5 – Responsive Login Form

The post Bootstrap 5 – Responsive Login Form appeared first on csshint - A designer hub.

]]> 10 Bootstrap Weather https://csshint.com/bootstrap-weather/ Tue, 18 May 2021 10:36:44 +0000 http://csshint.com/?p=5852 Latest Collection of hand-picked free Bootstrap Weather examples code and download Zip. 1. Bootstrap 4 weather card Author BBBootstrap Team Made with HTML / CSS Demo / Code Get Hosting 2. Bootstrap 4 weather report Author BBBootstrap Team Made with HTML / CSS Demo / Code Get Hosting 3. Bootstrap 4 weather widget Author Omkar […]

The post 10 Bootstrap Weather appeared first on csshint - A designer hub.

]]> Latest Collection of hand-picked free Bootstrap Weather examples code and download Zip.

1. Bootstrap 4 weather card

Bootstrap 4 weather card

Bootstrap 4 weather card


Author

  • BBBootstrap Team

Made with

  • HTML / CSS

Demo / Code Get Hosting

2. Bootstrap 4 weather report

Bootstrap 4 weather report

Bootstrap 4 weather report


Author

  • BBBootstrap Team

Made with

  • HTML / CSS

Demo / Code Get Hosting

3. Bootstrap 4 weather widget

Bootstrap 4 weather widget

Bootstrap 4 weather widget


Author

  • Omkar Bailkeri

Made with

  • HTML / CSS

Demo / Code Get Hosting

4 Bootstrap 4 climate report

Bootstrap 4 climate report

Bootstrap 4 climate report


Author

  • Omkar Bailkeri ​

Made with

  • HTML / CSS

Demo / Code Get Hosting

5 Bootstrap 4 weather report

Bootstrap 4 weather report

Bootstrap 4 weather report


Author

  • BBBootstrap Team ​

Made with

  • HTML / CSS

Demo / Code Get Hosting

6 Bootstrap 4 weather forecast sidebar

Bootstrap 4 Weather forecast

Bootstrap 4 Weather forecast


Author

  • BBBootstrap Team ​

Made with

  • HTML / CSS

Demo / Code Get Hosting

7 Weather App – FreeCodeCamp ​

Author

  • Miguel Encarnacion ​

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

8 Bootstrap Weather Card UI ​

Bootstrap Weather Card UI ​

Bootstrap Weather Card UI ​


Author

  • anik117 ​

Made with

  • HTML / CSS

Demo / Code Get Hosting

9 Bootstrap weather widget ​

Author

  • Pascal ​

Made with

  • HTML / CSS (SCSS)

Demo / Code Get Hosting

10 Bootstrap weather widget ​

Author

  • Pascal ​

Made with

  • HTML / CSS (SCSS) ​

Demo / Code Get Hosting

The post 10 Bootstrap Weather appeared first on csshint - A designer hub.

]]> 15+ Bootstrap Image Hover Effect Examples https://csshint.com/bootstrap-image-hover-effect-examples/ Wed, 10 Mar 2021 14:04:10 +0000 http://csshint.com/?p=5790 Latest Collection of hand-picked free Bootstrap Image Hover Effect examples code and download Zip. 1. Hover Effect CSS for Bootstrap Gallery Author Alice Made with HTML / CSS Demo / Code Get Hosting 2. Bootstrap Image Pop-Up Buttons with Hover Up Text Author Chris Lane Jones Made with HTML / CSS Demo / Code Get […]

The post 15+ Bootstrap Image Hover Effect Examples appeared first on csshint - A designer hub.

]]> Latest Collection of hand-picked free Bootstrap Image Hover Effect examples code and download Zip.

1. Hover Effect CSS for Bootstrap Gallery

HOVER-EFFECT CSS

HOVER-EFFECT CSS


Author

  • Alice

Made with

  • HTML / CSS

Demo / Code Get Hosting

2. Bootstrap Image Pop-Up Buttons with Hover Up Text

Bootstrap Image with hover text

Bootstrap Image with hover text


Author

  • Chris Lane Jones

Made with

  • HTML / CSS

Demo / Code Get Hosting

3. Css Image hover effects

Css Image hover effects

Css Image hover effects


Author

  • shubham chaudhari

Made with

  • HTML / CSS

Demo / Code Get Hosting

4. Simple Image Overlay Hover Effects

Simple Image Overlay Hover Effects

Simple Image Overlay Hover Effects


Author

  • Arnaud Balland

Made with

  • HTML / CSS

Demo / Code Get Hosting

5. CSS3 Image Hover Effects

CSS3 Image Hover Effects

CSS3 Image Hover Effects


Author

  • ashokpulyala

Made with

  • HTML / CSS

Demo / Code Get Hosting

7. Image text hover effects

Author

  • Trenton Kennedy

Made with

  • HTML / CSS

Demo / Code Get Hosting

8. Image Hover Effects

Author

  • MaCeLMp4

Made with

  • HTML / CSS

Demo / Code Get Hosting

9. Splitting: Image Hover Gallery

Author

  • shaw

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

10. Awesome Image Hover in Pure CSS

Author

  • MAHESH AMBURE

Made with

  • HTML / CSS

Demo / Code Get Hosting

11. Image hover with slide out title

Author

  • LittleSnippets.net

Made with

  • HTML / CSS

Demo / Code Get Hosting

12. Split Image | Hover Effect

Author

  • Dimitra Vasilopoulou

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

13. Image Hover Effects

Author

  • kw7oe

Made with

  • HTML / CSS

Demo / Code Get Hosting

14. Animation @keyframes in Image Hovers

Author

  • Vail Joy

Made with

  • HTML / CSS

Demo / Code Get Hosting

15. Simple Image Overlay Hover Effects

Author

  • Arnaud Balland

Made with

  • HTML / CSS

Demo / Code Get Hosting

16. Image Hover Effects

Author

  • Vincent Van Goggles

Made with

  • HTML / CSS

Demo / Code Get Hosting

The post 15+ Bootstrap Image Hover Effect Examples appeared first on csshint - A designer hub.

]]> 10 Bootstrap Quotes https://csshint.com/bootstrap-quotes/ Fri, 05 Mar 2021 05:30:34 +0000 http://csshint.com/?p=5767 Latest Collection of hand-picked free Bootstrap quote examples code and download Zip. 1. Bootstrap 4 Block Quote container Author BBBootstrap Team Made with HTML / CSS / JS Demo / Code Get Hosting 2. Bootstrap 4 Awesome Block Quote Author BBBootstrap Team Made with HTML / CSS Demo / Code Get Hosting 3. Bootstrap carousel […]

The post 10 Bootstrap Quotes appeared first on csshint - A designer hub.

]]> Latest Collection of hand-picked free Bootstrap quote examples code and download Zip.

1. Bootstrap 4 Block Quote container

Bootstrap 4 Block Quote

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

2. Bootstrap 4 Awesome Block Quote

Bootstrap 4 Awesome Block Quote

Author

  • BBBootstrap Team

Made with

  • HTML / CSS

Demo / Code Get Hosting

3. Bootstrap carousel with quotes

Bootstrap carousel quotes

Bootstrap carousel quotes


Author

  • Ondrej

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

4. Bootstrap quote

Bootstrap custom quote

Bootstrap custom quote


Author

  • Ondrej

Made with

  • HTML / CSS

Demo / Code Get Hosting

5. Bootstrap 4 BlockQuote

Author

  • cristina

Made with

  • HTML / CSS (SCSS)

Demo / Code Get Hosting

6. Quote Block

Quote Block

Quote Block


Author

  • Manunuu

Made with

  • HTML / CSS

Demo / Code Get Hosting

7. A Better Blockquote

A Better Blockquote

A Better Blockquote


Author

  • gdroel

Made with

  • HTML / CSS

Demo / Code Get Hosting

8. Simple Blockquote Styles

Simple Blockquote Styles

Simple Blockquote Styles


Author

  • Bruce Bentley

Made with

  • HTML / CSS (SCSS)

Demo / Code Get Hosting

9. Random Quote Machine w/ Bootstrap

Random Quote Machine

Random Quote Machine


Author

  • Derek

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

10. Simple Bootstrap/JQuery Quote Generator

Bootstrap JQuery Quote

Bootstrap JQuery Quote


Author

  • Nick Healy

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

The post 10 Bootstrap Quotes appeared first on csshint - A designer hub.

]]> 6 Bootstrap Coupons https://csshint.com/bootstrap-coupons/ Thu, 21 Jan 2021 03:03:16 +0000 http://csshint.com/?p=5432 Latest Collection of free Bootstrap coupons code examples: 1. Bootstrap 5 ecommerce flat discount sidebar Author BBBootstrap Team Made with HTML / CSS Demo / Download Get Hosting 2. Bootstrap 4 Ecommerce coupons Author BBBootstrap Team Made with HTML / CSS Demo / Download Get Hosting 3. Coupon CSS Style Author mylastof Made with HTML […]

The post 6 Bootstrap Coupons appeared first on csshint - A designer hub.

]]> Latest Collection of free Bootstrap coupons code examples:

1. Bootstrap 5 ecommerce flat discount sidebar

Bootstrap 5 ecommerce flat discount

Author

  • BBBootstrap Team

Made with

  • HTML / CSS

Demo / Download Get Hosting

2. Bootstrap 4 Ecommerce coupons

Bootstrap 4 Ecommerce coupons

Author

  • BBBootstrap Team

Made with

  • HTML / CSS

Demo / Download Get Hosting

3. Coupon CSS Style

Coupon CSS Style

Coupon CSS Style


Author

  • mylastof

Made with

  • HTML / CSS

Demo / Download Get Hosting

4. Offer cards with coupon code

Offer cards with coupon code

Author

  • llgruff

Made with

  • HTML / CSS

Demo / Download Get Hosting

5. Bootstrap 5 coupon code card

Bootstrap 5 coupon code

Author

  • Ask SNB

Made with

  • HTML / CSS

Demo / Download Get Hosting

6. Bootstrap 5 ecommerce discount coupons

Bootstrap 5 ecommerce discount coupons

Author

  • BBBootstrap Team

Made with

  • HTML / CSS

Demo / Download Get Hosting

The post 6 Bootstrap Coupons appeared first on csshint - A designer hub.

]]> 15 Bootstrap Pagination https://csshint.com/bootstrap-pagination/ Sun, 17 Jan 2021 04:06:58 +0000 http://csshint.com/?p=5425 Latest Collection of free Bootstrap Pagination code examples: 1. Bootstrap 4 awesome round pagination Author BBBotstrap Team Made with HTML / CSS Demo / Download Get Hosting Related Articles Bootstrap Counters Bootstrap search bar Bootstrap Notifications 2. Bootstrap 4 Flat pagination Author BBBotstrap Team Made with HTML / CSS Demo / Download Get Hosting 3. […]

The post 15 Bootstrap Pagination appeared first on csshint - A designer hub.

]]> Latest Collection of free Bootstrap Pagination code examples:

1. Bootstrap 4 awesome round pagination

Bootstrap round pagination

Bootstrap round pagination


Author

  • BBBotstrap Team

Made with

  • HTML / CSS

Demo / Download Get Hosting

Related Articles
  1. Bootstrap Counters
  2. Bootstrap search bar
  3. Bootstrap Notifications

2. Bootstrap 4 Flat pagination

Bootstrap 4 Flat pagination

Bootstrap 4 Flat pagination


Author

  • BBBotstrap Team

Made with

  • HTML / CSS

Demo / Download Get Hosting

3. Bootstrap 4 Flat pagination round

Bootstrap 4 Flat pagination round

Author

  • BBBotstrap Team

Made with

  • HTML / CSS

Demo / Download Get Hosting

4. Bootstrap 4 pagination with previous and next button

Bootstrap 4 pagination

Bootstrap 4 pagination


Author

  • BBBotstrap Team

Made with

  • HTML / CSS

Demo / Download Get Hosting

5. Bootstrap Pagination Style 91

Pagination in Bootstrap

Pagination in Bootstrap


Author

  • Best jQuery

Made with

  • HTML / CSS

Demo / Download Get Hosting

6. Bootstrap Pagination Style 82

pagination bootstrap

pagination bootstrap


Author

  • Best jQuery

Made with

  • HTML / CSS

Demo / Download Get Hosting

7. Bootstrap Pagination Style 93

Bootstrap Pagination - Examples

Author

  • Best jQuery

Made with

  • HTML / CSS

Demo / Download Get Hosting

8. Bootstrap Pagination Style 77

pagination html

Author

  • Best jQuery

Made with

  • HTML / CSS

Demo / Download Get Hosting

9. Bootstrap Pagination Style 58

Pagination using HTML and CSS ...

Author

  • Best jQuery

Made with

  • HTML / CSS

Demo / Download Get Hosting

10. Bootstrap Pagination Style 54

Responsive pagination

Responsive pagination


Author

  • Best jQuery

Made with

  • HTML / CSS

Demo / Download Get Hosting

11. Bootstrap Pagination Style 31

Bootstrap Pagination Responsive

Author

  • Best jQuery

Made with

  • HTML / CSS

Demo / Download Get Hosting

12. Bootstrap Pagination Style 15

jQuery Bootpag Pagination

Author

  • Best jQuery

Made with

  • HTML / CSS

Demo / Download Get Hosting

13. Bootstrap Pagination Style 4

bootstrap pagination jquery

Author

  • Best jQuery

Made with

  • HTML / CSS

Demo / Download Get Hosting

14. Bootstrap Pagination Style 8

bootstrap pagination demo

Author

  • Best jQuery

Made with

  • HTML / CSS

Demo / Download Get Hosting

15. Bootstrap Pagination Style 41

responsive pagination codepen

Author

  • Best jQuery

Made with

  • HTML / CSS

Demo / Download Get Hosting

The post 15 Bootstrap Pagination appeared first on csshint - A designer hub.

]]> 10 Bootstrap Notifications https://csshint.com/bootstrap-notifications/ Thu, 07 Jan 2021 03:42:10 +0000 http://csshint.com/?p=5429 Latest Collection of free Bootstrap Notification code examples: 1. Bootstrap 4 Push notification Modal Author Aditi Gupta Made with HTML / CSS Demo And Code Get Hosting 2. Bootstrap 4 Simple transaction notification template Author Kabir Bhatia Made with HTML / CSS Demo And Code Get Hosting 3. Bootstrap 4 notification Author Ask SNB Made […]

The post 10 Bootstrap Notifications appeared first on csshint - A designer hub.

]]> Latest Collection of free Bootstrap Notification code examples:

1. Bootstrap 4 Push notification Modal

Bootstrap 4 Push notification Modal

Bootstrap 4 Push notification Modal


Author

  • Aditi Gupta

Made with

  • HTML / CSS

Demo And Code Get Hosting

2. Bootstrap 4 Simple transaction notification template

Bootstrap notification template

Bootstrap notification template


Author

  • Kabir Bhatia

Made with

  • HTML / CSS

Demo And Code Get Hosting

3. Bootstrap 4 notification

Bootstrap 4 notification

Bootstrap 4 notification


Author

  • Ask SNB

Made with

  • HTML / CSS / JS

Demo And Code Get Hosting

4. Bootstrap 4 no internet connection information card

Bootstrap 4 no internet connection

Bootstrap 4 no internet connection


Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

Demo And Code Get Hosting

5. Bootstrap 4 Modal notification

Bootstrap 4 Modal notification

Bootstrap 4 Modal notification


Author

  • anwar shihab

Made with

  • HTML / CSS

Demo And Code Get Hosting

6. Bootstrap unify colorful notifications

Bootstrap unify colorful notifications

Bootstrap unify colorful notifications


Author

  • Dey Dey

Made with

  • HTML / CSS

Demo And Code Get Hosting

7. Bootstrap unify light notifications

Bootstrap unify light notifications

Bootstrap unify light notifications


Author

  • Dey Dey

Made with

  • HTML / CSS

Demo And Code Get Hosting

8. Bootstrap Toast Notifications

Author

  • Studio KonKon

Made with

  • HTML / CSS / JS

Demo And Code Get Hosting

9. Bootstrap notification

Author

  • grace

Made with

  • HTML / CSS / JS

Demo And Code Get Hosting

10. Bootstrap 4 notification with dropdown

Bootstrap 4 notification with dropdown

Bootstrap 4 notification with dropdown


Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

Demo And Code Get Hosting

The post 10 Bootstrap Notifications appeared first on csshint - A designer hub.

]]> Bootstrap 4 navigation bar with brand logo and name https://csshint.com/bootstrap-4-navigation-bar-with-brand-logo-and-name/ Thu, 07 Jan 2021 03:21:30 +0000 http://csshint.com/?p=5448 bootstrap navigation bar with logo: Bootstrap 4 navigation bar with brand logo and name , snippets by BBBootstrap Team. RESOURCES Bootstrap 4 CSS : https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css Bootstrap 4 JS : https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js Icons : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css Jquery : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 4 navigation bar with brand logo and name appeared first on csshint - A designer hub.

]]> bootstrap navigation bar with logo: Bootstrap 4 navigation bar with brand logo and name , snippets by BBBootstrap Team.

bootstrap navigation bar with logo

bootstrap navigation bar with logo


RESOURCES

Bootstrap 4 CSS : https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
Bootstrap 4 JS  : https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js
Icons          :  https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css
Jquery          : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 4 navigation bar with brand logo and name appeared first on csshint - A designer hub.

]]> Bootstrap 4 Toast notification with sound – Toasty https://csshint.com/bootstrap-toaster/ Thu, 07 Jan 2021 03:13:49 +0000 http://csshint.com/?p=5445 bootstrap toaster: Bootstrap 4 Toast notification with sound – Toasty , snippets by BBBootstrap Team. RESOURCES Bootstrap 4 CSS : https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css Bootstrap 4 JS : https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js Jquery : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 4 Toast notification with sound – Toasty appeared first on csshint - A designer hub.

]]> bootstrap toaster: Bootstrap 4 Toast notification with sound – Toasty , snippets by BBBootstrap Team.

bootstrap toaster

bootstrap toaster


RESOURCES

Bootstrap 4 CSS : https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
Bootstrap 4 JS  : https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js
Jquery          : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 4 Toast notification with sound – Toasty appeared first on csshint - A designer hub.

]]> Bootstrap 4 Website Footer https://csshint.com/footer-in-bootstrap/ Thu, 07 Jan 2021 02:56:21 +0000 http://csshint.com/?p=5437 footer in bootstrap: Bootstrap 4 Website Footer, snippets by BBBootstrap Team. RESOURCES Bootstrap 4 CSS : https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css Bootstrap 4 JS : https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js Icons : https://use.fontawesome.com/releases/v5.8.1/css/all.css Jquery : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 4 Website Footer appeared first on csshint - A designer hub.

]]> footer in bootstrap: Bootstrap 4 Website Footer, snippets by BBBootstrap Team.

footer in bootstrap

footer in bootstrap


RESOURCES

Bootstrap 4 CSS : https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
Bootstrap 4 JS  : https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js
Icons         : https://use.fontawesome.com/releases/v5.8.1/css/all.css
Jquery          : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 4 Website Footer appeared first on csshint - A designer hub.

]]>