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 excellent example of animations used in the navigation bar. This effect is due to the simple combination of the HTML and CSS styles. This is a simple navigation bar with menu added to it. Once you trigger the hovering event on any menu, you would see the top border moving down while the left border appears along the left side of the text. This is achieved by setting the height and width property of borders before and after the hovering event. This can be used in a traditional top bar or any sticky navigation bar located at the bottom or sides of the website. You can use this snippet with any website, as the font and the properties used, can be a perfect blend with any website. You can have multiple animations by changing the border properties and see to yourself for the ideal animation effect for your webpage.
This is a creative style menu option where the columns are expanded to display the menu items. The Navigation bar itself is displayed with the menus at the bottom of the page. This can be used in your web pages instead of the navigation bar. This is best suited for less number of menu items. Each page is opened when clicked on the menu which is expanded using javascript. The color combinations and visual plays an important role than the menu and design. The animation effect is an effort of CSS and javascript for its simple and clean code. The design is responsive and takes a different view altogether in mobile devices. Use this for your personal websites where menu items are less in number. The CSS needs to be perfect for such kind of web page. Make sure your page has color matching to this template while using this on your site.
Material Design is an excellent template to represent the personal blogs consisting very fewer menu items. The design of the page is excellent with the menu represented at the bottom of the web page. This is totally responsive and can be viewed with any devices. Clicking on each menu item gives a description of the menu item. This design can be used to show mega menus too where the items in one category are listed in particular items. The webpage design is suited better for one-page navigation and can be used with any website by blending it with websites. For the smooth display of the pages of each menu, item javascript is used. Also, it shows a closing button at the right top of your webpage.
This is an example of Canvas navigation where the navigation template is vertical hamburger style which is located to the left of the plate. This is responsive in nature and can be best satiated for event website templates or music website templates. The template has a background animation effect you will get once clicked on the menu. The navigation menu items can be tweaked for your requirement and fit this on your website. It requires javascript to perform the animation of toggling of the menu when clicked on the menu. The animation and CSS style is a perfect match for this snippet. You can add this for event website templates or music website templates with your own flavor of website. With the right template and color, you can blend it with any website.
This is an example of a full page into and navigation menu. This uses the creative style of designing navigations for the web site. The menu is at the bottom and uses the hamburger navigation menu. On clicking the menu icon the navigation menu is displayed from the top of the page, covering the complete page. In order to dismiss the menu, you can click on the cross button on the right of the page. This style fits for photography website template. The navigation menu bar can be used to show the mega menu items like on the e-commerce website. You need to have a javascript running to display the menu items and their effects. The CSS is the best to match for the website. You can use this as an example for the creative website and tweak as per your requirements and menu links.
This is an example of a one-page navigation menu template. This can be used for floating style website as it reserves a particular space on the left sidebar. The design is such that it does not contain boundary on the homepage but for the subpages, you would see the boundaries. The menu options are just a blend to the rest of the web page as this design is possible due to the icons used for the website. The visual effects are purely due to CSS styling. These menu options can be used for creating web pages or personal blogs as the menu items are less in number. Check out the colors set for each paragraph, which gives a look of a new page. You can use this snippet for your one-page design layouts.
Mega menus are a new trend. These are drop-down triggered when an event is triggered by hovering over a link mentioned in the menu. This is used to show all options under the particular menu. This is used on e-commerce site where all the available options are listed under a particular category. To add mega menu we are using “mega-dropdown menu”, to the menu item which will display the items under its list. To separate the content we are using the tab classes like “tab-content” and “tab-pane”. Define the tab-pane with particular ID’s. Define the nav tab’s as toggleable with links to the tab-pane of mega-menu items. Check out the CSS for hovering and styling. As mega menus are dropdowns using hovering events, you must be careful to add this on the selected menu items. Use this for your e-commerce website by listing your items and images.
This is the best example of Off Canvas Menu. This can be used in any devices. A user would click on the icon or touch an icon to make an action that would result in the vertical navigation of menu sliding into the screen from the off canvas. This is one of the best examples of a multi-device layout pattern where web pages are designed to arrange and rearrange the page layout according to the devices used. The icon called as “Hamburg menu icon” as it resembles Hamburg. Instead of an icon, we can also use a button called “Menu”. To achieve this, we use wrapper where we are placing the off-canvas and menu to display the vertical navigation bar. To demo the action the toggle button is displayed at the center. You can place it to the sides of the screen. CSS and Javascript are used along with this pattern. Ref: "https://codepen.io/ncerminara/pen/quJpi"
This snippet displays the stylish restaurant menus on the page. This can be easily integrated with your web page. It uses the latest features of Bootstrap 4 and jquery 3.2.The font for this style is carefully selected to match the template and enhances to make it stylish. In a container which is gives a behavior of responsiveness, we have a “section-title” which is aligned in the center. Next we have set of “single_menu_list” defined in the “menu_style1”. These set or template defines the “menu_list”, a set of image and menu header and description of each menu. These are placed equally into divided column of the row. The image border is reduced to zero during mouse hover which gives an image an elegant feature. You can use this snippet and tweak for your page to display your menu views similarly on menu card given in restaurants.
This is a classic example of the responsive navigation bar with no javascript needed. It uses clean HTML5 markup. This navigation bar is aligned to left but can be aligned to center or right. In mobile devices, the navigation bar is set on the top with the logo displayed whereas on the website it’s displayed on the left of the device. Toggling behavior can be seen by clicking on the toggle button. The dropdown is already set for some menu. The icon for each menu is set. CSS file defines responsive behavior using a media query. Navbar on the screen of width above than 767px will be displayed as block align to left, whereas for the screens below 767px the navigation bar will be displayed on the top of the page. Use this navigation bar for mobile applications to navigate to your custom links.
This is a classic example of the navigation bar, with scrollbar effect to the dropdown navigated links. This could be used for the educational or business website. This uses bootstrap and jquery. HTML is quite simple with the tag defining the dropdown and sub menu. It shows the example of a scroll bar effect where the submenus are scrolling without the scroll bar displayed vertically. Also, there is an example where no sub-menus are mentioned under the menu. The scrolling effect is given by javascript, using hover functionality. Javascript takes care of the height and items in sub-menus. It decides the speed of scrolling according to the list in the sub menu. More the list faster is the scrolling. CSS defined the style for each class used in the snippet. Use this snippet to create the desired navbar for your website.
This is an example of vertical responsive sidebar navigation, which can be used for mobiles or other devices. This is fully responsive and space saving sidebar navigation for any project. It is decorated button with primary and large settings. It button behavior is set with toggling property. The navigation is set to be a sidebar using sidebar-nav class this gives the navigation bar an ability to be placed at one side of the site. The navbar can have its brand name set by side-bar class. CSS file defines the effects and style for this navbar. Check out the properties set for each class and the wrapper which wrappers the navbar. The mouse hover effect is set in CSS with its color changing effect. The javascript adds the effect of toggling the navbar. This navbar is perfect for its responsive behavior. Use this and tweak it to your requirement.
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter