Membuat sidebar dengan bootstrap 4

Question

Nội dung chính Show

Description
Go Pro Today!

I'm trying to create a layout like the screenshot using Bootstrap 4 but I'm having some problems with making the sidebar fixed and achieving this layout at the same time.

Going with a basic example:


  
    
      Sidebar
    
    
      Main Area

It's possible to get this layout but things get tricky once I declare:

.sidebar {
position: fixed // or absolute
}

Once I make the sidebar sticky, the main div starts appearing behind the sidebar instead of next to it. Of course it's possible to declare some margin and push it back to it's original position but it makes things complicated for responsiveness.

I feel like I'm missing something, I read the Bootstrap 4 documentation but I couldn't find a simple way to achieve this layout.

Simple Sidebar

A toggleable, simple sidebar template for Bootstrap 5 featuring a responsive sidebar navigation menu and a top navigation bar

A toggleable, simple sidebar template for Bootstrap 5 featuring a responsive sidebar navigation menu and a top navigation bar

Description

Simple Sidebar is a basic sidebar menu page layout for Bootstrap websites with off canvas navigation on smaller screen sizes. It is a great starting point for minimal dashboard web apps, or general websites with a toggleable sidebar.

Features

Responsive Bootstrap sidebar navigation
Optional top navigation bar with toggle button
Off-canvas navigation toggling on smaller screens
Responsive page content area

Need something more?

Try SB Admin Pro!

Pro Features Include:

Full Documentation
Email Support
More Components & Features
More Layouts & Page Examples

Try SB Admin Pro!

Like our free products? Our pro products are even better!

Go Pro Today!

	Simple Sidebar (Free)	SB Admin Pro (Pro)
Custom & Extended Components	5	70+
Custom CSS Utilities	10	100+
Example Pages	6	30+
Documentation
Email Support
Code Snippets
Expanded Color System
Sidebar Options	Static Only	Fixed and Static

Preview SB Admin Pro!

Halo, ketemu lagi dengan saya 🙂 , kali ini saya akan berbagi tutorial tentang bagaimanaÂ Cara Membuat Sidebar Sederhana Dengan Bootstrap, berikut langkah-langkahnya.

Langsung saja, silahkan kalian ketikan kode HTML berikut pada index bootstrapnya.

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

38

39

40

41

42

43

44

45

46

<div class="brand">Network Status</div>

<a href="#">Start Bootstrap</a>

</li>

<li>

<a href="#">Dashboard</a>

</li>

<li>

<ahref="#">Shortcuts</a>

</li>

<li>

<ahref="#">Overview</a>

</li>

<li>

<ahref="#">Events</a>

</li>

<li>

<ahref="#">About</a>

</li>

<li>

<a href="#">Services</a>

</li>

<li>

<ahref="#">Contact</a>

</li>

</ul>

</div>

<h2>Simple Sidebar</h2>

<ahref="#menu-toggle"class="btn btn-default"id="menu-toggle">Toggle Menu</a>

</div>

Setelah itu, kita akan sedikit menghias dengan kode CSS3 berikut.

.brand{

text-align:left!important;

font-size:22px;

padding-left: 20px;

line-height:50px!important;

}

Terakhir, kita akan buat fungsi toggle untuk menampilkan sidebarnya dengan kode Javascript berikut.

//

$("#menu-toggle").click(function(e){

e.preventDefault();

$("#wrapper").toggleClass("toggled");

});

Kalo sudah semua, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing dan lihat hasilnya. Selesai.

Baik itu tadi tutorialÂ Cara Membuat Sidebar Sederhana Dengan Bootstrap, semoga bermanfaat, sampai ketemu di tutorial selanjutnya.

Selamat mencoba 🙂

kode bootstrap Bootstrap sidebar menu Sidebar Bootstrap example

Membuat sidebar dengan bootstrap 4

Description

Features

Go Pro Today!

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội