Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Bootstrap 4 .flex-nowrap class

Bootstrap Web Development CSS Framework

Avoid wrapping flex items in Bootstrap 4, using the .flex-nowrap class.

Below you can see the flex items aren?t wrapping after the "Eight" flex-item ?

The flex is set in the div class as if we add any other class in

?


The following is an example to implement flex-nowrap class to avoid wrapping of flex items ?


Example



  
    Bootstrap Example
    
    
    
    
    
  
  
    

      
FLEX WRAP AND NOWRAP

      
Flex items will wrap

      

        
One

        
Two

        
Three

        
Four

        
Five

        
Six

        
Seven

        
Eight

        
Nine

      



      
Flex items won't wrap

      

        
One

        
Two

        
Three

        
Four

        
Five

        
Six

        
Seven

        
Eight

        
Nine

      



   

 
Updated on: 2026-03-11T22:50:42+05:30

2K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements