The functionality of Bootstrap v5.0 'container-lg' seems to be dysfunctional

I'm currently in the process of creating a webpage with Bootstrap. I've implemented the .container-lg class to ensure that the content spans 100% width when the maximum width is 767px. However, it's not achieving full width on screens narrower than 768px.

Here is an excerpt of my code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module 09 - Panda Ecommerce using Bootstrap</title>
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- My Custom CSS Link -->
    <link rel="stylesheet" href="./style.css">
</head>

<body>
<div class="container-lg">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <img src="./images/logo.png" alt="Panda-ECommerce-Logo">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#home">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#shoes">Shoes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#backpack">Backpack</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact Us</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    
        <!-- Bootstrap JavaScript CDN-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</body>

</html>

Is there a solution to this issue?

How can I achieve 100% width on screens less than 768px?

javascripthtmlcsstwitter-bootstrap

Answer №1

When utilizing Bootstrap, there is a specific CSS style available:

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    width: 100%;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    margin-right: auto;
    margin-left: auto;

If you want to achieve a width of 100%, you will need to eliminate the padding by using padding: 0 within your CSS style. Hopefully, this solution resolves any issues you may have been experiencing.

Answer №2

Resolved the issue using the following SASS code to maintain the padding.

/* Adjustment for bootstrap container */
.container-lg{
  @include media-breakpoint-down(lg){
    width: auto;
  }
}

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 the best way to integrate images into the Shopify source code?

Looking for assistance here. I've been working on my theme in vscode and added a new section that is very simple (just text and an icon). It's working perfectly fine in Shopify cli. But when I tried to implement it on my Live theme, the icons ar ...

htmlcssshopify

Link to toggle a CSS spoiler button

Currently, I have Ajax set up to replace the main div with a link. In addition, there's a spoiler-type navigation that allows you to hide or show the menu. I have my links inserted in this structure and am trying to figure out how to make it so that c ...

htmlcssajax

The scroll function remains unchanged when using overflow-y scroll and border radius

I need help with styling a div that will contain a large amount of text on my webpage. I want to use the overflow-y property for scroll, but the issue arises when trying to style the scroll bar with a radius. Check out this jsfiddle link for reference: ht ...

javascriptjqueryhtmlcss

Error: Incorrect Path for Dynamic Import

Recently, I've been trying to dynamically load locale files based on the locale code provided by Next.js. Unfortunately, every time I attempt a dynamic import, an error surfaces and it seems like the import path is incorrect: Unable to load translatio ...

javascriptreactjstypescriptnext.js

Ways to retrieve parameters in getStaticPaths function?

I'm currently working on a Next.js app with Contentful as the CMS. The file structure relevant to my question is: pages -[category] -[slug].js My goal is to access the category value when a user visits category/slug. Currently, I have the category ...

javascriptnext.js

Programmatically extracting a list of utilized CSS images from IE WebBrowser (IHTMLDocument2)

Exploring the IHTMLStyleSheetsCollection, IHTMLStyleSheet, IHTMLStyleSheetRulesCollection etc. of IHTMLDocument2 to compile a list of all styles in the current document is quite simple. Does anyone have any suggestions on how to generate a list of only th ...

htmlcsstwebbrowser

Navigating the path to enhancing concentration in a specific area of study

After upgrading from Angular 2 to Angular 4, I noticed that the Renderer is now deprecated and we should use Renderer2 according to the documentation. I have been trying to figure out how to call the focus() method with the new Renderer source, but I can& ...

javascriptangulartypescript

Is there a way to ensure that an external file function completes before proceeding with the main code execution?

In my project, I have two key JavaScript files: main.js and load.js. Within load.js, there are two essential functions - getData, which makes an AJAX post call, and constHTML, which appends data based on the JSON array returned from the AJAX call. This app ...

javascriptjquerycarousel

AdminLTE-3 Bootstrap-4 sidebar menu with dynamic AJAX functionality fails to toggle treeview open/hide after page is fully loaded

I am looking to update the sidebar menu dynamically in the adminlte 3 dashboard with bootstrap 4 using AJAX calls. However, I have run into an issue where the menu open/close functionality is not working when the data is loaded dynamically using AJAX. On t ...

javascriptjqueryajaxbootstrap-4adminlte

In Vue firebase, ensure that the prop is only passed down after it has been

I am facing an issue where I need to pass down the Firebase user as a prop from the root component to my child components. I managed to achieve this by passing the user to my router. However, the problem arises when I wrap my new Vue instance in an onAuthS ...

javascriptfirebasefirebase-realtime-databasevue.jsvue-router

Iterate through a large JavaScript object using setTimeout

What is the most efficient way to iterate through large object elements without freezing the browser? I have successfully looped through arrays using setTimeout/setInterval in this manner: var i = 0; var l = arr.length; var interval = window.setInterval( ...

javascriptarraysloopsobject

Can the start and stop times of the typed.js plugin be controlled for typing text?

The typed.js jQuery plugin creates the illusion of text being automatically typed on screen by a robot. Despite researching the resources related to this plugin, I have not come across any information on how to control the starting and stopping of the typi ...

javascriptjqueryhtmlcssautomation

AngularJS continues to display an "Invalid Request" message whenever the requested resource is unavailable

When I try to fetch a group of images through AJAX and exhibit them on the page using ng-repeat, an issue arises with the image source tags. These tags send incorrect requests to the server before the collection is retrieved, leading to error messages in t ...

javascriptangularjsplayframework-2.0

Processing JSON data from an array in PHP

Currently, my code involves utilizing an AJAX request to retrieve data from a database dynamically. The data received is processed by the PHP function json_encode() before being sent back to AJAX. Upon receiving the data through the AJAX request, it is for ...

javascriptphpjqueryjsonajax

What is the best way to iterate through a designated key in every object within a JSON dataset and store it in a variable called `data` for use with

I am looking to create a line chart displaying stock prices, utilizing JSON data to populate the chart. Let's say I have some JSON data: [ { "close": 116.59, "high": 117.49, "low": 116.22, "open& ...

javascriptjsonchart.js

The process of executing asynchronous operations and then triggering the onResult function

Fiddle: http://jsfiddle.net/smartdev101/eLxxpjp3/ In the asyncAction function, a promise is created to sequence two asynchronous operations - getRecords and getTotal. This is followed by a final call to onResult(data) upon success or onFail(info) in case ...

javascriptnode.jspromiseq

Tips for organizing the contents of nested items in alignment

Here's a layout I've created, you can view it on CodePen. .parent { display: flex; justify-content: space-between; } .left { flex-grow: 1; flex-basis: 0; background-color: blue; } .right { background-color: red; flex-grow ...

htmlcss

Testing a React component that uses useParams: A step-by-step guide

I've been working on creating a BBS App using TypeScript, React, React Router, and React Testing Library. However, I've encountered an issue where a component utilizing useParams is not passing a test. Interestingly, it seems to be working correc ...

javascriptreactjstypescriptreact-routerreact-testing-library

Effortlessly glide to a specific element on an HTML page

I am working with XML data that contains a lot of Test information. I am using XSLT to display this data as HTML in a web browser. Each test includes a table with the test steps, and every time a test is executed, the table updates to show whether each s ...

javahtmlxmlxslt

Struggling to align an image perfectly within a Bootstrap row

Need help centering an image vertically and horizontally in my code. I've tried various methods found online, including using img-fluid, img-thumbnail, and my-auto classes. Setting margin: 10% works fine, but auto does not work as expected. <div c ...

htmlcssbootstrap-4