Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework

Bootsnipp is an element gallery for web designers and web developers, anybody using Bootstrap will find this website essential in their craft.

Free Sign upLearn More
  • Latest
  • Featured
This is a form with separate panels for login, registration, and forget password features, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The background image and font styles have been imported to the code with their URLs. The JavaScript methods have been used to enhance the responsiveness and the scrolling functionality of the form. The toggle buttons of the navbar have been created as primary type buttons and displayed with a style set of font-size ad 90%, font-weight as 400, letter-spacing as 1px, color as white, and font-family as 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the toggle buttons, in an orderly manner. The buttons take a box-shadow style of 0 6px 10px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19), in a hover event. The media quarries have been used to increase the responsiveness of the form. Source: https://codepen.io/elmorabityounes/pen/wxxPEL
This is an example of a sliding signup/ sign-in form, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The form consists of two panels; one for signup and the other one for sign-in. The users are given the ability to switch between the panels by clicking on the button. The JavaScript methods have been used to implement the sliding functionality of the panels. The font style is imported to the code with its URL. The body of the form is given the styles of font-family as 'Teko', sans-serif, background color as #86235a, and align-items as center. The information container is given a box-shadow style as 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22). The panel content is displayed with the styles of font-size as 18px, font-weight as 100, line-height as 20px, and letter-spacing as 0.5px. The 'Sign in' button is displayed with a style set of border as 1px solid #f3f3f3, background color as #23bebe, font color as #fff, font-size as 12px, font-weight as bold, and text-transform as uppercase to automatically convert the text to uppercase. Source: https://codepen.io/zaidik/pen/wvMapoM
This is an example of a sign in/ registration form, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The form consists of a login panel and a sign-in panel in a single form. The font style and style sheets have been imported to the code with their URLs. The JavaScript functions have been used to implement the opening fadeout and slide down animations for the forms. The information container is given a background color as #041122, and a box-shadow style as 1px 2px 2px rgba(4, 17, 34, 0.68). The image logo is given an opacity value of 0.4, width as 80px, and cursor style as pointer to get the hand cursor effect on hover. The logo increases its opacity to 1 and takes a transform effect of rotate(360deg) scale(1.2, 1.2) on hover. The panel titles are displayed with a font-size of 12px, and a background color as #041122, which gets changed to #01AEF2, in the focus mode. The opacity of the titles also gets changed to 0.6 on hover. The input text fields also take the background color of #285c7a, on hover. The 'Submit' button takes a transform effect as scale (0.8, 0.8), in a hover event Source: https://codepen.io/mohamed-hany22/pen/gLZQeo
This is another example of a registration form that consists of radio buttons, input text fields, and Register button. It is designed using CSS, HTML, and Bootstrap framework 4. The font style has been imported to the code with its URL. The title of the form is displayed with the styles of font-size as 32px, font-weight as 300, font color as #4c4c4c, and text-align as center. The registration container is given a width and a height of 343px, and 500px. Background color of #ebebeb, box-shadow of 1px 2px 5px rgba(0,0,0,.31), and a border style of solid 1px #cbc9c9. The radio button are given a background color as #412065. The input text fields are validated by making them required in HTML. The input text fields are given a box-shadow style as 1px 2px 5px rgba(0,0,0,.09), and a border style as solid 0px #cbc9c9. The 'Submit' button is given a background color as #412065, which changes to #2e458b, on hover. Source: https://codepen.io/alexcali93/pen/WwqRGe
This is another example of a registration form, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The form consists of input text fields and the Submit button. The JavaScript methods have been used to implement the validation on the input fields. The font style has been imported to the code with its URL. The body of the form is given the styles of font-family as "Lato", sans-serif, font color as #333, line-height as 1.4, and font-size as 16px. The registration has been given a style set of width as 550px, background color as #EEE, and opacity value as 9. The header title of the form is given the styles of font-size as 2rem, text-transform as uppercase to automatically convert the text to uppercase, and font-weight as bold, whereas the mini section of the title is given a font-size as 0.8rem. The input text fields are given a font-size as 1.1rem, and border as 1px solid #D3D3D3. In a focus event, the fields take the styles of border-color as #AAA, and box-shadow as 0px 0px 5px 0px #AAA. The 'Submit' button also takes a box-shadow style as 0px 0px 10px 0px #4E59E4, in a hover event. Source: https://codepen.io/AutonomousHC/pen/hgJzx
This is another example of a registration form, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The background image, font style, and Bootstrap styles have been imported to the code with their URLs. The JavaScript methods have been used to implement the validation on the input text fields. The information container is given a height of 680px, a width of 450px, and a box-shadow style of 0 5px 20px #666. The title tabs of the form are displayed with a text-transform style as uppercase to automatically convert the text to uppercase, font size as 16px, font-weight as 600, and font color as #fff. The tabs take a border-bottom style as 3px solid #953EE4 and change the opacity to 1, in the focus mode. The input text field labels are given a border style of 2px solid transparent, whereas the field labels are given the styles of opacity as 0.5, text-transform style as uppercase, font-weight as 600, and font-size as 12px. The fields take a border style of 2px solid #4989FF, in a focus event and 2px solid #ff3052, in an error. Source: https://codepen.io/archakov/pen/graLPR
This is another design of a signup/ sign-in form, created using CSS, HTML, and Bootstrap framework 4. The form consists of two panels; one for signup and the other one for login using social media accounts. The body of the form is given a background color as #efefef, font color as #777, font-family as sans-serif, and font-weight as 300. The login box is given a height of 400px, width of 600px, and a box-shadow style as 0 2px 4px rgba(0,0,0,0.6). The title of the form is displayed with a font-weight of 300, and a font-size of 28px. The input text fields are given a border-bottom style as 1px solid #aaa, and a font-size as 15px. The 'Submit' button is given a cursor style as pointer, text-transform style as uppercase to automatically convert the text to uppercase. The button is given a background color as #f44336, which gets changed to #ff5722 on hover. Source: https://codepen.io/MiroslavDina/pen/NONaVR
This is another example of a responsive registration form, designed using CSS, HTML, and Bootstrap framework 4. The font styles have been imported to the code with their URLs. The body of the form is given the styles of font-family as 'Raleway', sans-serif, font-size as 14px, and font color as #fff. The login wrapper is given the background color of #a9e5e5. The title of the form is displayed with a font-size of 2.5em, whereas the subtitle of the form is displayed with a font-size of .85em, and a border-bottom style as 4px solid rgba(45,57,69). The title of the input fields is displayed with a font-size of 1.65em, whereas the input field labels are displayed with a font-size of 1.25em. The input text fields are given a background color as #fff, box-shadow as 0 0 1px, width as 100%, height as 4em, border-color as #fff, and transition style as border-color .4s ease-in-out. The fields take a border style as 2px solid #46698B, in a focus event, whereas the email and password fields take the border style of 2px solid #FF7463. The 'Signup' button changes its opacity value to .8, in a hover event. Source: https://codepen.io/Aakash-dev/pen/NYwPjo
This is an example of a stylish login page, designed using CSS, HTML, and Bootstrap framework 4. The background image and the font style has been imported to the code with their URLs. The body of the form is given a background color as #0c0d1f, and a font family style as 400 15px 'Didact Gothic', sans-serif. The login container is given a background color as rgba(255, 255, 255, 0.05), and a box-shadow style as 0 0 20px 0 rgba(0, 0, 0, 0.4), 0 0 0 2000px rgba(12, 13, 31, 0.3). The title of the form is displayed with a font family style as 400 48px 'Lobster', cursive, text-transform style as uppercase to automatically convert the text to uppercase, and text shadow style as 0 0 15px white. The Signup link is displayed with a font color of #ae9a51, which takes an underline effect in a hover event. The input text fields are given a border bottom style as 1px solid rgba(0, 0, 0, 0.2). The input fields take a border bottom color of #0c0d1f, in a focus event. The login button is given a background color as #ae9a51. Source: https://codepen.io/-n3veR/pen/vJBgBo

Login Page

4.3.1
This is an example of a responsive registration form, designed using CSS, HTML, and Bootstrap framework 4. The background image and the font style has been imported to the code with their URLs. The body of the form is given a font family style as 'Droid Serif', serif. The title of the form is displayed with the styles of text-align as center, line-height as 3rem, height as 3rem, background as rgba(3, 3, 55, 0.7), font-size as 1.4rem, and font color as #d3d3d3. The input text fields are given a transparent background, border-left style as 4px solid, and border-color as #FF0000, and font color style as white. The input text fields take the background color of rgba(235, 30, 54, 0.3) in a focus event. The 'Register' button is given the styles of background color as rgba(235, 30, 54, 1), font color as white, and cursor style as pointer to get the hand cursor effect on hover. The input fields have been validated by making them required in HTML. Source: https://codepen.io/andreimarian/pen/XeZyQK
This is an example of a sliding signup and sign in form, designed using CSS, HTML, and Bootstrap framework 4. The form consists of two panels; one for signup and the other one for sign in. The users are given the ability to switch between the panels by clicking on the button. The background color of the form is set as #092525. The information container is given a box-shadow style as 0 15px 30px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2), and a background color as linear-gradient(to bottom, #efefef, #ccc). The overlay panel is given a background color as linear-gradient(to bottom right, #7FD625, #009345). The overlay container takes a transform style of translateX(-20%) when it's on left side and translateX(0), when it's on right side. The input text fields are given a background color as #eee, border bottom style as 1px solid #ddd, and a box-shadow style as inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 -1px 1px #fff, 0 1px 0 #fff. The buttons are given a text-transform style as uppercase to automatically convert the text to uppercase, and takes a transform style of scale(0.9), in a focus event. Source: https://codepen.io/webnoobcodes/pen/qBWbwoJ
This is an example of a sing in/ signup form layout, designed using CSS, HRML, and Bootstrap framework 4. The font style has been imported to the code with its URL. The body of the form is given a style set of background color as #DDD, font-size as 16px, font color as #222, font-family style as 'Roboto', sans-serif, and font-weight as 300. The form consists of two panels; one for signup and the other one for login using social media accounts. The information container is given a style set of width as 600px, height as 400px, background color as #FFF, and box- shadow as 0 2px 4px rgba(0, 0, 0, 0.4). The title of the signup section is displayed with a font-weight as 300, and a font-size as 26px. The input text fields are given a height as 32px, width as 220px, border bottom style as 1px solid #AAA, font weight as 400, and font-size as 15px. The text fields take a border bottom styles of 2px solid #16a085, in a focus event. The buttons take a box-shadow style of 0 1px 2px rgba(0, 0, 0, 0.4), in a hover event. Source: https://codepen.io/SourenStepanyan/pen/PGYaWZ
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter