bootstrap Archives - csshint - A designer hub

Bootstrap 5 – Responsive Login Form

admin — Sun, 30 Jul 2023 17:56:52 +0000

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




  
  
  Bootstrap 5 - Login Form
  



  
  
    
      
        
          
            Login
          
          
            
              
                Username/Email
                
              
              
                Password
                
              
              
                
                Remember Me

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

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

Bootstrap 5 copy to clipboard items with tooltips

admin — Sat, 29 Apr 2023 16:23:49 +0000

In this article we are going to learn How to create copy to clipboard items with tooltips using bootstrap. Designed by bbbootstrap.

HTML


   
      
         
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  
             Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
             Duis aute irure dolor in reprehenderit in voluptate velit  
             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.  
             Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CSS

body{
    background: #B9B4B4
}
.card{
    border: none;
    height: 100%
}
.copy-button{
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}
.tip{
    background-color: #263646;
    padding: 0 14px;
    line-height: 27px;
    position: absolute;
    border-radius: 4px;
    z-index: 100;
    color: #fff;
    font-size: 12px;
    animation-name: tip;
    animation-duration: .6s;
    animation-fill-mode: both
}
.tip:before{
    content: "";
    background-color: #263646;
    height: 10px;
    width: 10px;
    display: block;
    position: absolute;
    transform: rotate(45deg);
    top: -4px;
    left: 17px
}
#copied_tip{
    animation-name: come_and_leave;
    animation-duration: 1s;
    animation-fill-mode: both;
    bottom: -35px;
    left:2px
}
.text-line{
    font-size: 14px
}

JAVASCRIPT

function copy(text, target) {
setTimeout(function() {
$('#copied_tip').remove();
}, 800);
$(target).append("Copied!");
var input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
var result = document.execCommand('copy');
document.body.removeChild(input)
return result;
}

RESOURCES

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 5 copy to clipboard items with tooltips appeared first on csshint - A designer hub.

Bootstrap 5 simple tabbed login register form

admin — Sat, 29 Apr 2023 16:11:52 +0000

How to create simple Bootstrap tabbed login register form . Designed by bbbootstrap.

HTML

CSS

body{
     background-color: #000;
}
 .card{
     width: 400px;
     border:none;
}
 .btr{
     border-top-right-radius: 5px !important;
}
 .btl{
     border-top-left-radius: 5px !important;
}
 .btn-dark {
     color: #fff;
     background-color: #0d6efd;
     border-color: #0d6efd;
}
 .btn-dark:hover {
     color: #fff;
     background-color: #0d6efd;
     border-color: #0d6efd;
}
 .nav-pills{
     display:table !important;
     width:100%;
}
 .nav-pills .nav-link {
     border-radius: 0px;
     border-bottom: 1px solid #0d6efd40;
}
 .nav-item{
     display: table-cell;
     background: #0d6efd2e;
}
 .form{
     padding: 10px;
     height: 300px;
}
 .form input{
     margin-bottom: 12px;
     border-radius: 3px;
}
 .form input:focus{
     box-shadow: none;
}
 .form button{
     margin-top: 20px;
}

Resources

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 5 simple tabbed login register form appeared first on csshint - A designer hub.

Bootstrap 5 validation login form using vue.js

admin — Thu, 20 Apr 2023 16:49:17 +0000

Bootstrap 5 validation login form using vue.js : snippets by bbbootstrap.

HTML


    
        
            
                
                     Email or username 
                        A valid email is required!
                    
                     Password 
                        Password must be 8 character!
                    
                      
                
                
                      You have been logged in 
 Successfully

CSS

body{background: #000}.card{border: none;height: 320px}.forms-inputs{position: relative}.forms-inputs span{position: absolute;top:-18px;left: 10px;background-color: #fff;padding: 5px 10px;font-size: 15px}.forms-inputs input{height: 50px;border: 2px solid #eee}.forms-inputs input:focus{box-shadow: none;outline: none;border: 2px solid #000}.btn{height: 50px}.success-data{display: flex;flex-direction: column}.bxs-badge-check{font-size: 90px}

JAVASCRIPT

var app = new Vue({
  el: '#form1',
  data: function () {
    return {
    email : "",
    emailBlured : false,
    valid : false,
    submitted : false,
    password:"",
    passwordBlured:false
    }
  },

  methods:{

    validate : function(){
this.emailBlured = true;
this.passwordBlured = true;
if( this.validEmail(this.email) && this.validPassword(this.password)){
this.valid = true;
}
},

validEmail : function(email) {
   
var re = /(.+)@(.+){2,}\.(.+){2,}/;
if(re.test(email.toLowerCase())){
  return true;
}

},

validPassword : function(password) {
   if (password.length > 7) {
    return true;
   }
},

submit : function(){
this.validate();
if(this.valid){
this.submitted = true;
}
}
  }
});

RESOURCES

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js
https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js
https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css

The post Bootstrap 5 validation login form using vue.js appeared first on csshint - A designer hub.

Bootstrap 5 Simple Multi-Step Form

admin — Thu, 20 Apr 2023 15:27:11 +0000

Bootstrap 5 Simple Multi-Step Form : snippets by gerardo-camorlinga a bbbootstrap user.

HTML


    
        
            
                Donate
                     
                
                    Donation Type:
                    One time
                            
                            
                    
                    Recurring
                            
                            
                    
                    

                
                
                    
                    
                    
                    
                    
                    
                    
                    

                
                
                    
                    Exp Month
                        
                    Exp Year
                        

                    
                

                 
                    Thanks for your Donation!
 Your donation has been entered! We will contact you shortly!

CSS

/* your CSS goes here*/
 body {
    background: #eee
}

#regForm {
    background-color: #ffffff;
    margin: 0px auto;
    font-family: Raleway;
    padding: 40px;
    border-radius: 10px
}

