Bootstrap 5 Alerts Link color
Last Updated :
20 Jan, 2023
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 >
< link href =
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" >Geeksforgeeks</ h1 >
< strong >Bootstrap 5 Alerts Link color</ strong >
</ center >
< div class = "alert alert-primary" >
A Computer Science Portal for Geeks:
< a href = "#" class = "alert-link" >Geeksforgeeks</ a >
</ div >
< div class = "alert alert-secondary" >
A Computer Science Portal for Geeks:
< a href = "#" class = "alert-link" >Geeksforgeeks</ a >
</ div >
< div class = "alert alert-success" >
A Computer Science Portal for Geeks:
< a href = "#" class = "alert-link" >Geeksforgeeks</ a >
</ div >
< div class = "alert alert-danger" >
A Computer Science Portal for Geeks:
< a href = "#" class = "alert-link" >Geeksforgeeks</ a >
</ div >
< div class = "alert alert-warning" >
A Computer Science Portal for Geeks:
< a href = "#" class = "alert-link" >Geeksforgeeks</ a >
</ div >
< div class = "alert alert-info" >
A Computer Science Portal for Geeks:
< a href = "#" class = "alert-link" >Geeksforgeeks</ a >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Alerts Link color
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 >
< link href =
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" >Geeksforgeeks</ h1 >
< strong >Bootstrap 5 Alerts Link color</ strong >
</ center >
< div class = "alert alert-light" >
A Computer Science Portal for Geeks:
< a href = "#" class = "alert-link" >Geeksforgeeks</ a >
</ div >
< div class = "alert alert-dark" >
A Computer Science Portal for Geeks:
< a href = "#" class = "alert-link" >Geeksforgeeks</ a >
</ div >
< div class = "alert" >
A Computer Science Portal for Geeks:
< a href = "#" class = "alert-link" >Geeksforgeeks</ a >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Alerts Link color
Reference: https://getbootstrap.com/docs/5.0/components/alerts/#link-color
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...