CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Hooman Bahreini
Hooman Bahreini

Reputation: 15569

flex-grow-1 not working in some versions of bootstrap

flex-grow-1 is working with if use bootstrap 4.1.3 copied from w3school sample

<head>
  <!-- flex-grow-1 is working with these libraries -->
  <!------------------------------------------------->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container mt-3">
    <div class="d-flex mb-3">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 flex-grow-1 bg-primary">Flex item 2</div>
    </div>
  </div>
</body>

But if I used bootstrap 4.0.0 CDNs that are provided in Bootstrap 4 official page, then flex-grow-1 class does not work - seems that the class not exists:

<head>
  <!-- flex-grow-1 is not working with these libraries -->
  <!----------------------------------------------------->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container mt-3">
    <div class="d-flex mb-3">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 flex-grow-1 bg-primary">Flex item 2</div>
    </div>
  </div>
</body>

Questions:

  1. Is this a bug? Or am I making a mistake?

  2. The reason I am reluctant to use Bootstrap version 4.1.3 CDN is that they don't have the integrity and crossorigin security fields. Is there any CDN for version 4.1.3 which does have these security fields?

Upvotes: 0

Views: 3454

Answers (2)

Hooman Bahreini
Hooman Bahreini

Reputation: 15569

The CDNs are on Bootstrap 4.1 page.

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362660

This is not a bug. As you can see here the .flex-fill, .flex-grow-*, and .flex-shrink-* utilities weren't added until Bootstrap 4.1.

Related:
Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow
Bootstrap 4 - Sticky footer - Dynamic footer height

Upvotes: 2

Related Questions