0

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?

Hooman Bahreini
  • 14,480
  • 11
  • 70
  • 137

2 Answers2

1

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

The CDNs are on Bootstrap 4.1 page.

Hooman Bahreini
  • 14,480
  • 11
  • 70
  • 137