h1 {
    text-align: center
}

input {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa
}

input.invalid {
    background-color: #ffdddd
}

.tab {
    display: none
}

button {
    background-color: #4CAF50;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    font-family: Raleway;
    cursor: pointer
}

button:hover {
    opacity: 0.8
}

#prevBtn {
    background-color: #bbbbbb
}

.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5
}

.step.active {
    opacity: 1
}

.step.finish {
    background-color: #4CAF50
}

.all-steps {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px
}

.thanks-message {
    display: none
}

.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Hide the browser's default radio button */

.container input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}


/* Create a custom radio button */

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}


/* On mouse-over, add a grey background color */

.container:hover input~.checkmark {
    background-color: #ccc;
}


/* When the radio button is checked, add a blue background */

.container input:checked~.checkmark {
    background-color: #2196F3;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the indicator (dot/circle) when checked */

.container input:checked~.checkmark:after {
    display: block;
}


/* Style the indicator (dot/circle) */

.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

Javascript

//your javascript goes here
var currentTab = 0;
document.addEventListener("DOMContentLoaded", function(event) {


    showTab(currentTab);

});

function showTab(n) {
    var x = document.getElementsByClassName("tab");
    x[n].style.display = "block";
    if (n == 0) {
        document.getElementById("prevBtn").style.display = "none";
    } else {
        document.getElementById("prevBtn").style.display = "inline";
    }
    if (n == (x.length - 1)) {
        document.getElementById("nextBtn").innerHTML = "Submit";
    } else {
        document.getElementById("nextBtn").innerHTML = "Next";
    }
    fixStepIndicator(n)
}

function nextPrev(n) {
    var x = document.getElementsByClassName("tab");
    if (n == 1 && !validateForm()) return false;
    x[currentTab].style.display = "none";
    currentTab = currentTab + n;
    if (currentTab >= x.length) {
        // document.getElementById("regForm").submit();
        // return false;
        //alert("sdf");
        document.getElementById("nextprevious").style.display = "none";
        document.getElementById("all-steps").style.display = "none";
        document.getElementById("register").style.display = "none";
        document.getElementById("text-message").style.display = "block";




    }
    showTab(currentTab);
}

function validateForm() {
    var x, y, i, valid = true;
    x = document.getElementsByClassName("tab");
    y = x[currentTab].getElementsByTagName("input");
    for (i = 0; i < y.length; i++) {
        if (y[i].value == "") {
            y[i].className += " invalid";
            valid = false;
        }
    }
    if (valid) { document.getElementsByClassName("step")[currentTab].className += " finish"; }
    return valid;
}

function fixStepIndicator(n) {
    var i, x = document.getElementsByClassName("step");
    for (i = 0; i < x.length; i++) { x[i].className = x[i].className.replace(" active", ""); }
    x[n].className += " active";
}

RESOURCES

https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css

https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css

The post Bootstrap 5 Simple Multi-Step Form appeared first on csshint - A designer hub.

Bootstrap 5 search bar input with icons inside

admin — Mon, 10 Apr 2023 15:57:49 +0000

Bootstrap 5 search bar input with icons inside : snippets by bbbootstrap.

RESOURCES

Bootstrap 4 CSS : https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css
Bootstrap 4 JS  : https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js
Jquery          : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
Fontawesome     : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

The post Bootstrap 5 search bar input with icons inside appeared first on csshint - A designer hub.

40+ Bootstrap Product Cards

admin — Mon, 05 Sep 2022 06:43:19 +0000

Latest Collection of 100% free Bootstrap Product Cards code examples from Codepen and other resources.

Bootstrap 4 Ecommerce products list with range filters

Author

Anand Vunnam

Made with

HTML / CSS / JS

Demo / Code Get Hosting

Bootstrap 5 ecommerce product card

Author

BBBootstrap Team

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap Multiple Item Product Carousel

Author

Tutorial Republic

Made with

HTML / CSS / JS

Demo / Code Get Hosting

Bootstrap 4 product detail window template

Author

Jatin Singh

Made with

HTML / CSS

Demo / Code Get Hosting

Author

Hamza Gourram

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 product ecommerce category page

Author

BBBootstrap Team

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 product invoice card

Author

BBBootstrap Team

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 eCommerce category product list page

Author

BBBootstrap Team

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 Product comparison template

Author

Kabir Bhatia

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 ecommerce product page with carousel and custom radio buttons

Author

BBBootstrap Team

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 ecommerce product listing with quantity and star ratings

Author

BBBootstrap Team

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 ecommerce item products list with description and rating icons

Author

Ask SNB

Made with

HTML / CSS

Demo / Code Get Hosting

Product Grid Style 43

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Product Grid Style 57

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Product Grid Style 83

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Product Grid Style 114

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Product Grid Style 142

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Product Grid Style 137

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Product Grid Style 143

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Product Grid Style 149

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Product Grid Style 150

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Product Grid Style 156

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap Product Grid Style 157

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap Product Grid Style 175

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap Product Grid Style 193

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap Product Grid Style 196

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap Product Grid Style 199

Author

bestjquery

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap Shop Product List

Author

Dey Dey

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap Product Slider

Author

Maruf-Al Bashir

Made with

HTML / CSS / JS

Demo / Code Get Hosting

Bootstrap 4 Shop Product List

Author

Dey Dey

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 product list with pricing and hover details

Author

Ask SNB

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 Product Page

Author

Kabir Bhatia

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap Products List

Author

Ondrej

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 ecommerce single product with add to cart button

Author

anwar shihab

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 ecommerce single product card

Author

anwar shihab

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 Multi-select product list

Author

Omkar Bailkeri

Made with

HTML / CSS / JS

Demo / Code Get Hosting

Bootstrap 4 Product list with add to bag and order now options

Author

Omkar Bailkeri

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 Quick Buy Product Card

Author

BBBootstrap Team

Made with

HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 ecommerce product grid view card

Author

Ask SNB

Made with

HTML / CSS

Demo / Code Get Hosting

The post 40+ Bootstrap Product Cards appeared first on csshint - A designer hub.

Bootstrap Responsive Pricing Table Snippet

admin — Fri, 02 Sep 2022 17:08:56 +0000

Amazing Bootstrap Responsive Pricing Table Snippet with Custom Hover Effects and Buttons created by startbootstrap.

The post Bootstrap Responsive Pricing Table Snippet appeared first on csshint - A designer hub.

Bootstrap Login Form with Floating Labels

admin — Fri, 02 Sep 2022 16:24:34 +0000

Look at this amazing Bootstrap Login Form with Floating Labels and Social Login Buttons Created By startbootstrap.

The post Bootstrap Login Form with Floating Labels appeared first on csshint - A designer hub.

Bootstrap Contact Form Split Image Layout

admin — Fri, 02 Sep 2022 16:19:36 +0000

Look at this A Creative bootstrap Contact Form Split Image Layout template and integrate it into your website.

The post Bootstrap Contact Form Split Image Layout appeared first on csshint - A designer hub.

bootstrap Archives - csshint - A designer hub

Bootstrap 5 – Responsive Login Form

HTML

Login

CSS

Output

Bootstrap 5 copy to clipboard items with tooltips

HTML

CSS

JAVASCRIPT

RESOURCES

Bootstrap 5 simple tabbed login register form

HTML

CSS

Resources

Bootstrap 5 validation login form using vue.js

HTML

CSS

JAVASCRIPT

RESOURCES

Bootstrap 5 Simple Multi-Step Form

HTML

Donate

Donation Type:

Thanks for your Donation!

CSS

Javascript

RESOURCES

Bootstrap 5 search bar input with icons inside

RESOURCES

40+ Bootstrap Product Cards

Bootstrap 4 Ecommerce products list with range filters

Author

Made with

Bootstrap 5 ecommerce product card

Author

Made with

Bootstrap Multiple Item Product Carousel

Author

Made with

Bootstrap 4 product detail window template

Author

Made with

Popular Products Section Using HTML , CSS , Bootstrap

Author

Made with

Bootstrap 4 product ecommerce category page

Author

Made with

Bootstrap 4 product invoice card

Author

Made with

Bootstrap 4 eCommerce category product list page

Author

Made with

Bootstrap 4 Product comparison template

Author

Made with

Bootstrap 4 ecommerce product page with carousel and custom radio buttons

Author

Made with

Bootstrap 4 ecommerce product listing with quantity and star ratings

Author

Made with

Bootstrap 4 ecommerce item products list with description and rating icons

Author

Made with

Product Grid Style 43

Author

Made with

Product Grid Style 57

Author

Made with

Product Grid Style 83

Author

Made with

Product Grid Style 114

Author

Made with

Product Grid Style 142