In this post we are going to show you how we implement a bootstrap 4 dropdown menu with multilevel that can be shown on mouse hover instead of clicking on the menu item to display it. We start by describing the default bootstrap 4 dropddown menu and then add features to it.
Quick Demo Links:
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re toggled by clicking, not by hovering. Bootstrap’s dropdowns are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms.
You can simply wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Dropdowns can be triggered from <a>
or <button>
elements to better fit your potential needs. The following demo page showing you variety of Bootstrap dropdown examples: Default Bootstrap Dropdown Examples Page.
The simple way to display bootstrap dropdown menu on mouse hover instead of clicking is to listen on mouseenter
event on .dropdown-toggle
class and then fire click event on this element. Consider the following default bootstrap dropdown menu HTML demo code that taken from above JavaTMP Bootstrap dropdown examples:
<div class="btn-group"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Actions </button> <ul class="dropdown-menu"> <li><a class="dropdown-item clearfix" href="javascript:;">Action</a></li> <li><a class="dropdown-item" href="javascript:;">Another action</a></li> <li><a class="dropdown-item" href="javascript:;">Something else here</a></li> <li class="dropdown-divider"></li> <li><a class="dropdown-item" href="javascript:;"> Separated link</a></li> </ul> </div>
To make the above default bootstrap dropdown menu shown when mouse hover on dropdown-toggle button
when add the following Javascript code:
$(".dropdown-toggle").on("mouseenter", function () { // make sure it is not shown: if (!$(this).parent().hasClass("show")) { $(this).click(); } });
That is it. It will simulate the click when mouse hover and enter on the Bootstrap dropdown component and provides standard native bootstrap method of trigger standard dropdown events. The following link show you a live demo of how to implement a Bootstrap dropdown on mouse hover demo page.
Now, if you want an extra functionality like hiding and closing dropdown when mouse leave it. you can listen for mouseleave
event on .dropdown
or .btn-group
parent element and fire click on dropdown-toggle. The following Javascript code shows you how you can hide dropdown when mouse leave it:
$(".btn-group, .dropdown").on("mouseleave", function () { // make sure it is shown: if ($(this).hasClass("show")){ $(this).children('.dropdown-toggle').first().click(); } });
Now, we continue extending default Bootstrap dropdown to support a multilevel menu item instead of single level.
Native Bootstrap's dropdown does not support submenu and multilevel menu. In this section we extends default Bootstrap 4 dropdown menu to support submenu and multilevel menu by simply using CSS styling.
.dropdown-submenu
class We create a .dropdown-submenu
class that will be parent of any .dropdown-item
that you want to show as a submen. So The following default Bootstrap dropdown-item:
<li><a class="dropdown-item" href="#">level 1</a></li>
Become the following after updating it with second dropdown menu:
<li class="dropdown-submenu"> <a class="dropdown-item" tabindex="-1" href="#">level 1</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" tabindex="-1" href="#">level 2</a></li> </ul> </li>
The main modification were adding .dropdown-submenu
to .dropdown-item's parent and add dropdown-menu
block inside it that will become the second level of Bootstrap dropdown.
The styling rule for new .dropdown-submenu is:
.dropdown-submenu { position: relative; }
We updated the :after
pseudo-elements to show cursor indicator using Font Awesome:
.dropdown-submenu > a.dropdown-item:after { font-family: FontAwesome; content: "\f054"; float: right; }
You could use an indicator without external font:
.dropdown-submenu > a.dropdown-item:after { content: ">"; float: right; }
The updated styling for .dropdown-menu
inside .dropdown-submenu
is:
.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: 0px; margin-left: 0px; }
The following style to make submenu shown when mouse hover on .dropdown-submenu item:
.dropdown-submenu:hover > .dropdown-menu { display: block; }
The following link show you a live demo for multilevel Bootstrap 4 dropdown menu on hover.
]]>
JavaTMP Java bootstrap Template comes with a Huge Collection of front-end jQuery Plugins and Bootstrap UI Components to quickly create your user interfaces.
]]>The dynamic JavaTMP bootstrap Java version come with a Huge Collection of front-end jQuery Plugins and Bootstrap UI Components used to quickly create your responsive user interfaces. The following link provides a static components demo page: http://java.javatmp.com/#/pages/static/home
]]>Diary and Calendar Events Management Module for managing and organizing events using jQuery plugins and Java JPA libraries
]]>The dynamic JavaTMP bootstrap Java version come with simple Diary and Calendar Events Management Module for managing and organizing events using jQuery plugins and Java JPA libraries. The following list provides the main features:
The following photo provides more pictures of the module:
To Access The dynamic Java Bootstrap Web Application Diary and Calendar Events module pages go to demo page: http://java.javatmp.com/
]]>
Advanced User Management filtration and searching functionalities that utilizes jQuery plugins and Java JPA libraries
]]>The dynamic JavaTMP bootstrap Java version come with Advanced User Management filtration and searching functionalities that utilizes jQuery plugins and Java JPA libraries like:
The following photo show more example of user filtration and searching feature:
To Access The dynamic Java Bootstrap Web Application Advanced user filtration and searching: http://java.javatmp.com/
]]>Double-entry accounting module implemented in Java Web application and Oracle MySql Database
]]>The dynamic JavaTMP bootstrap version come with simple Double-entry accounting module implemented in Java Web application and Oracle MySql Database. the following list provides the main features:
The following screenshots of the Java Bootstrap Web Application Double Entry Accounting module Pages:
To Access The dynamic Java Bootstrap Web Application Accounting Module pages go to demo page : http://java.javatmp.com/
]]>A UNIX Epoch time is a system for describing a point in time, defined as an approximation of the number of seconds that have elapsed since 00:00:00 Coordinated Universal Time (UTC), Thursday, 1 January 1970. Every day is treated as if it contains exactly 86400 seconds, so leap seconds are not applied to seconds since the Epoch.
A time zone is a region of the globe that observes a uniform standard time for legal, commercial, and social purposes. Time zones tend to follow the boundaries of countries and their subdivisions because it is convenient for areas in close commercial or other communication to keep the same time.
Most of the time zones on land are offset from Coordinated Universal Time (UTC) by a whole number of hours (UTC−12 to UTC+14), but a few zones are offset by 30 or 45 minutes (e.g. Newfoundland Standard Time is UTC−03:30, Nepal Standard Time is UTC+05:45, and Indian Standard Time is UTC+05:30).
Some higher latitude and temperate zone countries use daylight saving time for part of the year, typically by adjusting local clock time by an hour. Many land time zones are skewed toward the west of the corresponding nautical time zones. This also creates a permanent daylight saving time effect.
ISO 8601 is an international standard that defines methods of representing dates and times in textual form, including specifications for representing time zones. In general, ISO 8601 applies to representations and formats of dates in the Gregorian calendar, times based on the 24-hour timekeeping system (with optional time zone information, e. g. the UTC offset), time intervals and combinations thereof. For example for combined date and time in UTC is "2018-09-01T07:37:50+00:00" or "2018-09-01T07:37:50Z".
If a time is in Coordinated Universal Time (UTC), a "Z" is added directly after the time without a separating space. "Z" is the zone designator for the zero UTC offset. "09:30 UTC" is therefore represented as "09:30Z" or "0930Z". Likewise, "14:45:15 UTC" is written as "14:45:15Z" or "144515Z". UTC time is also known as "Zulu" time, since "Zulu" is a phonetic alphabet code word for the letter "Z".
Offsets from UTC are written in the format ±[hh]:[mm], ±[hh] [mm], or ±[hh] (either hours ahead or behind UTC). For example, if the time being described is one hour ahead of UTC (such as the time in Berlin during the winter), the zone designator would be "+01:00", "+0100", or simply "+01". This numeric representation of time zones is appended to local times in the same way that alphabetic time zone abbreviations (or "Z", as above) are appended. The offset from UTC changes with daylight saving time, e.g. a time offset in Chicago, which is in the North American Central Time Zone, is "−06:00" for the winter (Central Standard Time) and "−05:00" for the summer (Central Daylight Time).
Time zones are often represented by alphabetic abbreviations such as "EST", "WST", and "CST", but these are not part of the international time and date standard ISO 8601 and their use as sole designator for a time zone is discouraged. Such designations can be ambiguous; for example, "ECT" could be interpreted as "Eastern Caribbean Time" (UTC−4h), "Ecuador Time" (UTC−5h), or "European Central Time" (UTC+1h).
In order to address these complexities and provide better support in the JDK core, a new date and time API in java.time
package has been designed for Java SE 8.
The first classes you will probably encounter when using the new API are LocalDate
and LocalTime
. They are local in the sense that they represent date and time from the context of the observer, such as a calendar on a desk or a clock on your wall. There is also a composite class called LocalDateTime
, which is a pairing of LocalDate and LocalTime
.
Time zones, which disambiguate the contexts of different observers, are put to one side here; you should use these local classes when you don’t need that context. A desktop JavaFX application might be one of those times. These classes can even be used for representing time on a distributed system that has consistent time zones.
All the core classes in the new API are constructed by fluent factory methods. When constructing a value by its constituent fields, the factory is called of
; when converting from another type, the factory is called from
. There are also parse methods that take strings as parameters. See :
LocalDateTime timePoint = LocalDateTime.now(); // The current date and time LocalDate.of(2018, Month.DECEMBER, 12); // from values LocalDate.ofEpochDay(150); // middle of 1970 LocalTime.of(17, 18); // the train I took home today LocalTime.parse("10:15:30"); // From a String
Standard Java getter conventions are used in order to obtain values from new Java Date Time API classes, as shown down:
LocalDate theDate = timePoint.toLocalDate(); Month month = timePoint.getMonth(); int day = timePoint.getDayOfMonth(); timePoint.getSecond();
You can also alter the object values in order to perform calculations. Because all core classes are immutable in the new API, these methods are called with and return new objects, rather than using setters. There are also methods for calculations based on the different fields:
// Set the value, returning a new object LocalDateTime thePast = timePoint.withDayOfMonth(10).withYear(2010); /* You can use direct manipulation methods, or pass a value and field pair */ LocalDateTime yetAnother = thePast.plusWeeks(3).plus(3, ChronoUnit.WEEKS);
The new API also has the concept of an adjuster—a block of code that can be used to wrap up common processing logic. You can either write a WithAdjuster, which is used to set one or more fields, or a PlusAdjuster, which is used to add or subtract some fields. Value classes can also act as adjusters, in which case they update the values of the fields they represent. Built-in adjusters are defined by the new API, but you can write your own adjusters if you have specific business logic that you wish to reuse. See:
import static java.time.temporal.TemporalAdjusters.*; LocalDateTime timePoint = ... foo = timePoint.with(lastDayOfMonth()); bar = timePoint.with(previousOrSame(ChronoUnit.WEDNESDAY)); // Using value classes as adjusters timePoint.with(LocalTime.now());
The new API supports different precision time points by offering types to represent a date, a time, and date with time, but obviously there are notions of precision that are more fine-grained than this. The truncatedTo
method exists to support such use cases, and it allows you to truncate a value to a field, as shown down:
LocalTime truncatedTime = time.truncatedTo(ChronoUnit.SECONDS);
The local classes that we looked at previously abstract away the complexity introduced by time zones. A time zone is a set of rules, corresponding to a region in which the standard time is the same. There are about 40 of them. Time zones are defined by their offset from Coordinated Universal Time (UTC). They move roughly in sync, but by a specified difference.
Time zones can be referred to by two identifiers: abbreviated, for example, “PLT,” and longer, for example, “Asia/Karachi.” When designing your application, you should consider what scenarios are appropriate for using time zones and when offsets are appropriate.
// You can specify the zone id when creating a zoned date time ZoneId id = ZoneId.of("Europe/Paris"); ZonedDateTime zoned = ZonedDateTime.of(dateTime, id);
ZoneOffset offset = ZoneOffset.of("+2:00");
ZonedDateTime.parse("2007-12-03T10:15:30+01:00[Europe/Paris]");
OffsetTime time = OffsetTime.now(); // changes offset, while keeping the same point on the timeline OffsetTime sameTimeDifferentOffset = time.withOffsetSameInstant( offset); // changes the offset, and updates the point on the timeline OffsetTime changeTimeWithNewOffset = time.withOffsetSameLocal( offset); // Can also create new object with altered fields as before changeTimeWithNewOffset .withHour(3) .plusSeconds(2);
A Period represents a value such as “3 months and 1 day,” which is a distance on the timeline. This is in contrast to the other classes we’ve looked at so far, which have been points on the timeline. See:
// 3 years, 2 months, 1 day Period period = Period.of(3, 2, 1); // You can modify the values of dates using periods LocalDate newDate = oldDate.plus(period); ZonedDateTime newDateTime = oldDateTime.minus(period); // Components of a Period are represented by ChronoUnit values assertEquals(1, period.get(ChronoUnit.DAYS));
A Duration is a distance on the timeline measured in terms of time, and it fulfills a similar purpose to Period, but with different precision, as shown below:
// A duration of 3 seconds and 5 nanoseconds Duration duration = Duration.ofSeconds(3, 5); Duration oneDay = Duration.between(today, yesterday);
It’s possible to perform normal plus, minus, and “with” operations on a Duration instance and also to modify the value of a date or time using the Duration.
In order to support the needs of developers using non-ISO calendaring systems, Java SE 8 introduces the concept of a Chronology, which represents a calendaring system and acts as a factory for time points within the calendaring system. There are also interfaces that correspond to core time point classes, but are parameterized by
ChronoLocalDate
ChronoLocalDateTime
ChronoZonedDateTime
These classes are there purely for developers who are working on highly internationalized applications that need to take into account local calendaring systems, and they shouldn’t be used by developers without these requirements. Some calendaring systems don’t even have a concept of a month or a week and calculations would need to be performed via the very generic field API.
Java SE 8 also has classes for some other common use cases. There is the MonthDay class, which contains a pair of Month and Day and is useful for representing birthdays. The YearMonth class covers the credit card start date and expiration date use cases and scenarios in which people have a date with no specified day.
JDBC in Java SE 8 will support these new types, but there will be no public JDBC API changes. The existing generic setObject and getObject methods will be sufficient.
These types can be mapped to vendor-specific database types or ANSI SQL types; for example, the ANSI mapping looks like:
An exception is an event, which occurs during the execution of a program, which disrupts the normal flow of the program’s instructions. The process of converting the system error messages into user-friendly error messages is known as Exception Handling. There are two main mechanisms of exception handling in Java Web Application:
A customized content can be returned to a user when a servlet generates an error. Developers can do that by adding the <error-page /> elements in the web.xml. The following table describes the elements developers can define within an error-page element.
Element |
Required or Optional |
Description |
<error-code> |
Optional |
A valid HTTP error code. For e.g. 500 etc |
<exception-type> |
Optional |
A fully-qualified class name of a Java exception type |
<location> |
Required |
The location of the resource which is displayed to the user in case of an error. For e.g. /error.html , /error.jsp , /error |
If the destination in the <location> is a servlet or a JSP page:
A servlet or filter may throw the following exceptions during the processing of a request:
Note: All other exceptions should be wrapped in javax.servlet.ServletException.
<web-app ...> .... <error-page> <exception-type>java.lang.ArithmeticException</exception-type> <location>/errorHandler</location> </error-page> .... </web-app>
@WebServlet(name = "errorHandlerServlet", urlPatterns = {"/errorHandler"}, loadOnStartup = 1) public class ErrorHandlerServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter writer = resp.getWriter(); Exception exception = (Exception) req.getAttribute( "javax.servlet.error.exception"); writer.printf("exception: %s%n", exception); Class exceptionClass = (Class) req.getAttribute( "javax.servlet.error.exception_type"); writer.printf("exception_type: %s%n", exceptionClass); Integer code = (Integer) req.getAttribute( "javax.servlet.error.status_code"); writer.printf("status_code: %s%n", code); String errorMessage = (String) req.getAttribute( "javax.servlet.error.message"); writer.printf("message: %s%n", errorMessage); String requestUri = (String) req.getAttribute( "javax.servlet.error.request_uri"); resp.getWriter().printf("request_uri: %s%n", requestUri); String servletName = (String) req.getAttribute( "javax.servlet.error.servlet_name"); writer.printf("servlet_name: %s%n", servletName); } }
<%@page contentType="text/html" pageEncoding="UTF-8" errorPage="true"%> <!doctype html> <html> <head> ... </head> <body> <ul> <li>Exception: ${requestScope['javax.servlet.error.exception']}</li> <li>Exception type: ${requestScope['javax.servlet.error.exception_type']}</li> <li>Exception message: ${requestScope['javax.servlet.error.message']}</li> <li>Request URI: ${requestScope['javax.servlet.error.request_uri']}</li> <li>Servlet name: ${requestScope['javax.servlet.error.servlet_name']}</li> <li>Status code: ${requestScope['javax.servlet.error.status_code']}</li> </ul> </body> </html>]]>
We were using the following bower.json file:
{ "name": "JavaTMP-Static-Ajax", "version": "0.0.1", "main": "path/to/main.css", "ignore": [ ".jshintrc", "**/*.txt" ], "dependencies": { "jquery": "3.2.1", "bootstrap": "^3.3.7", "select2": "^4.0.3", "select2-bootstrap-theme": "^0.1.0-beta.10", "bootstrap-tagsinput": "^0.8.0", "autosize": "^4.0.0", "summernote": "^0.8.7", "iCheck": "^1.0.2", "bootstrap-maxlength": "^1.7.0", "jquery-idletimer": "^1.0.2", "jQuery-contextMenu": "^2.5.0", "ion.rangeSlider": "^2.2.0", "toastr": "^2.1.3", "bootstrap-switch": "^3.3.4", "inputmask": "^3.3.7", "blockUI": "*", "bootstrap-datepicker": "^1.7.1", "bootstrap-daterangepicker": "^2.1.25", "datatables.net": "^1.10.15", "datatables.net-bs": "^2.1.1", "datatables.net-responsive": "^2.1.1", "datatables.net-responsive-bs": "^2.1.1", "datatables.net-fixedheader": "^3.1.2", "datatables.net-fixedheader-bs": "^3.1.2", "datatables.net-select": "^1.2.2", "datatables.net-select-bs": "^1.2.2", "fullcalendar": "^3.4.0", "jqueryui-touch-punch": "*", "jquery-validation": "^1.17.0", "font-awesome": "^4.7.0", "font-awesome-animation": "^0.0.10", "jquery-knob": "^1.2.13", "chart.js": "^2.6.0", "echarts": "^3.6.2", "bootstrap-colorselector": "*", "seiyria-bootstrap-slider": "^9.8.1", "cropper": "^2.3.4", "jquery.fancytree": "fancytree#^2.23.0", "jquery-form": "^4.2.2", "metisMenu": "^2.7.0", "moment": "^2.18.1", "typeahead.js": "^0.11.1", "jquery-ui": "^1.12.1", "scrollup": "^2.4.1", "jquery.counterup": "^2.1.0", "waypoints": "^4.0.1", "multiselect": "^0.9.12", "dropzone": "^5.1.1", "jquery-timeago": "^1.6.1", "jquery.steps": "^1.1.0", "ekko-lightbox": "v4.0.2", "magnific-popup": "^1.1.0", "slick-carousel": "^1.8.1" } }
And the following our ./.bowerrc
file:
{ "directory": "web/components" }
After we ran the bower command all the front-end libraries mentioned above stored in folder ./public/components
.
Most of our above front-end packages are already available on npm, So we started migrating by first creating package.json
file manually or through npm init
command.
Using npm init
command to create the package.json
will prompt you for values for the package.json
fields. The two required fields are name and version. You'll also want to have a value for main. You can use the default, index.js.
And the following is a simple package.json
file, you could start with:
{ "name": "JavaTMP-Static-Ajax", "version": "0.0.1", "description": "your application description", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", }, "author": "You", "license": "", "dependencies": {}, "devDependencies": {} }
Then, we proceed to move our current bower dependencies from bower.json
to our package.json
. We could move the dependencies using two methods:
We could add jQuery as npm dependency by invoking:
npm install --save jquery
Or by updating the package.json file and add the following entry to dependencies key:
"jquery": "^3.2.1"
And Then, invoking the following command:
npm install
NPM loads jquery into your local node_modules folder, and stores relevant metadata to package.json. We Repeated this for all of the dependencies that are available on NPM and we ended up with something like:
... "dependencies": { "autosize": "^4.0.0", "bootstrap": "^4.0.0", "bootstrap-colorselector": "^0.1.0", "bootstrap-datepicker": "^1.7.1", "bootstrap-daterangepicker": "^2.1.25", "bootstrap-maxlength": "^1.6.0", "bootstrap-slider": "^10.0.0", "bootstrap-switch": "^3.3.4", "bootstrap-tagsinput": "^0.7.1", "chart.js": "^2.7.1", "cropper": "^3.1.3", "datatables.net": "^1.10.16", "datatables.net-bs4": "^1.10.16", "datatables.net-fixedheader": "^3.1.3", "datatables.net-fixedheader-bs4": "^3.1.3", "datatables.net-responsive": "^2.2.0", "datatables.net-responsive-bs4": "^2.2.0", "datatables.net-select": "^1.2.3", "datatables.net-select-bs4": "^1.2.3", "dropzone": "^5.2.0", "echarts": "^3.8.5", "ekko-lightbox": "^5.3.0", "font-awesome": "^4.7.0", "font-awesome-animation": "^0.1.0", "fullcalendar": "^3.7.0", "inputmask": "^3.3.11", "ion-rangeslider": "^2.2.0", "jquery": "^3.2.1", "jquery-contextmenu": "^2.6.3", "jquery-form": "^4.2.2", "jquery-knob": "^1.2.11", "jquery-ui-dist": "^1.12.1", "jquery-validation": "^1.17.0", "jquery.counterup": "^2.1.0", "magnific-popup": "^1.1.0", "metismenu": "^2.7.1", "moment": "^2.19.3", "multiselect": "^0.9.12", "popper.js": "^1.13.0", "select2": "^4.0.6-rc.1", "slick-carousel": "^1.8.1", "summernote": "^0.8.8", "timeago": "^1.6.1", "toastr": "^2.1.2", "typeahead.js": "^0.11.1", "waypoints": "^4.0.1" }, ...
There were mainly three issues raised when we moved dependencies from bower.json to package.json above:
For those first two issues we used a npm's package called napa
which is a helper for installing repositories without a package.json with npm
napa NPM's package link and napa npm's github.com repository
We installed napa package using command:
npm install napa --save-dev
This command will install napa package and update main ./package.json file by adding an entry for napa package in devDependencies key:
... "devDependencies": { ... "napa": "^3.0.0", ... }, ...
We configured napa package by updating our package.json file like:
1. Using new napa entry in package.json file to hold repositories:
{ ... "napa": { "blockui": "git+https://github.com/malsup/blockui.git", "scrollup": "git+https://github.com/markgoodyear/scrollup.git", "jquery.fancytree": "git+https://github.com/mar10/fancytree.git", "jquery-idletimer": "git+https://github.com/thorst/jquery-idletimer.git", "select2-bootstrap-theme": "git+https://github.com/angel-vladov/select2-bootstrap-theme.git", "quicksearch": "git+https://github.com/riklomas/quicksearch.git", "jquery-ui-touch-punch": "git+https://github.com/furf/jquery-ui-touch-punch.git" } }
2. Adding scripts entries in package.json file to let napa
run when we invoke npm install
,npm update
, and npm run githuh
commands:
{ ... "scripts": { "install": "napa", "update": "napa", "github": "napa" }, ... }
3. Adding custom napa's napa-config
configuration options entry, mainly to disable repositories caching:
{ ... "napa-config": { "cache": false, "log-level": "debug" }, ... }
Now, whenever we invoke npm install
command, all our front-end dependencies will be downloaded and installed in local ./node_modules
folder by node.js
and napa
tools. The following is our complete package.json file updated with all dependencies, devDependencies, and napa entries:
{ "name": "JavaTMP-Static-Ajax", "version": "0.0.1", "description": "Java Bootstrap Dashboard And Admin Template", "keywords": [ "jquery", "bootstrap", "html", "template", "browser" ], "author": "javatmp", "licenses": "Commercial License", "contributors": [], "dependencies": { "autosize": "^4.0.0", "bootstrap": "^4.0.0", "bootstrap-colorselector": "^0.1.0", "bootstrap-datepicker": "^1.7.1", "bootstrap-daterangepicker": "^2.1.25", "bootstrap-maxlength": "^1.6.0", "bootstrap-slider": "^10.0.0", "bootstrap-switch": "^3.3.4", "bootstrap-tagsinput": "^0.7.1", "chart.js": "^2.7.1", "cropper": "^3.1.3", "datatables.net": "^1.10.16", "datatables.net-bs4": "^1.10.16", "datatables.net-fixedheader": "^3.1.3", "datatables.net-fixedheader-bs4": "^3.1.3", "datatables.net-responsive": "^2.2.0", "datatables.net-responsive-bs4": "^2.2.0", "datatables.net-select": "^1.2.3", "datatables.net-select-bs4": "^1.2.3", "dropzone": "^5.2.0", "echarts": "^3.8.5", "ekko-lightbox": "^5.3.0", "font-awesome": "^4.7.0", "font-awesome-animation": "^0.1.0", "fullcalendar": "^3.7.0", "inputmask": "^3.3.11", "ion-rangeslider": "^2.2.0", "jquery": "^3.2.1", "jquery-contextmenu": "^2.6.3", "jquery-form": "^4.2.2", "jquery-knob": "^1.2.11", "jquery-ui-dist": "^1.12.1", "jquery-validation": "^1.17.0", "jquery.counterup": "^2.1.0", "magnific-popup": "^1.1.0", "metismenu": "^2.7.1", "moment": "^2.19.3", "multiselect": "^0.9.12", "popper.js": "^1.13.0", "select2": "^4.0.6-rc.1", "slick-carousel": "^1.8.1", "summernote": "^0.8.8", "timeago": "^1.6.1", "toastr": "^2.1.2", "typeahead.js": "^0.11.1", "waypoints": "^4.0.1" }, "devDependencies": { "del": "^3.0.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^4.0.0", "gulp-clean-css": "^3.7.0", "gulp-concat": "^2.6.1", "gulp-connect": "^5.0.0", "gulp-eslint": "^4.0.0",
"gulp-if": "^2.0.2", "gulp-rename": "^1.2.2", "gulp-sass": "^3.1.0", "gulp-uglify": "^3.0.0", "napa": "^3.0.0", "pump": "^2.0.0" }, "scripts": { "install": "napa", "update": "napa", "github": "napa" }, "napa-config": { "cache": false, "log-level": "debug" }, "napa": { "blockui": "git+https://github.com/malsup/blockui.git", "scrollup": "git+https://github.com/markgoodyear/scrollup.git", "jquery.fancytree": "git+https://github.com/mar10/fancytree.git", "jquery-idletimer": "git+https://github.com/thorst/jquery-idletimer.git", "select2-bootstrap-theme": "git+https://github.com/angel-vladov/select2-bootstrap-theme.git", "quicksearch": "git+https://github.com/riklomas/quicksearch.git", "jquery-ui-touch-punch": "git+https://github.com/furf/jquery-ui-touch-punch.git" } }
We can now reference the dependencies straight from ./node_modules
folder just like we did on Bower components from ./web/components
folder. but our node_modules folder is outside context root folder ./web
and normally it is not a good idea to make node_modules folder inside your context root folder, indeed not all files and directories are needed in node_modules folder. The following is a high level folder structures of our JavaTMP-Static-Ajax web application:
JAVATMP-STATIC-AJAX | .gitignore | gulpfile.js | package.json |---node_modules (Source Front-end Folders) +---nbproject (Netbeans IDE config folders and files) +---web (Web Application Context Root Folder) | index.html (Main HTML Page references Front-end Libraries from components folder) +---assets (Specific Template JS,CSS,fonts, and images folders and files) +---components (Destination Front-end Folders) \---pages (HTML Pages reference Front-end Libraries from components folder)
So we need a simple process that chooses and moves required and needed plugins and frameworks from ./node_modules
to ./web/components
folders and processes them if they need any minification or cleaning before move them.
We used Gulp to automate our building process. So, we created a simple gulp task that implements our requirements above by first creating an object that hold need libraries. the following object hold our required libraries:
var config = { "sourceNodeLib": "./node_modules", "destComponentsLib": "./web/components", "plugins": { "jquery": [ {"from": "${sourceNodeLib}/jquery/dist/jquery.min.js", "to": "${destComponentsLib}/jquery/dist"} ], "popper.js": [ {"from": "${sourceNodeLib}/popper.js/dist/umd/popper.min.js", "to": "${destComponentsLib}/popper.js/dist/umd"} ], "bootstrap": [ {"from": "${sourceNodeLib}/bootstrap/dist/css/bootstrap.min.css", "to": "${destComponentsLib}/bootstrap/dist/css"}, {"from": "${sourceNodeLib}/bootstrap/dist/js/bootstrap.min.js", "to": "${destComponentsLib}/bootstrap/dist/js"} ], "font-awesome": [ {"from": "${sourceNodeLib}/font-awesome/css/font-awesome.min.css", "to": "${destComponentsLib}/font-awesome/css"}, {"from": "${sourceNodeLib}/font-awesome/fonts/*", "to": "${destComponentsLib}/font-awesome/fonts"} ], "blockui": [ {"from": "${sourceNodeLib}/blockui/jquery.blockUI.js", "to": "${destComponentsLib}/blockui", "processCSS": false, "processJS": true} ], "metismenu": [ {"from": "${sourceNodeLib}/metismenu/dist/metisMenu.min.js", "to": "${destComponentsLib}/metismenu/dist"}, {"from": "${sourceNodeLib}/metismenu/dist/metisMenu.min.css", "to": "${destComponentsLib}/metismenu/dist"} ], "scrollup": [ {"from": "${sourceNodeLib}/scrollup/dist/jquery.scrollUp.min.js", "to": "${destComponentsLib}/scrollup/dist"} ], "font-awesome-animation": [ {"from": "${sourceNodeLib}/font-awesome-animation/dist/font-awesome-animation.min.css", "to": "${destComponentsLib}/font-awesome-animation/dist"} ], "jquery-ui": [ {"from": "${sourceNodeLib}/jquery-ui-dist/jquery-ui.min.css", "to": "${destComponentsLib}/jquery-ui"}, {"from": "${sourceNodeLib}/jquery-ui-dist/jquery-ui.min.js", "to": "${destComponentsLib}/jquery-ui"} ], "jquery.fancytree": [ {"from": "${sourceNodeLib}/jquery.fancytree/dist/skin-bootstrap/**/*", "to": "${destComponentsLib}/jquery.fancytree/dist/skin-bootstrap"}, {"from": "${sourceNodeLib}/jquery.fancytree/dist/jquery.fancytree-all.min.js", "to": "${destComponentsLib}/jquery.fancytree/dist", processJS: true}, {"from": "${sourceNodeLib}/jquery.fancytree/3rd-party/extensions/contextmenu/js/jquery.fancytree.contextMenu.js", "to": "${destComponentsLib}/jquery.fancytree/3rd-party/extensions/contextmenu/js", processJS: true} ], "jquery-contextmenu": [ {"from": "${sourceNodeLib}/jquery-contextmenu/dist/font/**/*", "to": "${destComponentsLib}/jquery-contextmenu/dist/font"}, {"from": "${sourceNodeLib}/jquery-contextmenu/dist/jquery.contextMenu.min.css", "to": "${destComponentsLib}/jquery-contextmenu/dist"}, {"from": "${sourceNodeLib}/jquery-contextmenu/dist/jquery.contextMenu.min.js", "to": "${destComponentsLib}/jquery-contextmenu/dist"} ], "toastr": [ {"from": "${sourceNodeLib}/toastr/build/toastr.min.css", "to": "${destComponentsLib}/toastr/build"}, {"from": "${sourceNodeLib}/toastr/build/toastr.min.js", "to": "${destComponentsLib}/toastr/build"} ], "jquery-idletimer": [ {"from": "${sourceNodeLib}/jquery-idletimer/dist/idle-timer.min.js", "to": "${destComponentsLib}/jquery-idletimer/dist"} ], "bootstrap-datepickerr": [ {"from": "${sourceNodeLib}/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css", "to": "${destComponentsLib}/bootstrap-datepicker/dist/css"}, {"from": "${sourceNodeLib}/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js", "to": "${destComponentsLib}/bootstrap-datepicker/dist/js"}, {"from": "${sourceNodeLib}/bootstrap-datepicker/dist/locales/**/*", "to": "${destComponentsLib}/bootstrap-datepicker/dist/locales"} ], "moment": [ {"from": "${sourceNodeLib}/moment/min/moment-with-locales.min.js", "to": "${destComponentsLib}/moment/min"} ], "bootstrap-daterangepicker": [ {"from": "${sourceNodeLib}/bootstrap-daterangepicker/daterangepicker.css", "to": "${destComponentsLib}/bootstrap-daterangepicker", processCSS: true}, {"from": "${sourceNodeLib}/bootstrap-daterangepicker/daterangepicker.js", "to": "${destComponentsLib}/bootstrap-daterangepicker", processJS: true} ], "bootstrap-colorselector": [ {"from": "${sourceNodeLib}/bootstrap-colorselector/dist/bootstrap-colorselector.min.css", "to": "${destComponentsLib}/bootstrap-colorselector/dist"}, {"from": "${sourceNodeLib}/bootstrap-colorselector/dist/bootstrap-colorselector.min.js", "to": "${destComponentsLib}/bootstrap-colorselector/dist"} ], "select2": [ {"from": "${sourceNodeLib}/select2/dist/css/select2.min.css", "to": "${destComponentsLib}/select2/dist/css"}, {"from": "${sourceNodeLib}/select2/dist/js/select2.full.min.js", "to": "${destComponentsLib}/select2/dist/js"} ], "select2-bootstrap-theme": [ {"from": "${sourceNodeLib}/select2-bootstrap-theme/dist/select2-bootstrap.min.css", "to": "${destComponentsLib}/select2-bootstrap-theme/dist"} ], "typeahead.js": [ {"from": "${sourceNodeLib}/typeahead.js/dist/typeahead.bundle.min.js", "to": "${destComponentsLib}/typeahead.js/dist"} ], "bootstrap-tagsinput": [ {"from": "${sourceNodeLib}/bootstrap-tagsinput/dist/bootstrap-tagsinput.css", "to": "${destComponentsLib}/bootstrap-tagsinput/dist", processCSS: true}, {"from": "${sourceNodeLib}/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js", "to": "${destComponentsLib}/bootstrap-tagsinput/dist"} ], "bootstrap-switch": [ {"from": "${sourceNodeLib}/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css", "to": "${destComponentsLib}/bootstrap-switch/dist/css/bootstrap3"}, {"from": "${sourceNodeLib}/bootstrap-switch/dist/js/bootstrap-switch.min.js", "to": "${destComponentsLib}/bootstrap-switch/dist/js"} ], "bootstrap-maxlength": [ {"from": "${sourceNodeLib}/bootstrap-maxlength/bootstrap-maxlength.min.js", "to": "${destComponentsLib}/bootstrap-maxlength"} ], "autosize": [ {"from": "${sourceNodeLib}/autosize/dist/autosize.min.js", "to": "${destComponentsLib}/autosize/dist"} ], "summernote": [ {"from": "${sourceNodeLib}/summernote/dist/font/**/*", "to": "${destComponentsLib}/summernote/dist/font"}, // {"from": "${sourceNodeLib}/summernote/dist/lang/**/*", "to": "${destComponentsLib}/summernote/dist/lang"}, {"from": "${sourceNodeLib}/summernote/dist/summernote-bs4.min.js", "to": "${destComponentsLib}/summernote/dist"}, {"from": "${sourceNodeLib}/summernote/dist/summernote-bs4.css", "to": "${destComponentsLib}/summernote/dist"} ], "ion-rangeslider": [ {"from": "${sourceNodeLib}/ion-rangeslider/css/ion.rangeSlider.css", "to": "${destComponentsLib}/ion-rangeslider/css", processCSS: true}, {"from": "${sourceNodeLib}/ion-rangeslider/css/ion.rangeSlider.skinHTML5.css", "to": "${destComponentsLib}/ion-rangeslider/css", processCSS: true}, {"from": "${sourceNodeLib}/ion-rangeslider/js/ion.rangeSlider.min.js", "to": "${destComponentsLib}/ion-rangeslider/js"} ], "bootstrap-slider": [ {"from": "${sourceNodeLib}/bootstrap-slider/dist/css/bootstrap-slider.min.css", "to": "${destComponentsLib}/bootstrap-slider/dist/css"}, {"from": "${sourceNodeLib}/bootstrap-slider/dist/bootstrap-slider.min.js", "to": "${destComponentsLib}/bootstrap-slider/dist"} ], "jquery-knob": [ {"from": "${sourceNodeLib}/jquery-knob/dist/jquery.knob.min.js", "to": "${destComponentsLib}/jquery-knob/dist"} ], "fullcalendar": [ {"from": "${sourceNodeLib}/fullcalendar/dist/fullcalendar.min.css", "to": "${destComponentsLib}/fullcalendar/dist"}, {"from": "${sourceNodeLib}/fullcalendar/dist/fullcalendar.print.min.css", "to": "${destComponentsLib}/fullcalendar/dist"}, {"from": "${sourceNodeLib}/fullcalendar/dist/fullcalendar.min.js", "to": "${destComponentsLib}/fullcalendar/dist"} ], "cropper": [ {"from": "${sourceNodeLib}/cropper/dist/cropper.min.css", "to": "${destComponentsLib}/cropper/dist"}, {"from": "${sourceNodeLib}/cropper/dist/cropper.min.js", "to": "${destComponentsLib}/cropper/dist"} ], "waypoints": [ {"from": "${sourceNodeLib}/waypoints/lib/jquery.waypoints.min.js", "to": "${destComponentsLib}/waypoints/lib"} ], "jquery.counterup": [ {"from": "${sourceNodeLib}/jquery.counterup/jquery.counterup.min.js", "to": "${destComponentsLib}/jquery.counterup"} ], "multiselect": [ {"from": "${sourceNodeLib}/multiselect/css/multi-select.css", "to": "${destComponentsLib}/multiselect/css", processCSS: true}, {"from": "${sourceNodeLib}/multiselect/img/switch.png", "to": "${destComponentsLib}/multiselect/img"}, {"from": "${sourceNodeLib}/multiselect/js/jquery.multi-select.js", "to": "${destComponentsLib}/multiselect/js", processJS: true} ], "timeago": [ {"from": "${sourceNodeLib}/timeago/jquery.timeago.js", "to": "${destComponentsLib}/timeago", processJS: true} ], "quicksearch": [ {"from": "${sourceNodeLib}/quicksearch/jquery.quicksearch.js", "to": "${destComponentsLib}/quicksearch", processJS: true} ], "jquery-validation": [ {"from": "${sourceNodeLib}/jquery-validation/dist/jquery.validate.min.js", "to": "${destComponentsLib}/jquery-validation/dist"}, {"from": "${sourceNodeLib}/jquery-validation/dist/additional-methods.js", "to": "${destComponentsLib}/jquery-validation/dist", processJS: true} ], "inputmask": [ {"from": "${sourceNodeLib}/inputmask/dist/**/*", "to": "${destComponentsLib}/inputmask/dist"} ], "jquery-form": [ {"from": "${sourceNodeLib}/jquery-form/dist/jquery.form.min.js", "to": "${destComponentsLib}/jquery-form/dist"} ], "dropzone": [ {"from": "${sourceNodeLib}/dropzone/dist/min/dropzone.min.css", "to": "${destComponentsLib}/dropzone/dist/min"}, {"from": "${sourceNodeLib}/dropzone/dist/min/dropzone.min.js", "to": "${destComponentsLib}/dropzone/dist/min"} ], "datatables.net": [ {"from": "${sourceNodeLib}/datatables.net/js/jquery.dataTables.js", "to": "${destComponentsLib}/datatables.net/js", processJS: true} ], "datatables.net-bs4": [ {"from": "${sourceNodeLib}/datatables.net-bs4/css/dataTables.bootstrap4.css", "to": "${destComponentsLib}/datatables.net-bs4/css", processCSS: true}, {"from": "${sourceNodeLib}/datatables.net-bs4/js/dataTables.bootstrap4.js", "to": "${destComponentsLib}/datatables.net-bs4/js", processJS: true} ], "datatables.net-fixedheader": [ {"from": "${sourceNodeLib}/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js", "to": "${destComponentsLib}/datatables.net-fixedheader/js"} ], "datatables.net-fixedheader-bs4": [ {"from": "${sourceNodeLib}/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css", "to": "${destComponentsLib}/datatables.net-fixedheader-bs4/css"} ], "datatables.net-responsive": [ {"from": "${sourceNodeLib}/datatables.net-responsive/js/dataTables.responsive.min.js", "to": "${destComponentsLib}/datatables.net-responsive/js"} ], "datatables.net-responsive-bs4": [ {"from": "${sourceNodeLib}/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css", "to": "${destComponentsLib}/datatables.net-responsive-bs4/css"}, {"from": "${sourceNodeLib}/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js", "to": "${destComponentsLib}/datatables.net-responsive-bs4/js"} ], "datatables.net-select": [ {"from": "${sourceNodeLib}/datatables.net-select/js/dataTables.select.min.js", "to": "${destComponentsLib}/datatables.net-select/js"} ], "datatables.net-select-bs4": [ {"from": "${sourceNodeLib}/datatables.net-select-bs4/css/select.bootstrap4.min.css", "to": "${destComponentsLib}/datatables.net-select-bs4/css"} ], "chart.js": [ {"from": "${sourceNodeLib}/chart.js/dist/Chart.bundle.min.js", "to": "${destComponentsLib}/chart.js/dist"} ], "echarts": [ {"from": "${sourceNodeLib}/echarts/dist/echarts.min.js", "to": "${destComponentsLib}/echarts/dist"} ], "ekko-lightbox": [ {"from": "${sourceNodeLib}/ekko-lightbox/dist/ekko-lightbox.css", "to": "${destComponentsLib}/ekko-lightbox/dist"}, {"from": "${sourceNodeLib}/ekko-lightbox/dist/ekko-lightbox.min.js", "to": "${destComponentsLib}/ekko-lightbox/dist"} ], "magnific-popup": [ {"from": "${sourceNodeLib}/magnific-popup/dist/magnific-popup.css", "to": "${destComponentsLib}/magnific-popup/dist", processCSS: true}, {"from": "${sourceNodeLib}/magnific-popup/dist/jquery.magnific-popup.min.js", "to": "${destComponentsLib}/magnific-popup/dist"} ], "slick-carousel": [ {"from": "${sourceNodeLib}/slick-carousel/slick/ajax-loader.gif", "to": "${destComponentsLib}/slick-carousel/slick"}, {"from": "${sourceNodeLib}/slick-carousel/slick/fonts/**/*", "to": "${destComponentsLib}/slick-carousel/slick/fonts"}, {"from": "${sourceNodeLib}/slick-carousel/slick/slick.css", "to": "${destComponentsLib}/slick-carousel/slick", processCSS: true}, {"from": "${sourceNodeLib}/slick-carousel/slick/slick-theme.css", "to": "${destComponentsLib}/slick-carousel/slick", processCSS: true}, {"from": "${sourceNodeLib}/slick-carousel/slick/slick.min.js", "to": "${destComponentsLib}/slick-carousel/slick"} ], "jquery-ui-touch-punch": [ {"from": "${sourceNodeLib}/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js", "to": "${destComponentsLib}/jquery-ui-touch-punch"} ] } };
Actually it is not a standard nor optimal, but give us need functionality and flexibility to select only wanted file and decide what we could do with them before moving or merging them . The following is the gulp's task called copy-components
that use the above configuration to copy folders and files from ./node_modules
to ./web/components
:
function getClass(object) { return Object.prototype.toString.call(object).slice(8, -1); } applyParameters = function (jsonObj, p) { if (getClass(jsonObj) !== 'String') { for (var key in jsonObj) { if (jsonObj.hasOwnProperty(key)) { applyParameters(jsonObj[key], (p === "" ? "" : p + ".") + key); } } } else { solveParameters(jsonObj); } }; solveParameters = function (path) { var regex = new RegExp(/\$\{(.*?)\}/); var dot = function (obj, i) { return obj[i]; }; var matched; if (getClass(path) === 'String') { while (matched = path.match(regex)) { var realpath = matched[1].split('.').reduce(dot, config); path = path.replace(matched[0], realpath); } } return path; }; gulp.task('delete-components', function (cb) { return del([config.destComponentsLib], cb); }); gulp.task('copy-components', ["delete-components"], function () { for (var key in config.plugins) { if (config.plugins.hasOwnProperty(key)) { var componentConfig = config.plugins[key]; for (var i = 0; i < componentConfig.length; i++) { var componentResource = componentConfig[i]; var to = solveParameters(componentResource.to); var from = solveParameters(componentResource.from); console.log("copy resource from [" + from + "] to [" + to + "] processCSS [" + componentResource.processCSS + "], processJS [" + componentResource.processJS + "]"); gulp.src(from) .pipe(gulpif(componentResource.processJS === true, uglify())) .pipe(gulpif(componentResource.processCSS === true, cleanCSS())) .pipe(gulp.dest(to)); } } } });
We used gulp-if
plugins to check if the resource need any preprocessing. So if it is a Javascript file we apply gulp-uglify
plugin on the resource and if it is CSS file we apply gulp-clean-css
plugin on the resource before move them.
We can simply update or add another gulp's task that improve above technique to accomplish your requirements.
At the end, We removed Bower and migrate our front-end dependencies from Bower to NPM and Gulp only.
You could now create a gulp task that combine and generate big JS/CSS files of all front-end resources as we did in the JavaTMP Project gulp's task generate-dist that take the output of copy-components
above and generate a concatenated Javascript and CSS files.
The following HTML code provide implementation for on-canvas sliding Hidden Fixed Sidebar in two column Fixed-Fluid bootstrap 4 template:
<!doctype html> <html lang="en"> <head> <title>On-canvas Sliding Hidden Fixed Sidebar In Bootstrap 4 On Mouse Hover</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <style type="text/css"> body { padding-top: 56px; } .sidebar { z-index: 2; position: fixed; width: 300px; top: 56px; bottom: 0px; overflow-y: scroll; transition: all 0.4s; } .main-content { z-index: 1; margin-left: 0px; transition: all 0.4s; } .sidebar { margin-left: -300px; } .sidebar.active { margin-left: 0; } /* Hide body scroll bar when sidebar active on small and mobile devices */ @media (max-width: 576px) { body.sidebar-active { overflow-y: hidden; -ms-overflow-style: none; } } </style> </head> <body> <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary"> <a class="navbar-brand" href="#">JavaTMP</a> <button class="navbar-toggler" type="button" aria-controls="navbarText" aria-expanded="false" aria-label="Collapse sidebar"> <span class="navbar-toggler-icon"></span> </button> </nav> <div class="container-fluid"> <div class="row"> <div class="col p-0"> <div class="sidebar bg-dark text-white p-3"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> <div class="main-content p-3"> <div class="row"> <div class="col"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> </div> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <script type="text/javascript"> jQuery(function ($) { var menuTimeout = null; var handlingMouseMove = function (e) { if (e.pageX < 20 || $('.sidebar').is(':hover')) { // Show the menu if mouse is within 20 pixels from the left or we are hovering over it clearTimeout(menuTimeout); menuTimeout = null; $('.sidebar').addClass("active"); $("body").addClass("sidebar-active"); } else if (menuTimeout === null) { menuTimeout = setTimeout(function () { $('.sidebar').removeClass("active"); $("body").removeClass("sidebar-active"); }, 200); } }; $(window).on('resize', function (e) { width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width; if ((width < 576)) { // default on <= navbar-expand-sm devices. $(window).off('mousemove', handlingMouseMove); } else { // default on > navbar-expand-sm devices. $(window).on('mousemove', handlingMouseMove); handlingMouseMove(e); } }).resize(); $(".navbar-toggler").on("click", function () { // we manually collapse sidebar: if ($('.sidebar').hasClass("active")) { $('.sidebar').removeClass("active"); $("body").removeClass("sidebar-active"); } else { $('.sidebar').addClass("active"); $("body").addClass("sidebar-active"); } }); }); </script> </body> </html>
]]>
We provide you the HTML code for Sliding fixed sidebar using CSS transition that hides sidebar on mobile and small devices by showing a navbar toggler button. and on larger devices the button hide and sidebar stay static:
<!doctype html> <html lang="en"> <head> <title>Basic Bootstrap Admin Dashboard Template</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <style type="text/css"> body { padding-top: 56px; } .sidebar { z-index: 2; position: fixed; width: 300px; top: 56px; bottom: 0px; overflow-y: scroll; transition: all 0.3s; } .main-content { z-index: 1; margin-left: 0px; transition: all 0.3s; } .sidebar { margin-left: -300px; } .sidebar.active { margin-left: 0; } /* make sidebar shown off-canvas on mobile and small devices by default */ .sidebar.active + .main-content { margin-left: 0px; } @media (min-width: 576px) { /* Shift main-content on larger devices */ .sidebar.active + .main-content { margin-left: 300px; } } /* Hide body scroll bar when sidebar active on small and mobile devices */ @media (max-width: 576px) { body.sidebar-active { overflow-y: hidden; -ms-overflow-style: none; } } </style> </head> <body> <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary"> <a class="navbar-brand" href="#">JavaTMP</a> <button class="navbar-toggler" type="button" aria-controls="navbarText" aria-expanded="false" aria-label="Collapse sidebar"> <span class="navbar-toggler-icon"></span> </button> </nav> <div class="container-fluid"> <div class="row"> <div class="col p-0"> <div class="sidebar bg-dark text-white p-3"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> <div class="main-content p-3"> <div class="row"> <div class="col"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> </div> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <script type="text/javascript"> jQuery(function ($) { $(window).on('resize', function () { width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width; if ((width < 576)) { // default on <= navbar-expand-sm devices. $('.sidebar').removeClass('active'); $("body").removeClass("sidebar-active"); } else { // default on > navbar-expand-sm devices. $('.sidebar').addClass("active"); $("body").addClass("sidebar-active"); } }).resize(); $(".navbar-toggler").on("click", function () { // we manually collapse sidebar: if ($('.sidebar').hasClass("active")) { $('.sidebar').removeClass("active"); $("body").removeClass("sidebar-active"); } else { $('.sidebar').addClass("active"); $("body").addClass("sidebar-active"); } }); }); </script> </body> </html>
To make our template show/hide the fixed sidebar by mouse, we implements the following modifications:
Hiding the sidebar by default. So we remove the resize event handler and calling for it on page load.
Add mousemove event handler to track the mouse movement when it reach the left side browser window bar.
finally, we disable the above listening for mousemove event on mobile and small devices. by listening on resize and activate or deactive mousemove event accordingly.
The following HTML code shows sliding Fixed sidebar in two columns Fixed-Fluid bootstrap 4 template on mouse hover:
<!doctype html> <html lang="en"> <head> <title>Basic Bootstrap Admin Dashboard Template</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <style type="text/css"> body { padding-top: 56px; } .sidebar { z-index: 2; position: fixed; width: 300px; top: 56px; bottom: 0px; overflow-y: scroll; transition: all 0.4s; } .main-content { z-index: 1; margin-left: 0px; transition: all 0.4s; } .sidebar { margin-left: -300px; } .sidebar.active { margin-left: 0; } /* make sidebar shown off-canvas on mobile and small devices by default */ .sidebar.active + .main-content { margin-left: 0px; } @media (min-width: 576px) { /* Shift main-content on larger devices */ .sidebar.active + .main-content { margin-left: 300px; } } /* Hide body scroll bar when sidebar active on small and mobile devices */ @media (max-width: 576px) { body.sidebar-active { overflow-y: hidden; -ms-overflow-style: none; } } </style> </head> <body> <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary"> <a class="navbar-brand" href="#">JavaTMP</a> <button class="navbar-toggler" type="button" aria-controls="navbarText" aria-expanded="false" aria-label="Collapse sidebar"> <span class="navbar-toggler-icon"></span> </button> </nav> <div class="container-fluid"> <div class="row"> <div class="col p-0"> <div class="sidebar bg-dark text-white p-3"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> <div class="main-content p-3"> <div class="row"> <div class="col"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> </div> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <script type="text/javascript"> jQuery(function ($) { var menuTimeout = null; var handlingMouseMove = function (e) { if (e.pageX < 20 || $('.sidebar').is(':hover')) { // Show the menu if mouse is within 20 pixels from the left or we are hovering over it clearTimeout(menuTimeout); menuTimeout = null; $('.sidebar').addClass("active"); $("body").addClass("sidebar-active"); } else if (menuTimeout === null) { menuTimeout = setTimeout(function () { $('.sidebar').removeClass("active"); $("body").removeClass("sidebar-active"); }, 200); } }; $(window).on('resize', function () { width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width; if ((width < 576)) { // default on <= navbar-expand-sm devices. $(window).off('mousemove', handlingMouseMove); } else { // default on > navbar-expand-sm devices. $(window).on('mousemove', handlingMouseMove); } }).resize(); $(".navbar-toggler").on("click", function () { // we manually collapse sidebar: if ($('.sidebar').hasClass("active")) { $('.sidebar').removeClass("active"); $("body").removeClass("sidebar-active"); } else { $('.sidebar').addClass("active"); $("body").addClass("sidebar-active"); } }); }); </script> </body> </html>
]]>
The following HTML code provide you a static starter two columns Fixed-Fluid layout with fixed-top navbar in Bootstrap 4 template. This template will show a navbar-toggler button on small screen or mobile:
<!doctype html> <html lang="en"> <head> <title>Basic Bootstrap Admin Dashboard Template</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <style type="text/css"> body { padding-top: 56px; } .sidebar { z-index: 2; position: fixed; width: 300px; top: 56px; bottom: 0px; overflow-y: scroll; } .main-content { z-index: 1; margin-left: 300px; } </style> </head> <body> <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary"> <a class="navbar-brand" href="#">JavaTMP</a> <button class="navbar-toggler" type="button" aria-controls="navbarText" aria-expanded="false" aria-label="Collapse sidebar"> <span class="navbar-toggler-icon"></span> </button> </nav> <div class="container-fluid"> <div class="row"> <div class="col p-0"> <div class="sidebar bg-dark text-white p-3"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> <div class="main-content p-3"> <div class="row"> <div class="col"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> </div> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </body> </html>
The following HTML code provide you with two columns Fixed-Fluid layout with fixed-top navbar in Bootstrap 4 template. This template will show a navbar-toggler button on small screen or mobile and it will smoothly collapse fixed sidebar off-canvas main-content responsively:
<!doctype html> <html lang="en"> <head> <title>Basic Bootstrap Admin Dashboard Template</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <style type="text/css"> body { padding-top: 56px; } .sidebar { z-index: 2; position: fixed; width: 300px; top: 56px; bottom: 0px; overflow-y: scroll; transition: all 0.3s; } .main-content { z-index: 1; margin-left: 0px; transition: all 0.3s; } .sidebar { margin-left: -300px; } .sidebar.active { margin-left: 0; } /* make sidebar shown off-canvas on mobile and small devices by default */ .sidebar.active + .main-content { margin-left: 0px; } @media (min-width: 576px) { /* Shift main-content on larger devices */ .sidebar.active + .main-content { margin-left: 300px; } } /* Hide body scroll bar when sidebar active on small and mobile devices */ @media (max-width: 576px) { body.sidebar-active { overflow-y: hidden; -ms-overflow-style: none; } } </style> </head> <body> <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary"> <a class="navbar-brand" href="#">JavaTMP</a> <button class="navbar-toggler" type="button" aria-controls="navbarText" aria-expanded="false" aria-label="Collapse sidebar"> <span class="navbar-toggler-icon"></span> </button> </nav> <div class="container-fluid"> <div class="row"> <div class="col p-0"> <div class="sidebar bg-dark text-white p-3"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> <div class="main-content p-3"> <div class="row"> <div class="col"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> </div> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <script type="text/javascript"> jQuery(function ($) { $(window).on('resize', function () { width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width; if ((width < 576)) { // default on <= navbar-expand-sm devices. $('.sidebar').removeClass('active'); $("body").removeClass("sidebar-active"); } else { // default on > navbar-expand-sm devices. $('.sidebar').addClass("active"); $("body").addClass("sidebar-active"); } }).resize(); $(".navbar-toggler").on("click", function () { // we manually collapse sidebar: if ($('.sidebar').hasClass("active")) { $('.sidebar').removeClass("active"); $("body").removeClass("sidebar-active"); } else { $('.sidebar').addClass("active"); $("body").addClass("sidebar-active"); } }); }); </script> </body> </html>
You can remove class navbar-expand-sm
from fixed-top navbar to make the collapsible button shown on larger devices too.
]]>
navbar-toggler
button. this will allow our template to become responsive in mobile or when window's width changes.
We simply make a collapsible fixed sidebar to our two columns Fixed-Fluid Bootstrap 4 layout by adding standard Bootstrap 4 navbar and include a button with navbar-toggler
class to it to activate build-in Bootstrap's collapse plugin.
Because our template's sidebar is fixed, we use a fixed-fluid navbar and we update CSS for sidebar and add a padding-top to body.
The following HTML code provide an update to our starter two columns Fixed-Fluid layout template with fixed top navbar contains navbar-togger button and brand-name an updated CSS layout:
<!doctype html> <html lang="en"> <head> <title>JavaTMP - Collapsible fixed sidebar in Bootstrap 4 Using navbar-toggler Button</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <style type="text/css"> body { padding-top: 56px; } .sidebar { z-index: 2; position: fixed; width: 300px; top: 56px; bottom: 0px; overflow-y: scroll; } .main-content { z-index: 1; margin-left: 300px; } /** navbar-expand-sm devices **/ @media (max-width: 576px) { .main-content { margin-left: 0px; } } </style> </head> <body class=""> <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary"> <a class="navbar-brand" href="#">JavaTMP</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".sidebar" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </nav> <div class="container-fluid"> <div class="row"> <div class="col p-0"> <div class="sidebar bg-dark text-white p-3 collapse"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> <div class="main-content p-3"> <div class="row"> <div class="col"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> </div> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <script type="text/javascript"> jQuery(function ($) { $(window).on('resize', function () { width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width; if ((width < 576)) { // default on <= navbar-expand-sm devices. $('.sidebar').collapse('hide'); } else { // default on > navbar-expand-sm devices. $('.sidebar').collapse('show'); } }).resize(); }); </script> </body> </html>
And this is the above template running on the large browser screen:
And the following screen showing the template on small screen browser:
The modifications and changing on the above theme are the following:
navbar
class and fixed-top
and navbar-expand-sm
classes.navbar-toggler
button's data-target attribute .sidebar.
padding-top
CSS attribute with value 56px to body.collapse
class to sidebar class.It is sometimes important to disable body scrolling when sidebar shows on mobile to prevent screen flicker and provide consistent behavior. we add the following modification to support disabling body scrolling:
Add the following styling to top of the page. that will make the body's vertical scroll bar hidden when we add a class name sidbar-active to body when max width of the windows is 576px or normally mobile devices:
@media (max-width: 576px) { body.sidebar-active { overflow-y: hidden; } }
Add the following Javascript code that will listen to main bootstrap collapsible plugin events show.bs.collapse
and hide.bs.collapse
:
$('.sidebar').on('show.bs.collapse', function () { $("body").addClass("sidebar-active"); }); $('.sidebar').on('hide.bs.collapse', function () { $("body").removeClass("sidebar-active"); });
The following image shows the above modification on small browser window when sidebar shown and hidden:
The following HTML code is the implementation of the Collapsible fixed sidebar in two columns Fixed-Fluid Bootstrap 4 layout using standard Bootstrap 4 navbar navbar-toggler button and hiding body scrollbar when sidebar is active or shown on mobile and small devices:
<!doctype html> <html lang="en"> <head> <title>JavaTMP - Collapsible fixed sidebar in Bootstrap 4 Using navbar-toggler Button</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <style type="text/css"> body { padding-top: 56px; } .sidebar { z-index: 2; position: fixed; width: 300px; top: 56px; bottom: 0px; overflow-y: scroll; } .main-content { z-index: 1; margin-left: 300px; } /** navbar-expand-sm devices **/ @media (max-width: 576px) { .main-content { margin-left: 0px; } } @media (max-width: 576px) { body.sidebar-active { overflow-y: hidden; } } </style> </head> <body class=""> <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary"> <a class="navbar-brand" href="#">JavaTMP</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".sidebar" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </nav> <div class="container-fluid"> <div class="row"> <div class="col p-0"> <div class="sidebar bg-dark text-white p-3 collapse"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> <div class="main-content p-3"> <div class="row"> <div class="col"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> </div> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <script type="text/javascript"> jQuery(function ($) { $(window).on('resize', function () { width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width; if ((width < 576)) { // default on <= navbar-expand-sm devices. $('.sidebar').collapse('hide'); } else { // default on > navbar-expand-sm devices. $('.sidebar').collapse('show'); } }).resize(); $('.sidebar').on('show.bs.collapse', function () { $("body").addClass("sidebar-active"); }); $('.sidebar').on('hide.bs.collapse', function () { $("body").removeClass("sidebar-active"); }); }); </script> </body> </html>
We can make the sidebar collapse by any button in the body not just the navbar one. by adding specific attribute. the following HTML button code shows you how we can make any button fire events to show or hide sidebar:
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".sidebar" aria-controls="navbarText" aria-expanded="false" aria-label="Collapse sidebar"> Collapse </button>
Although implementing a collapsible sidebar by bootstrap collapsible plugin is simple, It does not give us that flexibility to changing the direction of the movement and it is normally hidden starting from bottom to top and shown starting from top to bottom. We can implement those smooth transition changes using custom CSS styling but it lead us to new functionality and behavior.
]]>
We start with the following standard bootstrap 4 starter template that references only needed CSS & Javascript files and provides latest design and development standards, like using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors:
<!doctype html> <html lang="en"> <head> <title>Hello, world!</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </body> </html>
Now we show you modified version of above template to support a fixed sidebar of 300 pixels width and fluid main content with zero functionalities and no responsiveness for changing width of the browser:
<!doctype html> <html lang="en"> <head> <title>Basic Bootstrap Admin Dashboard Template</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <style type="text/css"> .sidebar { z-index: 2; position: fixed; width: 300px; top: 0px; bottom: 0px; overflow-y: scroll; } .main-content { z-index: 1; margin-left: 300px; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col p-0"> <div class="sidebar bg-dark text-white p-3"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> <div class="main-content p-3"> <div class="row"> <div class="col"> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p> </div> </div> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </body> </html>
The following screen show the above HTML template on the browser:
Now we can create customized versions of the above starter template by adding some of the standard sidebar and dashboard style functionalities like:
]]>