Bootstrap 5 Flex Grow and shrink

Bootstrap 5 Text wrapping and overflow

Last Updated : 12 Dec, 2022

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

Bootstrap 5 Flex Grow and shrink

S

skyridetim

Improve

Article Tags :

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

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

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

Bootstrap 5 Flex Grow and shrink

Bootstrap 5 Flex Grow and shrink is used to apply the expanding and shrinking look to an HTML div in a flexbox. By default, all the flex items will have the width/size until specified.When we add the .flex-grow-1 to a flex item it expands and covers up all the space which is available to it. Adding

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

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

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

Bootstrap 5 Text Word break

Text Word break is used to break the long string. Prevent long strings of text from breaking your components' layout by using text-break. This class is deprecated because a line break is not possible in Arabic, and the most used RTL language is Arabic. Bootstrap 5 Text Word break Class: text-break:

Bootstrap 5 Text Truncation

Bootstrap 5 is a catalog of UI components that enables developers to develop their websites and applications in less time by using the pre-built components and utility classes. This article will see Bootstrap 5 Text truncation.Text Truncation is used to truncate long statements and paragraphs using

How to Wrap Text Around Image in Bootstrap ?

To wrap text around an image in Bootstrap 5, you can apply the 'float' utility classes along with the 'img-fluid' class for responsive images. This technique involves floating the image to the left or right and creating margins to allow the text to wrap around it. ApproachThe code uses Bootstrap 5 c