What is the best way to position a container filled with items, such as products on an e-commerce site, next to a vertical navigation bar?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>grid</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style type="text/css">
        .col {
            border: solid black 1px;
            margin: 10px 20px;
        }

    </style>
</head>
<body>
    <!-- Page Container -->
    <div id="page-wrapper" class="mt-5">
        <navbar>
            <ul>
                <li>
                    <a href="#">Menu item 1</a>
                </li>
                <li>
                    <a href="#">Menu item 1</a>
                </li>
                <li>
                    <a href="#">Menu item 1</a>
                </li>

            </ul>
        </navbar>

        <!-- Products Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column d-inline">
            <div class="container-fluid">
                <div class="row row-cols-3">
                    <div class="col">Product 1</div>
                    <div class="col">Product 2</div>
                    <div class="col">Product 3</div>
                    <div class="col">Product 4</div>
                    <div class="col">Product 5</div>
                    <div class="col">Product 6</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

I am having trouble deciding on the perfect grid layout for my HTML document as I aim to replicate an e-commerce website design. My layout includes a vertical navigation bar on the left side of the page, and I want to display three products per row to the right of this menu (using row-cols-3). Any suggestions on how I can achieve this? (for example, refer to )

htmlcssbootstrap-4grid

Answer №1

You have the option to utilize the ul tag for styling purposes.

<ol>
  <li>
    <div style="float:left">
      1
    </div>
    <div style="float:left">
      2
    </div>
    <div style="float:left">
      3
    </div>
  </li>
  <li>
    <div style="float:left">
      1
    </div>
    <div style="float:left">
      2
    </div>
    <div style="float:left">
      3
    </div>
  </li>
    <li>
    <div style="float:left">
      1
    </div>
    <div style="float:left">
      2
    </div>
    <div style="float:left">
      3
    </div>
  </li>
    <li>
    <div style="float:left">
      1
    </div>
    <div style="float:left">
      2
    </div>
    <div style="float:left">
      3
    </div>
  </li>
    <li>
    <div style="float:left">
      1
    </div>
    <div style="float:left">
      2
    </div>
    <div style="float:left">
      3
    </div>
  </li>
    <li>
    <div style="float:left">
      1
    </div>
    <div style="float:left">
      2
    </div>
    <div style="float:left">
      3
    </div>
  </li>
</ol>

Answer №2

Check out this example showcasing your desired layout that exclusively utilizes native Bootstrap 4 components. Additionally, I've integrated responsive classes to ensure optimal display across different screen sizes.

The Bootstrap documentation thoroughly explains each component used in the example, including:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container my-5">
    <div class="row">
        <div class="col-4 col-md-3 col-lg-2">
            <ul class="nav flex-column">
                // Content of navigation items goes here
            </ul>
        </div>
        <div class="col-8 col-md-9 col-lg-10">
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
                // Content of cards with images and buttons goes here
            </div>
        </div>
    </div>
</div>

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

What is causing my column's content to be lacking padding on the left side and having excessive padding on the right side?

Edit: Here's the link to the codepen https://codepen.io/maptik/pen/bGKMgpJ In my React project, I'm utilizing Bootstrap to display cards for each "Product". Here is a snippet of how I am rendering it: <div className="container bg-color- ...

htmlcssreactjsfrontend

Position the Facebook Like Button in alignment with the counts box

Is it possible to align the Facebook likes count box at the bottom of my Like Button on my website? I'm looking for help with this task. Here is a visual representation of how I want the fb button to be positioned or styled: ...

asp.nethtmlcss

Why doesn't the WebGL Inspector Extension show up in Chrome when using file:// urls?

Following the steps outlined in the documentation on Windows 7: Downloaded and extracted the zip file Used cygwin to run the buildextensions.sh file, which generated the lib and extensions directories Launched Chrome Installed the webgl extension through ...

htmlwebglthree.js

Only the style attribute will support React CSS animations

After developing a component that changes its className based on the state, I discovered that animations only function properly when placed within the "style" attribute. In my Codesandbox project, by uncommenting line 15 in the code snippet provided, the ...

cssreactjs

What is the best way to reset an element to its default state upon clicking a div using jQuery?

I am working on a navigation menu that has a toggle for the drop-down feature. The default state of the toggle is blue, but when the drop-down menu is activated, it turns red. The issue I am facing is that when I click on one of the li items in the menu, ...

javascriptjqueryhtmlcss

Using an if/else statement to detect if the iFrame is devoid of content

I have a customized youtube video section on my website template that can display either an embedded video or an image based on client preference. Currently, I am trying to implement code that will detect if the youtube video source is empty and then displ ...

javascriptjqueryhtmliframe

What is the best way to load my CSS file using express.static?

How do I properly load my CSS file using express.static in Node.js? I have attempted various methods to link my stylesheet to my HTML file through Express, and I'm also interested in learning how to include images, JavaScript, and other assets to crea ...

javascripthtmlcssnode.jsexpress

While working on coding, the background of the Bootstrap 4 navbar seemed to have disappeared

I am a newcomer to Bootstrap, and while trying to make a navbar more responsive for all screen sizes and add some effects, I somehow lost the background color of my navbar. I attempted to explicitly change the color by altering the navbar-light class, but ...

htmlcssbootstrap-4navbar

Utilizing Material UI Grid spacing in ReactJS

I'm encountering an issue with Material UI grid. Whenever I increase the spacing above 0, the Grid does not fit the screen properly and a bottom slider is visible, allowing me to move the page horizontally slightly. Here is the simplified code snippe ...

javascriptcssreactjsmaterial-ui

Using PHP to create a mailto link with a variable that includes a FontAwesome icon

Hi! I'm trying to get this code to check if the ACF variable is empty, and if not, print out HTML code for a globe icon with a mailto link called 'mail'. However, it doesn't seem to be working. Any thoughts on what might be wrong? &l ...

phphtmlwordpressadvanced-custom-fields

Adjust the datepick plugin to display a calendar pop-up when an icon is selected

I have implemented a jQuery calendar plugin called datepick on my website. I have connected the datepicker to my input field using the following code: $('.dobOnly').datepick(); You can see a working example here: jsFiddle Currently, the calen ...

javascriptjqueryhtmldatepicker

Using Slick Slider and Bootstrap CSS to display text on top of images

Currently, I am utilizing the slick slider from and I want to overlay text on top of the image. I tried using bootstrap carousel-caption, which works well with any image. However, with slick slider, it seems like the text is not at the highest level as I ...

javascriptcss

Loading animation reminiscent of a whirlpool, similar to the movement

In my quest for the perfect animation, I have scoured far and wide. Unfortunately, the one I found at http://jsfiddle.net/pedox/yed68/embedded/result/ is created using css, which many browsers do not yet support fully. I also explored , but found it to be ...

javascriptajaxhtmlloader

Setting cards to have the same height in a Vue JS card set

Here is a card component example: <div name="card container" class="flex max-w-[25vw] flex-grow flex-col gap-3 rounded-xl border-2 border-green-600 transition-all duration-500 hover:scale-105" > <div name= ...

cssvue.jsvuejs3tailwind-css

When running Javascript, the code is displayed rather than being executed

I have a current MVC - C# application that generates various "popup" screens containing necessary information. I wanted to apply the same method to create a popup displaying a version history (listing the Versions with their corresponding changes). Howeve ...

javascriptc#cssasp.net-mvcrazor

Is there a way to have a single background image fill the entire screen?

Can someone help me with my Offcanvas navbar created using Bootstrap? I added a background image from Google as the URL, but instead of one whole piece, it's appearing as 6 duplicate images. What could be the issue here? I tried looking for solutions ...

cssbootstrap-5background-image

Trigger a function upon window reload with the click of a single button

$('#start').click(function () { window.location.href=window.location.href; runme(); }); I have a simple goal: whenever the user clicks the start button, I want the page to reload while still executing the custom rume function. Is there a w ...

javascriptjqueryhtmlfrontend

What is the best way to make sure text and emoticons are perfectly aligned on the same

I am currently using image mapping to display emoticons. For example, when I type ':)', it is automatically converted into a gif smiley image. However, the issue I am facing is that the emoticon appears slightly higher than the text. How can I en ...

jquerycsshtml

implementing lazy loading for images within styled components

const UserBackgroundImage = styled.div` background: url(${(props) => props.backgroundImage}) no-repeat center center; } In my styling component, I have utilized a div for displaying background images. However, I am facing a flickering issue while wai ...

javascriptcssreactjsstyled-components

What is the process for incorporating an external CSS file into a React component?

For hours now, I've been trying to figure out how to link an external CSS file to my NavBar.js for my website. Despite several attempts at troubleshooting, I keep encountering the following error: Module not found: Can't resolve './componen ...

cssreactjs