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 template of a registration form with animations designed using HTML, CSS, and JavaScript. The input type ‘text' has been used for the text fields. CSS element ‘background-color' is set to the value of #509 color code to implement the background color. The ‘animation' element in CSS has been used to apply animations on the input fields with its values set as rotate 5s ease-in-out 0.5s alternate, move 5s linear 2s. The other CSS styles that are used here would be outlined as none, background color as #509, font style as italic, color as #f0f, border as none and border-bottom as 1px solid #f0f. The values of the input field border-bottom are set as 4px solid #f00, font size as 20px, transition as .4s ease-out and transition-delay as 0.5s on a focus event. A JavaScript function has been created to display a confirmation message and prompt the user to confirm if all the input fields are filled correctly. Source : https://codepen.io/ivanshavliuga/pen/GzXVvY
This is a signup page template with validation designed using HTML, CSS, and JavaScript. The input type ‘text' has been used for the text fields with placeholders set for the elements to display a hint on the expected inputs for the text fields. CSS styles has been used to get a combination of colors to make the background color shady with the values set as linear-gradient (to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12) and background-position as center. The value of CSS style ‘text-transform' is set to uppercase to convert the text to uppercase automatically. The current date is passed as the initial date on the date picker element with the date format given in JavaScript. Function validate email is used to validate the mail address. Max length and min length have been given to text fields such as postal code and city. Source : https://codepen.io/Devlop-Er/pen/EraLKL
This is another example of a login page designed with HTML and CSS. The input type ‘text' has been used for the text fields. A max length has been set on each text field, username as 35 and password as 30. This allows the user to enter characters up to a given number of max length; in this case user name-35 and password-30. CSS styles has been used to get a shady combination of colors with its values set as height to 100%, width to 100%, margin to 0, background to #f2306a and the background as linear-gradient (left, #f2306a 0%, #6d00a0 100%) to apply the shade of two colors. The input elements have the styles of position as absolute, height as 35px, with as 90%, padding as 0 5%, background as #050023, color as white, font size as 15px, font-weight as bold, border-radius as 4px and border as 2px solid #ff0067. Source : https://codepen.io/michelebit/pen/NEXbOj
This is a simple registration form with validation; designed using CSS, HTML, and JavaScript. The input type ‘text' has been used for the text fields. The ‘span' element has been used with the class name "login-error" to display the error message. The display style of this class is set as none and the font size as 16px. By setting the display value as none, the error message will not be visible until the input is entered. The key up function in JavaScript makes sure the validation happens with every single character entered. A switch case is used in JavaScript to determine the type of error: a "value missing" error if the value is null or empty, "at least 3 chars for value" if the entered value is less than or equal to 2 characters and a "no more than 50 chars for value" if the entered value is greater than or equal to 50 characters. Source : https://codepen.io/BothOfUs/pen/JagOGL
This is a simple signup form with login via social media accounts option, designed using HTML and CSS. The input type ‘text' has been used for the text fields with placeholders set for the elements to display a hint on the expected inputs. The background image on the right-side panel has been added by setting the image URL in CSS. The position has been set as absolute, top as 0, right as 0, box-sizing as border-box, padding as 40px, width as 300px, height as 400px, background-size as cover and background-position as center. To get the "OR" label on top of the layer, CSS styles has been used with values: position as absolute, top as 180px, left as 280px, with as 40px and height as 40px. The background color has been set to #efefef whereas the border-radius is set to 50% to display the label as a circle. Source : https://codepen.io/MiroslavDina/pen/NONaVR
This is an example for a card view with advanced effects and animation with the use of HTML, CSS and JavaScript. CSS style ‘overflow-y’ is set as scroll to apply scrolling to the whole page. JavaScript function has been used to implement the onclick function display only a half of the icon. On a click event of the element, a class will be added to the styles. In order to display only half of the element, CSS style top has been set to -215 making it placed above the top margin. Two JavaScript functions ‘mouseenter’ and ‘mouseleave’ have been added and given a transformation value of 1800 to zoom in and out the card tiles on mouse hover. The border bottom left radius has been set to the value of 5px and the border bottom right radius has been set to the value of 5 to curve only the bottom part of the element. credits - https://codepen.io/Bahaa-Addin/pen/mmYMKp
This is an example of displaying different types of card types with the use of HTML only. The bootstrap inbuilt class style has been used by setting the class name in the element. Each card consists of an image, title and a description in different formats and orders. The img HTML element has been used to set the image to the thumbnail. To distribute the data in rows and columns within a card, the bootstrap inbuilt class ‘row’ and class ’col’ are used. The class name ‘card’ has been used to apply the card styles to the HTML so that they don’t have to be manually entered. The links are set with the HTML element of href. credits - https://codepen.io/SitePoint/pen/mXqdda
This is an example for a responsive card thumbnail that can be designed HTML and CSS. Each card has the image, title and a description followed by a read more button. The img HTML element has been used to set the image to the thumbnail. The styles that are applied to the entire page are height as 100%, width as 100%, background as #FFF, font family as 'Roboto', sans-serif, and font weight as 400. The font weight is the style that is used to set the bold value of the font. Media queries in the CSS file have been used to make the card thumbnails responsive with the values of min width as 450px, min width as 760px, and min width as 900px. resulting this example to be responsive for three screen resolutions. credits - https://codepen.io/wisnust10/pen/BKjNNR
This is an example of displaying the data in a card format with the use of HTML and CSS. Each card will have the image on the top, title followed by the description. The card styles that are applied to this example have a style of padding left as auto, padding right as auto, min height as 500px, margin top as 15px, box shadow as 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) and transition as .25s box-shadow. To implement the box shadow effect on the mouse hover for each card, the hover event in the CSS style class has been used by updating the box shadow class to the value of 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15). The same styles have been used for the focus event as well. credits - https://codepen.io/reklamarsiv/pen/vgPLLv
This is a simple example of displaying the details such as prices and more information in the table format with the use of HTML and CSS. The background of the page has been set to an image with adding the URL of the image. The other styles that are applied for the background are; background size as 100% 100%, background attachment as fixed and the padding as 100px 0. The CSS class text transform has been used with the value of uppercase to automatically convert the text to upper case. The font size of the header is 35px, font weight is 700, font family is 'Lato', sans-serif, font color is #fff, and the text align is center. In order to add the circle shapes, the border radius has been set as 45px along with the other styles as color as #1ab921, background as #fff, padding as 5px, border as 2px solid and box shadow as 0px 0px 11px -5px #000. credits - https://bootsnipp.com/snippets/z71yy
This is an example of table pricing with the use of the HTML and CSS. The background of the complete page has been set to the value of #303030. The cdn bootstrap CSS links have been imported to the HTML page with the use of the keyword import so the inbuilt styles can be used in the example without re implementing them. Each box of the table has the styles of z-index of 2, top as -13px, border width as 3px, padding as 30px 20px, border radius as 5px, and the border shadow as 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15). In order to add a shade of two colors to the heading section, the CSS style of background image has been used with the value of linear-gradient (#eee, #ddd). credits - https://bootsnipp.com/snippets/2e6b5
This is an example of displaying a simple table and a shopping cart details in a table format with the use of HTML, CSS and JavaScript. The table elements have been used in HTML to display the details in the table format. The background color of the page has been set to the value of #fff. The important keyword (!important) has been used so if any existing value for the background will be overridden with this value. The headings have the styles of font size as 25px, margin top as 20px, margin bottom as 10px, font weight as 300 and font color as #3c4858. The buttons in the shopping cart have the styles of padding as 12px 30px !important, margin as 5px 1px, font size as 12px !important. The box shadow class has been used with the value of 0 2px 2px 0 hsla(0,0%,60%,.14), 0 3px 1px -2px hsla(0,0%,60%,.2), 0 1px 5px 0 hsla(0,0%,60%,.12) to get the box shadow effect. credits - https://bootsnipp.com/snippets/P2eO9
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter