Bootstrap 5 Buttons Disable text wrapping
Last Updated :
26 Nov, 2022
Bootstrap 5 Buttons Disable text wrapping is used if you don’t want to wrap the button text. To disable the button text wrapping, we will use .text-nowrap class with .btn class. You can also use $btn-white-space: nowrap in SASS to disable text wrapping in each button.
Buttons Disable text wrapping used Class:
- .text-nowrap: This class is used to disable the text wrapping of a button.
Syntax:
<button type="button" class="btn text-nowrap">
...
</button>
Example 1: In this example, we will use .btn, .btn-primary, and .text-nowrap classes to disable the text wrapping of a primary color button.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap 5 Buttons Disable text wrapping</ title >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body style = "text-align:center;" >
< div class = "container mt-3" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Bootstrap 5 Buttons Disable text wrapping</ h2 >
< h3 >Enable text wrapping</ h3 >
< button type = "button" class = "btn btn-primary" >
GeeksforGeeks | A computer science portal
for geeks where you can learn programming
</ button >
< br >< br >
< h3 >Disable text wrapping</ h3 >
< button type = "button"
class = "btn btn-primary text-nowrap" >
GeeksforGeeks | A computer science portal
for geeks where you can learn programming
</ button >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we will use .btn, .btn-primary, and .text-nowrap classes and the disabled attribute to disable the text wrapping of the disabled outline success color button.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap 5 Buttons Disable text wrapping</ title >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body style = "text-align:center;" >
< div class = "container mt-3" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Bootstrap 5 Buttons Disable text wrapping</ h2 >
< h3 >Enable text wrapping</ h3 >
< button type = "button"
class = "btn btn-outline-success"
disabled>
GeeksforGeeks | A computer science portal
for geeks where you can learn programming
</ button >
< br >< br >
< h3 >Disable text wrapping</ h3 >
< button type = "button"
class = "btn btn-outline-success text-nowrap"
disabled>
GeeksforGeeks | A computer science portal
for geeks where you can learn programming
</ button >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/buttons/#disable-text-wrapping
Share your thoughts in the comments
Please Login to comment...