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 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.
This is the classic example of a responsive bootstrap table, which can be used to display data with various size of the web page. You can use this table design in the sites which can be used in mobile, IPad or desktop versions. The table is wrapped under the classes which gives it a responsive behavior. The table is divided into header and body, header division contains the column names marked with class “table-header” and body division is made up of rows containing the data for the given columns. By changing the display size of the web page you can see the change in the display of each data. The data of each row is displayed with the column name on to the left side. The CCS style defines the look for each class. Media queries are defined to make the table responsive.
Responsive bootstrap example using HTML5 & CSS3 based which can be used as a template for your website. We have a table with example data on this template. The table is placed in wrapper having Full Name, age, job title, location as column fields. Each row is created for the data. The first row is a header row with column names followed by rows with class defined as cells and data-title defining column name. The CSS defines all the styles for the class. The table also provides highlighting the rows, when selected by the cursor. Fonts, height, padding, background are well defined to match the table and the data displayed in tabular format. CSS also defines media queries, to enable customization of content for a different presentation. For the max-width of 768pixel, the cells are displayed in block format.