Home > database >  Why is my Bootstrap layout narrower than its container?
Why is my Bootstrap layout narrower than its container?

Time:11-13

I am having problems with a javascript code, as there is an innerHTML and it is giving me a different width than the one I have in my css and bootstrap rules.

This is my javascript code:

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

// let requestURL = 'https://economia.awesomeapi.com.br/json/all/USD-BRL';
// let request = new XMLHttpRequest();

// request.open('GET', requestURL);
// request.send();
// request.onload = function() {
//  let cotacaoDolar = JSON.parse(request.response);
//  let divisaoReais = parseFloat(cotacaoDolar['USD']['ask']);
// }
// codigo acima funciona, entender Promise e then para criar let real

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 = { // fonte: geniusbrasil na pasta
    Spotify: dolar.Spotify*divisaoReais,
    Deezer: dolar.Deezer*divisaoReais,
    Amazon: dolar.Amazon*divisaoReais,
    Apple: dolar.Apple*divisaoReais,
    Ytmusic: dolar.Ytmusic*divisaoReais,
    Tidal: dolar.Tidal*divisaoReais,
    Yt: dolar.Yt*divisaoReais,
};

// let real = {
//  Spotify: 0.00193,
//  Deezer: 0.00195,
//  Amazon: 0.00754,
//  Apple: 0.00546,
//  Ytmusic: 0.006,  // falta verificar esse valor
//  Tidal: 0.00604,
//  Yt: 0.00045,
// };

function calc() {
    if (numeroStreams.value > 0) {
        res.innerHTML = `<div class="row no-gutters" id="stores-container">
                        <div class="col">
                            <div class="row voffset-md">
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="row platforms-spotify voffset-clear-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/spotify_logo.png" class="img-fluid img-protected logo-cal-style mg-sm float-sm-none" alt="spotify_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-7">
                                            <h2 class="cal-store-style mg-clear">
                                                Spotify
                                            </h2>
                                            <p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Spotify).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="row platforms-deezer voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/deezer-logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="deezer_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-7">
                                            <h2 class="cal-store-style mg-clear">
                                                Deezer
                                            </h2>
                                            <p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Deezer).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="row platform-amazon voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/amazon_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="amazon_music_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center stores-cal-info col-lg-7 col-sm-7 col-7">
                                            <h2 class="mg-clear cal-store-style">
                                                Amazon Music
                                            </h2>
                                            <p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Amazon).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row voffset">
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="row platforms-apple voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/apple_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_music_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-7">
                                            <h2 class="mg-clear cal-store-style">
                                                Apple Music
                                            </h2>
                                            <p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Apple).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="row platforms-ytmusic voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/youtube_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_music_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-6">
                                            <h2 class="mg-clear cal-store-style">
                                                Youtube Music
                                            </h2>
                                            <p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Ytmusic).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="row platforms-tidal voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/tidal_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="tidal_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-7">
                                            <h2 class="cal-store-style mg-clear">
                                                Tidal
                                            </h2>
                                            <p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Tidal).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row voffset">
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="row platforms-soundcloud voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/soundcloud-logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="soundcloud_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-7">
                                            <h2 class="mg-clear cal-store-style">
                                                SoundCloud
                                            </h2>
                                            <p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Soundcloud).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="row platforms-tiktok voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/tiktok_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="tiktok_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-7">
                                            <h2 class="cal-store-style mg-clear">
                                                TikTok
                                            </h2>
                                            <p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.TikTok).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="row platforms-youtube voffset-sm">
                                        <div class="col-lg-6 align-self-center col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/youtube_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_logo">
                                            </div>
                                        </div>
                                        <div class="col-lg-6 align-self-center col-sm-7 col-7">
                                            <h2 class="cal-store-style mg-clear">
                                                Youtube
                                            </h2>
                                            <p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Yt).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>`
    } else {
        window.alert('Estimated streams number cannot be blank.')
    }
}

And the end result should look like this:

enter image description here

But instead this is what is happening

![enter image description here

I am leaving you the page where I have implemented this application,

enter image description here

Update: Found a better solution. I saw you're using class row no-gutter 2 times in a row. Delete the first one class row no-gutter as shown in image and you will be good. Also, don't implement my previous solution as this breaks your form width to full-width.

enter image description here

  • Related