{"playground_type":"fork","logged_in_user":[],"users_to_assign":[],"bootstrap_versions":{"3.4":{"cssTags":[""],"jsTags":["",""]},"4.6":{"cssTags":[""],"jsTags":["",""]},"5.3":{"cssTags":[""],"jsTags":[""]}},"forking_from":293,"component_data":{"id":293,"slug":"bootstrap-login-modal-2","title":"Bootstrap Login Modal","description":"Elegant Login Form","html":"

","css":".modal-content { border: none; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; } .modal-header { background: linear-gradient(135deg, #0062cc, #0096ff); padding: 20px; border: none; color: white; } .modal-title { font-weight: 600; } .modal-body { padding: 30px; } .btn-close { filter: brightness(0) invert(1); } .form-control { padding: 12px 15px; border-radius: 10px; border: 2px solid #eee; transition: all 0.3s ease; } .form-control:focus { border-color: #0062cc; box-shadow: none; } .input-group-text { border: none; background: transparent; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); z-index: 4; color: #666; } .input-group { position: relative; } .btn-login { padding: 12px 20px; background: linear-gradient(135deg, #0062cc, #0096ff); border: none; border-radius: 10px; font-weight: 500; width: 100%; transition: all 0.3s ease; } .btn-login:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 98, 204, 0.3); } .social-login { display: flex; gap: 10px; margin-top: 20px; } .btn-social { flex: 1; padding: 12px; border-radius: 10px; border: 2px solid #eee; background: white; transition: all 0.3s ease; } .btn-social:hover { background: #f8f9fa; transform: translateY(-2px); } .btn-social i { margin-right: 10px; } .divider { text-align: center; margin: 20px 0; position: relative; } .divider::before { content: ''; position: absolute; left: 0; top: 50%; width: 45%; height: 1px; background: #eee; } .divider::after { content: ''; position: absolute; right: 0; top: 50%; width: 45%; height: 1px; background: #eee; } .divider span { background: white; padding: 0 10px; color: #666; font-size: 0.9rem; } .form-check { display: flex; justify-content: space-between; align-items: center; margin: 15px 0; } .password-toggle { cursor: pointer; } .register-link { text-align: center; margin-top: 20px; font-size: 0.9rem; }","javascript":null,"user_id":1468,"user_name":"cesar-ferreira","center_type":0,"is_responsive":1,"is_supports_dark_mode":0,"bs_version":"5.3","tags":[{"label":"Login Form","value":20},{"label":"Modal","value":21}]}}

Welcome Back!