Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Align flex items in the center on different screen sizes in Bootstrap

Bootstrap Web Development CSS Framework

To align items in the center on different screen sizes, use the justify-content-*-center class.

The aligned flex items would be like the following for small screen size −

<div class="d-flex justify-content-sm-center bg-warning mb-5">
  <div class="p-2 bg-danger">GOLF</div>
  <div class="p-2 bg-info">CRICKET</div>
  <div class="p-2 bg-secondary">SQUASH</div>
</div>

The aligned flex items would be like the following for medium screen size −

<div class="d-flex justify-content-md-center bg-warning mb-5">
  <div class="p-2 bg-danger">GOLF</div>
  <div class="p-2 bg-info">CRICKET</div>
  <div class="p-2 bg-secondary">SQUASH</div>
</div>

The aligned flex items would be like the following for large screen size −

<div class="d-flex justify-content-lg-center bg-warning mb-5">
  <div class="p-2 bg-danger">GOLF</div>
  <div class="p-2 bg-info">CRICKET</div>
  <div class="p-2 bg-secondary">SQUASH</div>
</div>

Let us see how to implement the justify-content-*-center −

Example

Live Demo

<!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">
    <h3>Sports</h3>
    <h4>Centered on small screen</h4>
    <div class="d-flex justify-content-sm-center bg-warning mb-5">
      <div class="p-2 bg-danger">GOLF</div>
      <div class="p-2 bg-info">CRICKET</div>
      <div class="p-2 bg-secondary">SQUASH</div>
    </div>
    <h4>Centered on medium screen</h4>
    <div class="d-flex justify-content-md-center bg-warning mb-5">
      <div class="p-2 bg-danger">GOLF</div>
      <div class="p-2 bg-info">CRICKET</div>
      <div class="p-2 bg-secondary">SQUASH</div>
    </div>
    <h4>Centered on large screen</h4>
    <div class="d-flex justify-content-lg-center bg-warning mb-5">
      <div class="p-2 bg-danger">GOLF</div>
      <div class="p-2 bg-info">CRICKET</div>
      <div class="p-2 bg-secondary">SQUASH</div>
    </div>
</div>

</body>
</html>
Updated on: 2020-06-17T12:58:53+05:30

2K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements