Create a full-screen layout with a Bootstrap 5 column grid and a sleek navbar

Can you help me modify this design using Bootstrap rules while keeping the original CSS files intact? I need to make these 5 cards (columns) full width with a navbar.

Issue 1: I always see a vertical scroll bar on desktop.

Issue 2: The Navbar doesn't have the same width as the 5 columns. It should be similar in width, even if not exact.

Issue 3: All 5 cards are touching each other. Please add some pixel space between the cards.

Issue 4: The layout should display as full-screen across most resolutions without any vertical scrolls. If it's a smaller resolution, it can switch to 2 or 1 column. However, at resolutions like 1500px or 1200px, it should remain in 5 columns and occupy the full screen without any vertical or horizontal scrolling. Thank you for your assistance.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>q</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b2e35293529">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5878a8a919691978495a5d0cbd7cbd7">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  <div class="row d-flex justify-content-center">
    <div class="col-lg-2 col-md-6 card" align="center">
      <a href="#1"><img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Alice_%28apple%29.jpg" class="card-img-top img-fluid" alt=" " /></a>
      <div class="card-body">
        <p class="card-text" align="center"><a href="#2" class="btn btn-primary">apple</a> </p>
      </div>
    </div>
    <div class="col-lg-2 col-md-6 card" align="center">
      <a href="#1"><img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Alice_%28apple%29.jpg" class="card-img-top img-fluid" alt=" " /></a>
      <div class="card-body">
        <p class="card-text" align="center"><a href="#2" class="btn btn-primary">apple</a> </p>
      </div>
    </div>
    <div class="col-lg-2 col-md-6 card" align="center">
      <a href="#1"><img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Alice_%28apple%29.jpg" class="card-img-top img-fluid" alt=" " /></a>
      <div class="card-body">
        <p class="card-text" align="center"><a href="#2" class="btn btn-primary">apple</a> </p>
      </div>
    </div>
    <div class="col-lg-2 col-md-6 card" align="center">
      <a href="#1"><img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Alice_%28apple%29.jpg" class="card-img-top img-fluid" alt=" " /></a>
      <div class="card-body"
csstwitter-bootstrapresponsive-designbootstrap-5fullscreen

Answer №1

  1. If you're looking for a horizontal scroll bar, make sure to include a container element around the rows as shown in the Bootstrap Grid documentation.

  2. Your cards may not be taking up full width because you're only utilizing 10 out of the 12 columns available. Consider using Bootstrap's flexbox classes instead of the traditional row and column layout if needed.

  3. For better organization, avoid mixing your grid structure with your content. Place the cards inside the columns which already have default spacing or "gutters."

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>q</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e0ededf6f1f6f0e3f2c2b7acb0acb0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424514a564a56">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

  <div class="container-fluid">
    <div class="row d-flex justify-content-center">
      <div class="col">
        <div class="card" align="center">
          <a href="#1"><img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Alice_%28apple%29.jpg" class="card-img-top img-fluid" alt=" " /></a>
          <div class="card-body">
            <p class="card-text" align="center"><a href="#2" class="btn btn-primary">apple</a> </p>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card" align="center">
          <a href="#1"><img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Alice_%28apple%29.jpg" class="card-img-top img-fluid" alt=" " /></a>
          <div class="card-body">
            <p class="card-text" align="center"><a href="#2" class="btn btn-primary">apple</a> </p>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card" align="center">
          <a href="#1"><img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Alice_%28apple%29.jpg" class="card-img-top img-fluid" alt=" " /></a>
          <div class="card-body">
            <p class="card-text" align="center"><a href="#2" class="btn btn-primary">apple</a> </p>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card" align="center">
          <a href="#1"><img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Alice_%28apple%29.jpg" class="card-img-top img-fluid" alt=" " /></a>
          <div class="card-body">
            <p class="card-text" align="center"><a href="#2" class="btn btn-primary">apple</a> </p>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card" align="center">
          <a href="#1"><img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Alice_%28apple%29.jpg" class="card-img-top img-fluid" alt=" " /></a>
          <div class="card-body">
            <p class="card-text" align="center"><a href="#2" class="btn btn-primary">apple</a> </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <nav class="navbar bg-light">
    <div class="container-fluid"> <a class="navbar-brand">Navbar</a>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </nav>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is left padding appearing mysteriously (supernatural CSS phenomenon)?

While using the Firebug inspector tool, if you hover over #jimgMenu ul, you may notice that it has left padding without any corresponding CSS rule: Where is this mysterious left padding coming from? Why is the origin not visible? EDIT: If you navigate t ...

jquerycss

Arranging particular placement

How can I position my links to the right of the second photo (opus1) and slightly below the first photo (coverPhoto)? I've tried various methods but haven't found a simple solution yet. <!DOCTYPE html> <html lang="en"> <head ...

htmlcss

What is the best way to avoid adding duplicate HTML content to Bootstrap modal divs using jQuery?

In my project, I wanted to create a functionality where clicking on an image would trigger a modal box to pop up with additional content added once. However, I encountered two issues that I'm currently facing. Firstly, the header text that I intended ...

