CSS grid-box experiencing issues due to interference from bootstrap styling

Question

CSS grid-box experiencing issues due to interference from bootstrap styling

When attempting to create a grid, I noticed that the first image element is not showing up in the first position as expected. Instead, it appears in the second position, leaving the first spot blank. After inspecting the issue, I realized that the styles from the bootstrap link

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

are causing my grid-box to malfunction. If I remove the bootstrap link, my navbar ceases to function.

If you'd like to review the code, you can find it here: Jsfiddle link

Any suggestions for fixing this issue would be greatly appreciated. Thank you for your help.

html css twitter-bootstrap bootstrap-4 grid

Answer 1

Answer №1

When using bootstrap 3, the use of float requires the use of pseudo elements to clear floats.

To clear floats in

.container:before{display:table;content:" "}

, a pseudo element is inserted to fill up the first cell and reset the order to place it last. https://jsfiddle.net/nhak72r1/

/* Update for fixing */

.container::before {
  display: none;  /* hide for now */
  order: 1;  /* set it as last; if order is used for other elements, set the highest value */
}

/* End of Update */

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(4, auto);
  grid-gap: 5px;
  align-items: center;
}

.container > img {
  width: 100%;
  border-radius: 20px;
}

.container > img:nth-child(6) {
  grid-row: span 2;
  grid-column: span 2;
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Chairs</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Karla:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="styling.css">
</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid" id="head">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
        <a class="navbar-brand" id="brand-name" href="3">Chairs<span id="dot">.</span></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class=""><a href="#">Home</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">News<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">What's New?</a></li>
              <li><a href="#">Updates</a></li>
              <li><a href="#">New Discounts</a></li>
            </ul>
          </li>
          <li><a href="#">Features</a></li>
          <li><a href="#">Shop</a></li>
          <li><a href="#">News</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <img src="https://i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46.jpg">
    <img src="https://i.pinimg.com/564x/e1/82/25/e1822536694c06c60d0df0897d7117e5.jpg">
    <img src="https://i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46.jpg">
    <img src="https://i.pinimg.com/564x/e1/82/25/e1822536694c06c60d0df0897d7117e5.jpg">
    <img src="https://i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46.jpg">
    <img src="https://i.pinimg.com/564x/e1/82/25/e1822536694c06c60d0df0897d7117e5.jpg">
    <img src="https://i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46.jpg">
    <img src="https://i.pinimg.com/564x/e1/82/25/e1822536694c06c60d0df0897d7117e5.jpg">
    <img src="https://i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46.jpg">


  </div>
</body>

</html>

Answer 2

When using bootstrap 3, the use of float requires the use of pseudo elements to clear floats.

To clear floats in

.container:before{display:table;content:" "}

, a pseudo element is inserted to fill up the first cell and reset the order to place it last. https://jsfiddle.net/nhak72r1/

/* Update for fixing */

.container::before {
  display: none;  /* hide for now */
  order: 1;  /* set it as last; if order is used for other elements, set the highest value */
}

/* End of Update */

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(4, auto);
  grid-gap: 5px;
  align-items: center;
}

.container > img {
  width: 100%;
  border-radius: 20px;
}

.container > img:nth-child(6) {
  grid-row: span 2;
  grid-column: span 2;
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Chairs</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Karla:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="styling.css">
</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid" id="head">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
        <a class="navbar-brand" id="brand-name" href="3">Chairs<span id="dot">.</span></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class=""><a href="#">Home</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">News<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">What's New?</a></li>
              <li><a href="#">Updates</a></li>
              <li><a href="#">New Discounts</a></li>
            </ul>
          </li>
          <li><a href="#">Features</a></li>
          <li><a href="#">Shop</a></li>
          <li><a href="#">News</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <img src="https://i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46.jpg">
    <img src="https://i.pinimg.com/564x/e1/82/25/e1822536694c06c60d0df0897d7117e5.jpg">
    <img src="https://i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46.jpg">
    <img src="https://i.pinimg.com/564x/e1/82/25/e1822536694c06c60d0df0897d7117e5.jpg">
    <img src="https://i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46.jpg">
    <img src="https://i.pinimg.com/564x/e1/82/25/e1822536694c06c60d0df0897d7117e5.jpg">
    <img src="https://i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46.jpg">
    <img src="https://i.pinimg.com/564x/e1/82/25/e1822536694c06c60d0df0897d7117e5.jpg">
    <img src="https://i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46.jpg">


  </div>
</body>

</html>

CSS grid-box experiencing issues due to interference from bootstrap styling

Answer №1

Similar questions

script to pause video using jQuery

Enhance Your Website with HTML and JavaScript

How can we eliminate the modal-open class in Angular when transitioning to a different URL?

Dropdown trigger changing image with AJAX

Python: encountered an issue when attempting to retrieve the complete text within every <span> tag using BeautifulSoup

A guide to retrieving all image URLs when a checkbox is selected using Javascript

Tips for incorporating error messages based on specific errors in HTML

Excessive content within the div element causing overflow

Creating an animated Gif using HTML and CSS styling

Tips for showing an inline <span> within <div> elements

What is the best way to attach an event listener to detect the coordinates where a click occurs inside a div element?

Adjusting the width of input textboxes for alignment

Deleting content from cells in table for all even td items

Differences in disabled option value selection between jQuery legacy and updated versions

How can we consolidate an excess of menu items into a condensed, collapsed menu?

How to Transform a Navigation Bar into a Carousel

Using CSS Zoom / Transform with the iframe Tag in HTML

Creating a CSS animation to repeat at regular intervals of time

Is there a way to horizontally navigate a pallet using Next and Prev buttons?

Steer clear of altering line spacing in CSS