"sidebar.rtl"
Bootstrap 4.1.1 Snippet by bgsrb

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-expand navbar-dark bg-primary"> <a href="#menu-toggle" id="menu-toggle" class="navbar-brand"><span class="navbar-toggler-icon"></span></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExample02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
</ul>
<form class="form-inline my-2 my-md-0"> </form>
</div>
</nav>
<div id="wrapper" class="toggled">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"> <a href="#"> Start Bootstrap </a> </li>
<li> <a href="#">Dashboard</a> </li>
<li> <a href="#">Shortcuts</a> </li>
<li> <a href="#">Overview</a> </li>
<li> <a href="#">Events</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">Services</a> </li>
<li> <a href="#">Contact</a> </li>
</ul>
</div> <!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*******************************************************************************
* bootstrap-rtl (version 4.0.0 beta2)
* Author: Morteza Ghalambor
* Created on: september 7,2016
* Project: bootstrap-rtl
* Copyright: GPL
*******************************************************************************/
body {
direction: rtl;
text-align:right
}
dd {
margin-right: 0;
}
figure {
margin: 0 0 1rem;
}
caption {
text-align: right;
}
th {
text-align: right;
}
.list-unstyled {
padding-right: 0;
}
.list-inline {
padding-right: 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard 2 PRO
Content + Sidebar BS4
Pro Sidebar Template with Bootstrap 4
Search Result #lists with #sidebar #map and #card designs #bootstrap4

Questions / Comments:

if i want to make a Dropdown Menu ?

MoEltahawy (1) - 5 years ago - Reply 1

why label and form-control, the text always start from right ?

if i am input the text in form-control the text startf from right to left

fridolinf (0) - 4 years ago - Reply 0

Bjr,

Chez moi ça marche pas, je sais pas pourquoi, pourtant tous les paquets sont installés. Apparemment ça marche avec la version 4.1.1 il se trouve que j'ai la version 4.4.1... Que faire pour que ça marche ? Merci

sylvain258 (-1) - 4 years ago - Reply -1

Hi! This looks really great. May I ask how to change the orientation if I want the sidebar to be on the left side? Thanks! :)

Chris2019 () - 6 years ago - Reply 0

Replace this css with current written css...

@media (min-width: 768px)

#wrapper.toggled {

padding-left: 250px;

}

}

#sidebar-wrapper {

z-index: 1000;

position: fixed;

width: 0;

height: 100%;

margin-right: -250px;

overflow-y: auto;

background: #000;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

left: 250px;

transition: all 0.5s ease;

margin-left: -250px;

}

suneelrajpoot44 (-1) - 5 years ago - Reply 0