What could be the reason that my Bootstrap design is displaying narrower than the designated container?

Having some issues with a JavaScript code that involves innerHTML, causing a discrepancy in width compared to the CSS and Bootstrap rules I have set up.

Below is the JavaScript code snippet:

let numeroStreams = document.getElementById('num')
let resultado = document.getElementById('res')

// Some commented out lines of code here...

let dolar = {
    Spotify: 0.00437,
    Deezer: 0.0064,
    Amazon: 0.00402,
    Apple: 0.00783,
    Ytmusic: 0.008,
    Tidal: 0.01284,
    Yt: 0.00087,
};

let divisaoReais = 5.37;

let real = {...}; // Code regarding 'real' variables are omitted for brevity

function calc() {
    if (numeroStreams.value > 0) {
        res.innerHTML = `<div class="row no-gutters">
                        ... // Nested HTML structure output based on calculations
                        </div>`
    } else {
        window.alert('Estimated streams number cannot be blank.')
    }
}

The expected result image can be seen https://i.sstatic.net/h90pk.jpg.

However, the actual output image looks like this: https://i.sstatic.net/4S3WM.jpg.

To see the functionality in action please visit:

Your assistance in resolving this issue would be greatly appreciated. Thank you!

Answer №1

Focus on the class you've assigned to your .form-group, not just the HTML generated by JS.

To improve, switch out the highlighted class from

col-lg-4 offset-lg-4 col-md-4 offset-md-4
with col-md-12.

https://i.sstatic.net/U1hBC.png

Update: Discovered a more efficient solution. Noticed that you're using the class row no-gutter twice consecutively. Remove the first instance of row no-gutter as depicted in the image for better results. Avoid implementing my initial suggestion, as it will cause your form width to expand uncontrollably.

https://i.sstatic.net/6GZPF.png

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

JavaScript and modifying the attributes of the nth child

I'm working on a navigation bar that changes the "background-image" of menu items using the nth-of-type CSS selector. Now, I need to figure out how to dynamically change the picture of the "background-image" when hovering over a specific menu item usi ...

Encountering an issue while updating information following the migration to vue-chartjs 4

I recently upgraded from vue-chartjs version 3 to version 4. I successfully migrated my LineChart component by updating the template section and removing the draw method calls. This component is utilized for two separate charts. However, when I close the ...

Guide to displaying a task within a table cell after a user submits the form

<?php $servername = "localhost"; $username = "u749668864_PandaHost"; $password = "Effy1234"; $dbname = "u749668864_PandaHost"; $q = $_REQUEST["task"]; $task = $q; echo $task; $conn->close(); ?> Exploring the world of ajax has left me scratching ...

Implementing a watermark image on every page in CodeIgniter: Step-by-step guide

Is there a way to add a watermark image to all PHP pages that remains fixed at the center? <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/wstyle.css"> This is what's in the wstyle.css file: body { ba ...

Strategies for deploying on production as you develop a fresh Nuxt application

What are some recommended strategies for deploying a Vue/Nuxt project on production, especially for larger applications with lengthy build times? Typically, running the command npm run build Causes the app to be inaccessible to users until the build proc ...

The password prompt window refuses to align with the center of the screen. This

I've been struggling to position the Javascript popup notification using the width, height, top, and left parameters in the window.open function. No matter what I attempt, it stubbornly remains in the top-left corner. Can someone offer some guidance o ...

Step-by-step guide to implementing a floating action button on the bottom-right corner of a screen using Material-UI in a React application

I have been attempting to place the FloatingActionButton on the bottom right corner of the screen. To achieve this, I am utilizing the following library: http://www.material-ui.com/#/components/floating-action-button import React, { Component } from "reac ...

The continuous firing of the postback event of the Asp.Net Button is

Why does the postback event keep firing for my button? Strangely, when I try to debug with Firebug and set a break point on the function(e) part, the code seems to skip right over it. Even using return false doesn't seem to resolve the issue. <sc ...

The yarn installation process is not utilizing the latest available version

Working with a custom React component library my-ui hosted on a personal GitLab instance. In the package.json, I include the library like this: "my-ui": "git+ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6 ...

I never rely on the browser back button, I prefer to remain on the same page

Being new to Angular, I have come across the following code snippet: HTML template: <a href="" ng-click="goToCategories();">See categories</a> JS File: $scope.goToCategories= function () { CategoriesService.getCateg ...

Is there a way to handle specific email format designs with PHP?

When trying to send an email with specific shipping information and tracking numbers, the formatting appears strange. Here is the desired format: Dear xyz , Per your request, this email is to no ...

Highcharts JS encountered an error: x[(intermediate value)(intermediate value)(intermediate value)] is not a valid constructor

I'm in the process of creating a bar chart by fetching options from an ajax response. However, I encountered an error when passing the object to the highcharts constructor. Uncaught TypeError: x[(intermediate value)(intermediate value)(intermediate v ...

Steps to automatically navigate to a specific Div upon page initialization

Can someone help me understand why my code is scrolling to a div and then returning back to the top of the page? $("#Qtags").click(function(){ $('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top}, ...

Tips for generating an ordered list that begins with 01

Currently, I am developing a Ruby on Rails application in which I am iterating over the tuto. .container .row .col-xs-12.col-sm-12 h1.text-gray Tutorials br .col-xs-10.col-sm-5.index-background - @tut ...

Problem with BeautifulSoup table parsing

I've been trying to create a table with expenses, amounts, and actions, but I'm having trouble with the alignment. I attempted to adjust it by changing the width, but that didn't solve the issue. Can someone point out what I'm doing wro ...

utilizing different background colors for rows in a Laravel table using CSS

Is there a way to implement alternate row coloring in a Laravel table using CSS? I want to have different colors for every other row. I have applied the "gridview" CSS class to the table. Specifically, I want to use the .gridview tr.even td selector for th ...

Having trouble setting $scope after redirecting to a partial template via routing

Looking to create a website that loads all necessary templates upon the initial visit. Currently, I only have one partial template but plan to add more in the future. Despite having just this one template, I'm struggling with binding the data from my ...

An interactive top navigation bar paired with three dynamic columns housing scrollable content, all crafted seamlessly with Bootstrap 4

I recently updated my layout using bootstrap but I am facing a glitch. I want the layout to have fixed scrolling only within the columns, without affecting the entire page. Everything works fine until I add some text inside any of the columns, then the who ...

The Node.js Express server does not provide access to certain static files

I am currently utilizing the angularjs-gulp-browserify-boilerplate for my development environment on Windows 10. Once I run gulp in dev mode, static files are moved to the build directory: ./build |_js |_css |_img |_fonts |_lang In additio ...

Separate modules in the Webpack.mix.js file don't produce any output files in the public folder

I've recently been tackling a Laravel project with an extensive webpack.mix.js file residing in the root directory, boasting nearly 5000 lines of code. In an effort to enhance organization and maintainability, I've opted to break it down into ind ...