Bootstrap 5 Buttons Disable text wrapping

Last Updated : 31 Jul, 2024

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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        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

Comment

Explore