Arranging Html Bootstrap Columns in a vertical stacking layout instead of being displayed next

Hey there, I've been encountering an issue where my columns are stacking on top of each other instead of being positioned side by side. Take a look at this screenshot of my page: The content above the shopping cart should ideally be aligned to the right of the main page content, resembling a sidebar. I've been facing some difficulties getting that layout working. https://i.sstatic.net/3vU2V.png

Below is the HTML code I'm using:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-9 col-md-6 col-lg-8">
            <app-grocery-sidebar></app-grocery-sidebar>
        </div>
        <div class="col-sm-9 col-md-6 col-lg-8">
            <recipes></recipes>
        </div>
    </div>
   
</div>
htmlcssangularbootstrap-4

Answer №1

The grid system in Bootstrap is designed with 12 columns per row. In cases where the total number of columns exceeds 12, the extra columns will wrap onto the next row.

Let's consider an example: for small screens, you are using 2 instances of col-sm-9, resulting in a total of 18 columns. However, for medium screens, you have 2 instances of col-md-6, which adds up to 12 columns and ensures equal widths for each column at that size. On large screens, 2 instances of col-lg-8 amount to 16 columns.

To determine the percentage of screen space your sidebar should occupy on large screens, make a choice. For instance, if it should take up 25% of the screen, assign col-lg-3 to the sidebar and col-lg-9 to the main content. To maintain this ratio across all screens, use col-3 and col-9 respectively.

For a sidebar taking up 33% of the screen, opt for col-lg-4 and col-lg-8. Conversely, employing col-lg-2 and col-lg-10 would result in 16.6% for the sidebar and 83.3% for the rest.

Using col-md-6 on both elements ensures equal width distribution on medium screens. If equal spacing is desired for all columns, simply apply the col class to each element.

For further details, refer to Bootstrap documentation on their Grid system.

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

When Angular site consumes a URL with parameters including an email hyperlink, the email address is being automatically rendered in lowercase

Hey there! I am currently working on a project that involves dotnetcore2 and angular. As part of the process, I am using Core functions like UserManager to generate a token called GeneratePasswordResetTokenAsync(). This token is then sent to the user via ...

angular.net-coretokenquery-string

Tips for including HTML in a JSON request in ReactJS

Upon sending the request as shown below, the response was successfully received. { "contractId": "siva8978", "html": "<p>PREFERENCE SHAREHOLDER AGREEMENTTHIS AGREEMENT is made on the&nbsp;$$Contract Start Date$$ BETWEEN&nbsp;CRADLE WEALTH ...

javascripthtmljsonreactjs

Setting a custom background image in a Bootstrap modal

When users visit my website, I want to enhance their experience by using a background image in my bootstrap modal. Despite several attempts, I have been unable to successfully set a background image in the modal. Can anyone provide guidance on this matter? ...

javascripthtmlcsstwitter-bootstrap

Enable and disable modal popup functionality in ng-bootstrap for Angular 5

How do I enable (editable) and disable (not editable) an ng-bootstrap modal popup? I have the following HTML code to display a modal popup when a button is clicked. However, I want it to be inactive until a certain condition is met. I am unsure of how to ...

angularhtmlng-bootstrap

Can someone explain the method for displaying or concealing a menu based on scrolling direction?

https://i.stack.imgur.com/tpDx0.jpg I want to hide this menu when scrolling down and show it when scrolling up. The code for my menu bot is: <script> var previousScroll = 0; $(window).scroll(function(event){ v ...

javascriptjqueryhtmlcss

What are some ways to create a responsive image design?

Currently, I am using the code below to enlarge an image when clicked on. I have attempted using media queries in CSS... I have also added another class in #modalPopupHtml# to adjust the size of the large image: .imgsize{ height: 600px; width: 800px; ...

javascriptjquerycssresponsive-designresponsive

Get rid of the white line in the Navbar-toggler when it expands

I'm trying to get rid of an odd white line that keeps appearing at the bottom of my header's navbar. The navbar has a dark background, but whenever I click on the toggler button, this strange white line shows up at the bottom. You can view my we ...

htmlcssbootstrap-4navbar

Retrieve data from a URL using Angular 6's HTTP POST method

UPDATE: Replaced res.json(data) with res.send(data) I am currently working on a web application using Angular 6 and NodeJS. My goal is to download a file through an HTTP POST request. The process involves sending a request to the server by calling a func ...

javascriptnode.jsangulartypescriptmean-stack

Retrieving the value of a formControl within a formArray is made possible through a reactive form in

How can I retrieve the value of ItemName in my HTML code? When I attempt to use {{invoiceForm.controls[i].items.controls.itemName.value | json}}, it returns as undefined. <form [formGroup]="invoiceForm"> <div formArrayName="items" *ngFor="let ...

javascripthtmlangularangular-reactive-forms

Looking for assistance with designing a responsive login box

Greetings! I'm a beginner in programming, so please excuse me if my issue seems simple. I have a website with a login form, but I am struggling to make it responsive. Every time I attempt to do so, the entire layout gets messed up. Could someone kin ...

javascripthtmlcssresponsive-designresponsive

Steps for inserting telephone numbers from a database into an <a href="tel:"> tag

<a href="tel:<?php echo $b2b_mec_num; ?>"><button type="button" class="btn" id="CallBtn">&nbsp;CALL</button></a> I am looking to dynamically add phone numbers from a database to the anchor tag provided in the code snippet ...

javascriptphphtml

Error Message: Angular 5 - Unable to bind to 'ngModel' as it is not recognized as a valid property of 'input'

I am currently working on an Angular 5 online tutorial using Visual Studio Code and have the following versions: Angular CLI: 7.0.6 Node: 10.7.0 Angular: 7.0.4, Despite not encountering any errors in Visual Studio Code, I am receiving an error in ...

angulartypescriptangular5two-way-binding

Close the popover when clicked elsewhere

My code for creating a popover in HTML is shown below: <a data-placement="bottom" style="float:right;margin-right:20px;" id="new-quote-popover" popover><img src="img/user.png"/>&nbsp;<b>{{UserName}}</b> <div id="popover- ...

javascripthtmlangularjstwitter-bootstrap

Transferring User Information from PHP/HTML to AngularJS

As a beginner in AngularJS, I am still navigating my way through its functionalities. One question that I couldn't find an answer to on this platform relates to building a conventional HTML/PHP list website where data, such as a list ID, is passed fro ...

phpjqueryhtmlangularjsget

Sideways and alternative directional scrolling

I need assistance achieving a horizontal scroll with the main content centered in a div, while having links that move left and right. <div id="left"> Scrolls left </div> <div id="home"> Opens on this </div> <div id="right"> ...

javascriptjquerycssscroll

Revamp the md-select Container

Hello there! I'm looking for a stylish way to revamp the design of the md-select Window. Specifically, I aim to customize the background and hover effects. Despite my attempts to modify the .md-select-menu-container in CSS, it proved unsuccessful. I ...

cssangularjsangular-material

How does selecting one dropdown option within a dynamic form field lead to the automatic activation of another dropdown list in a separate form field?

My goal is to create a dynamic form field with a dropdown list that allows users to add and delete multiple contributors. Currently, my code can successfully add and remove multiple users. However, I encounter an issue where selecting the dropdown list tri ...

javascripthtmlangulartypescriptangular-reactive-forms

Choose the text value of the jQuery select menu from the specified column in the table

I need to search through all the select elements in a specific table column with the id "tdcities". I want to compare their ids with the row id and if there is a match, I need to select the text value. Below is the code I am currently using: $("#tdcities ...

javascriptjqueryhtml

Displaying HTML content in UITableViewCell on iOS

Can anyone assist me with rendering HTML content containing images and text in different cells of a UITableView? My data source consists of HTML content that needs to be displayed on UITableViewCells. I have attempted using Attributed strings on UILabel a ...

htmliosswiftrendering

Highlighting a Table Column with a Radio Button

I am struggling with controlling the highlight of a table using only radio buttons. When I try to change the selector to input:radio, it doesn't work as expected. It seems to only work with the selector provided in my code snippet. $("th").on("clic ...

javascripthtmlcss