javascriptjqueryhtmlcsstwitter-bootstrap

The bootstrap navigation bar appears in a vertical orientation rather than the expected horizontal

My page is displaying the navbar vertically instead of horizontally. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to ...

htmlcssbootstrap-4twitter-bootstrap-4

HTML and CSS: Aligning Text on the Left and Image on the Right - A Guide to Positioning Elements

Just starting out with HTML and CSS, I've run into some issues while writing my code. My goal is to have Text (on the left middle part) and image (on the right middle part) displayed side by side A responsive design that stacks the text on top of t ...

htmlcssresponsive

What methods can you use to locate the CSS selector within HTML that meets certain criteria?

Is it possible to parse a given link and find CSS selectors with attributes that partially or completely match a specific keyword? For example, if the keyword is "print," I want to identify all CSS selectors in the link containing "print" in their name, id ...

javascriptpythoncssparsinghtml-parsing

Tips for arranging links in a vertical layout on a navigation bar that is compatible with every device

I'm having trouble aligning the links vertically in the center of the navigation bar, with the logo overlapping the content. Check out the HTML code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

htmlcssfrontendbootstrap-5

The chosen color for the link button in CSS

PHP CODE : $getOID=$_GET["id"]; for($i=$getOID-($getOID-1); $i<=5;$i++){ echo '<a class="current" href="postlogin.php?id='.$i.'">'.$i.'</a>'; } CSS STYLING FOR BUTTONS : .pagging { height:20px; ...

cssbuttonhyperlinkselected

Display a series of elements in rows using styled-components

Here is a simple array that I need help rendering into a grid structure. Currently, the array is displayed like this: HAMDDN I want each element to be on a new row like so: HA MD DN Any suggestions on how to achieve this? Below is the full code. I am ...

javascriptcssreactjsstyled-components

degree of transparency when semi-transparent elements overlap

Imagine you have two <div> elements, one with an opacity of .5 and another overlaying it with the same opacity. What would be the combined opacity of the two? Interestingly, it's not as simple as, .5 × .5 or even, .5 + .5 How can this ...

htmlcssmathtransparency

Struggling to display the inline navbar

For the past few hours (a little over 3 hours, to be exact), I've been grappling with an issue that seems fairly simple. Despite scouring through various SO posts and other resources, I just can't seem to figure out the problem. The crux of the ...

cssruby-on-railshtml

Steps for appending a string to a variable

Currently working on creating a price configurator for a new lighting system within homes using Angular 7. Instead of using TypeScript and sass, I'm coding it in plain JavaScript. Page 1: The user will choose between a new building or an existing one ...

javascripthtmlcssangulartypescript

Steps to designing an Arrow with styled-components

I am currently working on customizing my orange arrow to resemble the pink arrow, but I want to achieve this without relying on an external CSS library like bulma. The reason the pink arrow looks different is because it utilizes the bulma library in its st ...

cssnext.jsstyled-components

Having trouble with the ::after element in my React component for my latest React 3D portfolio project

For my portfolio project, I am following a tutorial by LamaDev (https://www.youtube.com/watch?v=qALsVa-V9qo&t=2334s&ab_channel=LamaDev). At around timestamp 36:40, he creates a ::after selector which is not working for me, even though the rest of t ...

javascriptcssreactjsthree.jsmern

Is the Foundation Orbit image slider experiencing technical difficulties?

Hey there, I've been experimenting with Foundations Orbit media container to create an autoplay image slider using HTML and CSS. While I'm more comfortable with HTML/CSS than JavaScript, I have struggled to find a simple and cost-effective soluti ...

htmlcsszurb-foundation

Strange outcomes observed with CSS Selector nth-child

When utilizing the CSS nth-child selector, I am encountering some peculiar issues. The HTML structure is as follows: <div class="block feature-callout-c" id="overview"> <div class="row"> <div class="span twelve"> ...

htmlcsscss-selectors

Struggling to properly center the footer on my Django template

I'm currently facing an issue when attempting to align my footer in the center of my Django template. The specific class for the footer is Pagination. Base HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict ...

htmlcssdjangosticky-footer

Certain rows in the table should maintain a consistent width, while others are allowed to vary

I am dealing with a table containing certain rows Some of these rows are visible, while others are hidden. The visible rows at the start are referred to as: mainTrs. Clicking on a visible row will make all rows with a class matching its id visible. Cli ...

javascriptjquerycsshtml-table

Strange behavior observed with CSS intellisense in Visual Code

While working on a ReactJS project, I noticed that when I opt for the style Jsx Attribute for inline CSS, . CSS intellisense seems to not work or only work after I manually add some fields. However, if I manually type the style attribute without using t ...

cssreactjsvisual-studio-codeintellisense

Can a different div or HTML element be used in place of the text "Hello World"?

<body onload="myfunction('target')"><div id="target"> "Hey there!" </div></body> Can we replace the text "Hey there!" with another HTML element or div? This is currently a left-to-right marquee text. <script language= ...

javascriptjqueryhtmlcss