InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
Link List Group Items in Bootstrap |
|
Answer» For List Group Items, we use the <ul> element as shown below: <ul class = "list-group"> <li class = "list-group-item">One</li> <li class = "list-group-item">Two</li> <li class = "list-group-item">Three</li> <li class = "list-group-item">Four</li> <li class = "list-group-item">Five</li> </ul>To LINK List Group Items, use the anchor tag. With that, use the <DIV> element INSTEAD of <ul>: <a href = "#" class = "list-group-item active">One</a> <a href = "#" class = "list-group-item">Two</a> <a href = "#" class = "list-group-item">Three</a> <a href = "#" class = "list-group-item">Four</a> <a href = "#" class = "list-group-item">Five</a>The following is an example displaying how you can link List Group Items: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <META charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Link List Group Items</h2> <ul> <a href = "#" class = "list-group-item active">One</a> <a href = "#" class = "list-group-item">Two</a> <a href = "#" class = "list-group-item">Three</a> <a href = "#" class = "list-group-item">Four</a> <a href = "#" class = "list-group-item">Five</a> </ul> </div> </body> </html>The output is displayed here: We have used the .active class to display the CURRENT link. |
|