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 sample newsletter form with slide animations designed using HTML, CSS, and JavaScript. CSS style background image has been used to add the background image by providing the URL of the image. JavaScript is used to implement the click event for the given elements. Initially, the Subscribe button is hidden by adding the CSS style “display” with its value set to none. The fade-in and fadeout functions in JavaScript have been used to trigger the click event “Skip NewsLetter sub” and the slide-up and slide-down functions to display the slide animations in this example. Source: https://codepen.io/perikan/pen/pXNdxX
This is a simple example of a News Letter component with pure CSS and HTML. The CSS element “background” has been used to display the background image with the color of linear-gradient; (rgba(0,0,0,0.7),rgba(0,0,0,0.6)),url('https://pbs.twimg.com/media/DWH8pTQW4AAdp4F.jpg').The background image is centered with the center style element. Initially the typing space for the email address won’t be visible to the user as it is set to a 0 width. The mouse hover element has been used to display the input text field by setting the width on the mouse hover event whereas the focus event has been used to make the type space appear automatically. The color of the button “subscribe” is set as green and the font color as whitesmoke. Source: https://codepen.io/andryjohn/pen/agVYJp?&page=1
This is an example for creating a newsletter component for a website with the use of CSS, HTML and JavaScript. JavaScript function has been used to automatically calculate and display the distance between the mouse cursor and the Signup button. The sub element of pageY and pageX of the event variable has been used to calculate the position of the cursor. CSS style has been implemented for the h2 (title) with the use of the CSS element “active” to apply the effect of vertically moving up and down by using the translateY value. The complete page is set to have a background color of linear-gradient (to bottom, #ffffff 60%, #e2e2e2). Source: https://codepen.io/andreas-litis/pen/MMNyGa
This is an example of a classic footer section of a website with pure CSS. The HTML element strong has been used to make the text Bold. The element of UL and child element of its LI have been used to display the list. CSS styles have been implemented to display the background shapes and the element “after” to apply the styles when the elements are loaded. The img tag has been used to display the image in the footer. The h3 element is set to have a font size of 18px, font-weight of 400.
This is a sample design for the footer section of a website with a search bar. To apply the icons and the font styles to the text, the font-awesome style sheet has been imported. Creating the search bar has been done by using “form” tag and the input type text element to display the text field and the button element for the search button. CSS style of border-top has been used to display the line on top of the search bar. The font style of the footer section is set as “Raleway sans-serif” and the values of input type text element to have a height of 45px, the width of 40%, padding-left of 20px and the color as #333.
This is an example of the footer section of a website with pure CSS. CSS style has been used with the background element to apply a background color to the footer section. The background color is set to a dark shade of gray with the value of #1c1c1c and the font color to white with #fff. A href element is used to mount the mobile number where the prefix tel: is appended to link the number to a mobile application on the user device. Likewise, the prefix mailto: has been used to link it with an email id and redirect to an email application on click.
Another classic example to create the footer section of a website with only CSS and HTML. Img element in HTML has been used to display the given image. CSS styles have been used to apply the mouse hover effects for the elements. Background element is used to change the color of the elements whereas transition element is used to apply the effect of “ease in”. The complete footer section is set to have the background color value of #272272, a medium blue. Border bottom style is used with the use of the value of 1px dotted #e4e9f0 to create the dotted line in the footer and its color set to light green.
This is an example of the implementation of the footer section on websites with pure CSS. The image element has been used to display the image on the footer section. The font awesome style sheet has been used to apply the icons and font styles to the text .The CSS styles has been used to apply the colors for the text using span and a href. The CSS element of color is used to apply different colors to the text as well as the media query string to apply responsive style for the footer. The background of the footer section has the value of #292c2f which is a dark blue color whereas the display style value has been set for an inline-block to display the href elements in a single horizontal line.
This is another example of the design of the footer section with the use of pure CSS. The font awesome icons are used to display the icons as well as LI icons. The mouse hover event is implemented by using the hover event. The footer section is set to have a background color of a shade of dark gray with #222 and its border to a shade of light brown of #b78c33. CSS style of text transform has been used with its value as uppercase to convert the text to uppercase as well as the border-radius value of 50% to make the social media icons circular.
This is an example of the implementation of a top navigation bar and a footer section for a website with CSS and HTML. Bootstrap library and bootstrap style sheets have been imported to the code with the use of its grid view elements to separate and organize the displaying sections. All the icons that are displayed in the example are used with the integration of the font awesome icons. The basic styles such as background color, buttons, and labels have been used with pure CSS implementation. The background color of the top bar is set as black and in order to place the social media icons in a row, the display style is set as inline-block, font color as white and the font size as 25px.
This is a simple example for the footer section of a website with pure CSS and HTML. The bootstrap style sheets are imported to the code and used with its grid view elements to separate and organize the displaying sections. The concept of Lists has been used with UL and LI components. The font awesome style sheet is used to display the icons. UL element has been used with the child elements of LI to display the unordered list. Background color has been set to a shade of maroon with rgb (71, 32, 29).
This is an example from right to left list which can be used in a list, navigation bar, footer and to display the items. Design from right to left makes sure your website follows the same design. The list items are placed in container-fluid giving it appropriate responsive behavior, The CSS is simple and keeps the list simple along with it, providing the hovering property to the links. Check out the responsive behavior, which gives an appropriate look to this design while it is viewed in smaller screens.
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter