1.

How to display flex items horizontally in Bootstrap?

Answer»

With Bootstrap, it’s possible to display FLEX items horizontally using the .flex-row class.

You need to use the following:

<div class="d-flex flex-row bg-secondary mb-3">

Above, we have used the contextual class “bg-secondary” for background color.

Now, we will work on an example:

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link REL="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">   <script SRC="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="CONTAINER mt-3">   <h1>Student Name</h1>   <div class="d-flex flex-row bg-primary mb-3">     <div class="p-2 bg-danger">Sehral</div>     <div class="p-2 bg-primary">Fara</div>     <div class="p-2 bg-dark">Kelly</div>     <div class="p-2 bg-secondary">Gemma</div>     <div class="p-2 bg-warning">Jessica</div>     <div class="p-2 bg-primary">Lauren</div>   </div> </div> </body> </html>

The above aligns the flex items horizontally:


OR

To display flex items horizontally, use the flex-*-row class in Bootstrap. For difference screens, replace the * in the class name with the following:

For large screen:

flex-lg-row

For medium size screen:

flex-md-row

For SMALL screen: 

flex-sm-row


Discussion

No Comment Found

Related InterviewSolutions