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 an example of a classic newsletter subscription form, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The font and Bootstrap styles are imported to the code with their URLs. JavaScript methods have been used to display the subscription form when the page is refreshed. The body of the form is given a font-family style of 'Open Sans', sans-serif, and a background color of #9f9f9f. The title of the subscription form is displayed using the styles of font color as #000, text-align as center, font-family as 'Raleway', sans-serif, font-weight as 800, font-size as 30px, and text-transform style as uppercase to automatically convert the text to uppercase. The close button is given an opacity of 0.5, which gets changed to 0.8, on hover. The input text field take a box-shadow of 0 0 8px rgba(0, 0, 0, 0.1), in the focus mode. The 'Subscribe' button is given a style set of font color as #fff, background color as #353535, transition as all 0.4s, font-family as 'Raleway', sans-serif, and text-transform as uppercase. The button changes its background color to #171717, and takes a box-shadow style of 0 0 8px rgba(0, 0, 0, 0.4), in a hover event. Source:https://www.tutorialrepublic.com/snippets/preview.php?topic=bootstrap&file=classic-newsletter-signup-form
This is an example of a sign-up form with a blue background, designed using CSS, HTML, and Bootstrap framework 4. The font and CSS styles are imported to the code with their URLs. The form consists of the input text fields and the 'Sign up' button'. The body of the form is given the styles of font color as #fff, background color as #344a71, and the font-family style as 'Roboto', sans-serif. The information card is given a width of 400px, font color as #9ba5a8, background color as #fff, box-shadow style as 0px 2px 2px rgba(0, 0, 0, 0.3). The form title is given a font color as #333, and the font-weight style as bold. The input text field labels are displayed with a font-size of 14px. The text fields are given a border color of #e1e4e5, which gets changed to #49c1a2, in the focus mode. The 'Signup' button is displayed with a font-size of 16px and given a background color of #49c1a2, which gets changed to #3cb094, on hover. Source: https://www.tutorialrepublic.com/snippets/preview.php?topic=bootstrap&file=cool-sign-up-form
This is another example of a sign in form with an avatar image, designed using CSS, HTML, and Bootstrap framework 4. The icons, avatar image, font, and Bootstrap styles are imported to the code with their URLs. The form consists of input text fields, avatar image, social media sign-in buttons, and the sign-in button. The body of the form is given a basic style set of font color as #fff, background color as #9e9e9e, and font-family style as 'Open Sans', sans-serif. The login card is given a width of 310px, font color of #999, background color of #fff, and a box-shadow style of 0px 2px 2px rgba(0, 0, 0, 0.3). The input text fields are given a background color of #e3e3e3, which gets changed to #99c432 in a hover event. The title of the form is displayed with the styles of font-size as 24px, font color as #454959, margin as 45px 0 25px, and the font-family style as 'Francois One', sans-serif. The avatar image is given a background color of #70c5c0, and the border-radius style as 50% to get the circle shape. The 'Sign in' button takes the styles of font-size of 16px, font-weight as bold, and the background color as #99c432, in the active mode. Source:https://www.tutorialrepublic.com/snippets/preview.php?topic=bootstrap&file=sign-in-form-with-avatar-image
This is an example of a green colored sign in form with an avatar icon, designed using CSS, HTML, and Bootstrap framework 4. The avatar icon, font, and Bootstrap styles are imported to the code with the URLs. The body of the form is given the styles of font color as #4e4e4e, background color as #e2e2e2, and font-family style as 'Roboto', sans-serif. The form consists of the avatar icon, input text fields, and a 'Signin' button. The login card is given a width of 380px, background color of #fff, and a box-shadow style of 0px 2px 2px rgba(0, 0, 0, 0.3). The input text fields are given a background color of #f2f2f2, and a font-size of 16px. In the focus mode, the fields take the background color of #91d5a8, and a border color style of #e9f5ee. The login form title is displayed with a font-size of 34px. The avatar icon is given a background color of #4aba70, box-shadow style of 0px 2px 2px rgba(0, 0, 0, 0.1), height and a width of 100px, and the border –radius style as 50% to get the circle shape. The 'Signin' button is given a background color of #4aba70, which gets changed to #40aa65, in a hover event. Source:https://www.tutorialrepublic.com/snippets/preview.php?topic=bootstrap&file=green-colored-sign-in-form-with-avatar-icon
This is another stylish Sign-in form with circle shape social media buttons, designed using CSS, Html, and Bootstrap framework 4. The social media icons, font, CSS, and Bootstrap styles are imported to the code with their URLs. The body of the form is given the styles of font color as #434343, background color as #dfe7e9, and font-family style as 'Varela Round', sans-serif. The input text fields are given a font-size of 16px, and a border color of #5cb85c, to be activated on hover. The sign-in form is given a width of 400px, background color as #fff, and a box-shadow style as 0px 2px 2px rgba(0, 0, 0, 0.3). The title of the form is displayed with a font-size of 34px. The 'Sign in' button is created as a success type button and given the styles of border color as border-color: #5cb85c, font-size as 18px, font-weight as bold, and text-align as center. The 'Sign in' button changes its background color to #5cb85c, and the opacity value to 0.8, in a hover event. The social media buttons are given a border-radius as 50% to get the circle shape, and given three different background colors as #507cc0, #64ccf1, and #df4930. The buttons change their opacity to 0.8 on hover. Source: https://www.tutorialrepublic.com/snippets/preview.php?topic=bootstrap&file=sign-in-form-with-circular-social-buttons
This is another example of a signup form, designed using CSS, Html, and Bootstrap framework 4. The font, CSS, and Bootstrap styles are imported to the code with their URLs. The body of the form is given the styles of font color as #999, background color as #e2e2e2, and font-family style as 'Roboto', sans-serif. The input text fields are given a border color of #e1e1e1, which changes to #00cb82 on hover. The form header is given the styles of text-align as center, background color as #00cb82, border-bottom as 1px solid #eee, and font color as #fff. The form title is displayed with the styles of font-size as 34px, font-weight as bold, and font-family as 'Pacifico', sans-serif, whereas the subtitle is displayed with the styles of font-size as 17px, line-height as normal, and font-family as 'Courgette', sans-serif. The signup container has the styles of font color as #999, background color as #f0f0f0, and box-shadow style as 0px 2px 2px rgba(0, 0, 0, 0.3). The form labels are displayed with a font-size of 14px. The 'Signup' button is created as a primary type button and given the styles of font-size as 16px, font-weight as bold, and background color as #00cb82, which changes to #00b073, in hover and focus events. Source: https://www.tutorialrepublic.com/snippets/preview.php?topic=bootstrap&file=start-free-trial-sign-up-form
This is another example of a simple signup form, designed using CSS, Html, and Bootstrap framework 4. The font, CSS, and Bootstrap styles are imported to the code with their URLs. The body of the form is given the styles of font color as #999, background color as #f3f3f3, and font-family style as 'Roboto', sans-serif. The input text fields are given a font-size of 14px, and a border-color of #eee, which changes to #5cd3b4, in a focus event. The signup container is given a width of 500px, font color of #999, background color of #fff, and a box-shadow of 0px 2px 2px rgba(0, 0, 0, 0.3). The title of the form is displayed with a style set of font color as #333, display as inline-block, and a border-bottom as 3px solid #5cd3b4. The 'Signup' button is created as a primary type button and given the styles of font-size as 16px, font-weight as bold, and background as #5cd3b4. The background color of the button changes to #41cba9, in hover and focus events. Source: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=sign-up-form-horizontal
This is an example of a Signup form with rounded social media buttons, designed using CSS, Html, and Bootstrap framework 4. The form consists of the signup card, social media buttons, input text fields, 'Signup' button, and a 'Login' link. The font, CSS, and Bootstrap styles are imported to the code with their URLs. The body of the form is given the styles of background color as #dfe7e9, and font-family as 'Roboto', sans-serif. The signup container is given a width of 480px, background color of #fff, and a box-shadow style of 0px 2px 2px rgba(0, 0, 0, 0.3) The input text is displayed with a font-size of 16px, whereas the input fields take a border color of #5cb85c, in a focus event. The input text fields are validated by making them required fields. The header of the signup form is displayed with a font-size of 34px. The 'Signup' button is created as a success type button and given a background color as #5cb85c. The social media buttons are created as primary, info, and danger type buttons and given the background colors of #507cc0, #64ccf1, and #df4930. The buttons change their opacity value to 0.8, in a hover event. Source: https://www.tutorialrepublic.com/snippets/preview.php?topic=bootstrap&file=sign-up-form-with-rounded-social-buttons
This is an example of a carousel layout with a tabbed navigation feature, designed using Html, CSS, JavaScript, and Bootstrap framework 4. The form consists of the carousel feature and four navigation tabs. The product images, font, CSS, and Bootstrap styles are imported to the code with their URLs. JavaScript methods have been used to implement the functionality of the navigation tabs. The carousel caption is displayed using the styles of display as inline-block, font-family as 'Oswald', sans-serif, background color as rgba(0,0,0,0.9), font-size as 40px, and text-transform as uppercase to automatically convert the text to uppercase. The carousel content is displayed with the styles of background as background as #20b0b9, font-size as 20px, and font-weight as 300. Each navigation tab is given a title and a subtitle. The title of the navigation tab is displayed with the styles of display as block, font-family as 'Roboto', sans-serif, font-size as 110%, and text-transform as uppercase. The subtitle of the tab is displayed with a font-size of 85%. The tabs take the styles of font color as #fff, and background color as #20b0b9, in the active mode. Source: https://www.tutorialrepublic.com/snippets/preview.php?topic=bootstrap&file=carousel-with-tabbed-navigation
This is an example of a Facebook themed login form, designed using CSS, Html, and Bootstrap framework 4. The form consists of a login container, input text fields, 'Forgot Password' link, 'Login button', and 'Create an account' link. The font, CSS, and Bootstrap styles are imported to the code with their URLs. The body of the form is given the styles of font color as #646464, and background color as #e2e2e2. The Signup container is given the styles of font color as #fff, background color as #405e9e, and box-shadow style of 0px 2px 2px rgba(0, 0, 0, 0.3). The title of the form is displayed with the styles of font-size as 26px, font-weight as bold, and text-align as center. The input text fields are validated by making them required fields and given a border color as #dfdfdf. The 'Signup' button is given the styles of font-size as 15px, font-weight as bold, background color as #eeeeee, and font color as #646464. The button changes its background color to #e4e4e4, on hover, whereas the 'Forgot Password' link and 'Create an account' link take an underline effect. Source: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=facebook-theme-login-form
This is another example of a Signup form with icons, designed using Html, CSS, and Bootstrap framework 4. The form consists of a Signup container, input text fields, checkbox, and a "Signup' button. The images, font, CSS, and Bootstrap styles are imported to the code with their URLs. The body of the form is given a style set of font color as #999, background color as #f5f5f5, and font-family style as 'Roboto', sans-serif. The input text fields are given a border color of #e1e1e1, border-bottom style of 1px solid #e1e1e1, a font-size of 13px, and validated by making them required fields. The Signup container is given a background color of #fff, border style of 1px solid #f3f3f3, and a box-shadow style of 0px 2px 2px rgba(0, 0, 0, 0.3). The 'Signup' button is created as a primary type button and given the styles of font-size as 16px, font-weight as bold, and background color as #19aa8d. The button changes its color to #179b81, in hover and focus events. The 'Terms' and 'Privacy Policy' links are also set to take an underline effect in a hover event. Source: https://www.tutorialrepublic.com/snippets/preview.php?topic=bootstrap&file=elegant-sign-up-form-with-icons
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter