Hướng dẫn menu dọc bootstrap 4

Bước 1: Tạo cấu trúc HTML

 
 
Thiết kế menu dọc với trạng thái Active
 
 
  
 
   
 DANH MỤC KHÓA HỌC
   
 
   
 Chuyên viên website lành nghề Online
   
 
   
 Thiết kế giao diện web Online
   
 
   
 Lập trình PHP cơ bản Online
   
 
   
 Lập trình HTML5, CSS3, BOOTSTRAP, JS, RWD Online
   
 
  
 

Bước 2: Tạo cấu trúc CSS

 

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {	
color: #fff;	
background-color: #428bca;	
font-weight:bold;	
font-size:16px;
}

.margintop20 {	
margin-top:20px;
}

.nav-pills>li>a {	
border-radius: 0px;
}

a {	color: #000;	
text-decoration: none;
}

a:hover {	
color: #000;	
text-decoration: none;
}

.nav-stacked>li+li {	
margin-top: 0px;	
margin-left: 0;	
border-bottom:1px solid #dadada;	
border-left:1px solid #dadada;	
border-right:1px solid #dadada;
}

.active2 {
	border-right:4px solid #428bca;
}

Bước 3: Gọi thư viện Bootstrap và Font awesome

Bước 4: Gọi thư viện JQUERY