Bootstrap 5 Alerts Link color
Bootstrap 5 Alerts Link Color class is used to set the color of the alert element. There are different kind of alerts that indicates different things, if there is a success then the color of the alert will be green, if it’s a failure then it should show a red color alert. Each color of the alert represents something. Alert color should be its name, but we are using color on Alert Link so there will be a mixup with color according to the name on the documentation.
Prerequisite: Bootstrap 5 Alert Component, to create alert – for that we can use alert.
Alerts Link color Classes:
- alert-link: This class is used to make the text of the alert a link.
- alert-primary: This class is used to make the color of the alert blue.
- alert-secondary: This class is used to make the color of the alert gray.
- alert-success: This class is used to make the color of the alert green.
- alert-danger: This class is used to make the color of the alert red.
- alert-warning: This class is used to make the color of the alert yellow.
- alert-info: This class is used to make the color of the alert sky blue.
- alert-light: This class is used to make the color of the alert white.
- alert-dark: This class is used to make the color of the alert dark gray.
Syntax:
<div class="alert alert-primary" role="alert"> ... <a href="#" class="alert-link">...</a> </div>
Below example illustrate the Bootstrap 5 Alerts Link color:
Example 1: In this example, we will use six informative Alert Link Color classes.
HTML
<!DOCTYPE html> < html > < head > <!-- Bootstrap 5 CDN Link--> < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < title >Bootstrap 5 Alerts Link color</ title > </ head > < body class = "m-3" > < center > < h1 class = "text-success" >w3wiki</ h1 > < strong >Bootstrap 5 Alerts Link color</ strong > </ center > <!-- Bootstrap 5 Alerts Link Color and Alerts Link used--> < div class = "alert alert-primary" > A Computer Science Portal for Beginner: < a href = "#" class = "alert-link" >w3wiki</ a > </ div > < div class = "alert alert-secondary" > A Computer Science Portal for Beginner: < a href = "#" class = "alert-link" >w3wiki</ a > </ div > < div class = "alert alert-success" > A Computer Science Portal for Beginner: < a href = "#" class = "alert-link" >w3wiki</ a > </ div > < div class = "alert alert-danger" > A Computer Science Portal for Beginner: < a href = "#" class = "alert-link" >w3wiki</ a > </ div > < div class = "alert alert-warning" > A Computer Science Portal for Beginner: < a href = "#" class = "alert-link" >w3wiki</ a > </ div > < div class = "alert alert-info" > A Computer Science Portal for Beginner: < a href = "#" class = "alert-link" >w3wiki</ a > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will use light and dark alert classes for color and one alert will be without a Link color class only the Alert-Link, because of that linked text will be rendered in blue color.
HTML
<!DOCTYPE html> < html > < head > <!-- Bootstrap 5 CDN Link--> < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < title >Bootstrap 5 Alerts Link color</ title > </ head > < body class = "m-3" > < center > < h1 class = "text-success" >w3wiki</ h1 > < strong >Bootstrap 5 Alerts Link color</ strong > </ center > <!-- Bootstrap 5 Alerts Link Color and Alerts Link used--> < div class = "alert alert-light" > A Computer Science Portal for Beginner: < a href = "#" class = "alert-link" >w3wiki</ a > </ div > < div class = "alert alert-dark" > A Computer Science Portal for Beginner: < a href = "#" class = "alert-link" >w3wiki</ a > </ div > < div class = "alert" > A Computer Science Portal for Beginner: < a href = "#" class = "alert-link" >w3wiki</ a > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/alerts/#link-color
Contact Us