Bootstrap 5 Text wrapping and overflow Last Updated : 12 Dec, 2022 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Text wrapping and overflow class is used to specify that the browser may break lines of text inside any targeted element to prevent overflow when the original string is too long to fit. Bootstrap 5 Text wrapping and overflow Classes: text-wrap: This class is used to wrap up the content.text-nowrap: This class is used to not wrap the element. Syntax: <tag class="text-wrap"> ... </tag> The below example illustrates the Text wrapping and overflow. Example 1: In the following code, we will wrap the element. HTML <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body class="m-3"> <h1 class="text-success text-center"> Geeksforgeeks </h1> <!-- Bootstrap text-wrap class used --> <p class="bg-success text-wrap" style="width:120px;"> A Computer Science Portal for Geeks </p> </body> </html> Output: Bootstrap 5 Text wrapping and overflow Example 2: In the following code, we will not wrap the element. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body class="m-3"> <h1 class="text-success text-center"> Geeksforgeeks </h1> <!-- Bootstrap text-wrap class used --> <p class="bg-success text-nowrap" style="width:120px;"> A Computer Science Portal for Geeks </p> </body> </html> Output: Bootstrap 5 Text wrapping and overflow Reference: https://getbootstrap.com/docs/5.0/utilities/text/#text-wrapping-and-overflow Comment More infoAdvertise with us Next Article Bootstrap 5 Columns Wrapping S skyridetim Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-5 Similar Reads Bootstrap 5 Buttons Disable text wrapping 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 us 2 min read Bootstrap 5 Flex Wrap Bootstrap 5's flex-wrap utility enables flexible layout control, allowing items to wrap as needed within a flex container. It offers options like nowrap, wrap, and wrap-reverse for responsive design.Bootstrap 5 Flex Wrap Classes:CSS ClassDescriptionflex-wrapChanges how flex items wrap in a flex cont 2 min read Bootstrap 5 Input group Wrapping Bootstrap 5 Input group Wrapping help to extend form controls by adding text, or buttons on either side of textual inputs. Input groups are wrapped by default in order to accommodate field validations within an input group. We can disable them using class flex-nowrap. Bootstrap 5 Input group Wrappin 2 min read Bootstrap 5 Columns Wrapping Columns are an integral part of the grid system. The columns are placed inside the row that is wrapped by a container. If more than 12 columns are placed within a single row, they will wrap to the next line automatically as one unit. Bootstrap 5 Columns wrapping Classes: There is no specific class t 2 min read Bootstrap 5 Overflow Bootstrap 5 Overflow provides utility classes to manage overflow behavior within elements. Options include auto, hidden, visible, and scroll, allowing control over content display in constrained spaces, ensuring a better user experience and layout management.iframe { width: 100%; height: 400px;} @me 2 min read Bootstrap 5 Text Font weight and italics Bootstrap 5 Text Font weight and italics classes are used to manipulate text weight and text style. There are several classes to do so. In this article, we will see the use of each class that has been used in the examples code. Font weight and italics classes: fw-bold: This class is used to make the 2 min read Like