The Bootstrap container is extending beyond the boundaries of the page view

Since I'm not a CSS enthusiast, I opted to incorporate Bootstrap into my small project. However, I've encountered an issue where one of the containers is extending beyond the page view, and I can't seem to figure out why.

<!-- STYLE -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa8a5a5beb9beb8abba8affe4f9e4fae7aba6baa2abfb">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<nav class="navbar bg-primary">
  <div class="container text-white justify-content-center">
    <h1>Weather Dashboard</h1>
  </div>
</nav>

<main class="">
  <div class="row">
    <div class="col-sm-3 bg-secondary">
      <!-- SIDE BAR ?-->
      <div class="row">
        <!-- side bar first row -->
        <div class="container">
          <h4>Search for a City:</h4>
          <form>
            <div class="form-group">
              <input type="text" class="form-control" id="city-name-search" placeholder="Enter city name...">
            </div>
            <button type="submit" class="btn btn-primary w-100">Submit</button>
          </form>
        </div>
      </div>

      <div class="row">
        <!-- side bar second row -->
        <div class="container-fluid">
          two
        </div>
      </div>
    </div>

    <div class="bg-danger col-9">
      <!-- MAIN CONTENT -->
      <div class="row">
        <div class="container-fluid lh-1 border border-dark">
          <h2>City name (dd/mm/yyy)</h2>
          <p>Temp:</p>
          <p>Wind:</p>
          <p>Humidity:</p>
        </div>
      </div>

      <div class="row">
        <div class="container-fluid">
          <h3>5-Day Forecast</h3>
        </div>
      </div>
    </div>
  </div>

</main>

<!-- SCRIPTS -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7e7373686f686e7d6c5c29322f322c317d706c747d2d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Here's a visual representation of the issue:

https://i.sstatic.net/2rcg3.png

Despite trying different margin and padding settings, I still haven't achieved the desired result. My searches on Google have also been fruitless in finding a solution.

On another note, does anyone know why 'btn-block' isn't working for me? I had to resort to using 'w-100' instead.

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

In Bootstrap, containers must contain rows:

Containers are a fundamental component in Bootstrap and are necessary when utilizing our default grid system.

<!-- STYLE -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="177578786364636576675722392439273a767b677f7626">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<nav class="navbar bg-primary">
  <div class="container text-white justify-content-center">
    <h1>Weather Dashboard</h1>
  </div>
</nav>

<main class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-secondary">
      <!-- SIDE BAR ?-->
      <div class="row">
        <!-- side bar first row -->
        <div class="container">
          <h4>Search for a City:</h4>
          <form>
            <div class="form-group">
              <input type="text" class="form-control" id="city-name-search" placeholder="Enter city name...">
            </div>
            <button type="submit" class="btn btn-primary w-100">Submit</button>
          </form>
        </div>
      </div>

      <div class="row">
        <!-- side bar second row -->
        <div class="container-fluid">
          two
        </div>
      </div>
    </div>

    <div class="bg-danger col-9">
      <!-- MAIN CONTENT -->
      <div class="row">
        <div class="container-fluid lh-1 border border-dark">
          <h2>City name (dd/mm/yyy)</h2>
          <p>Temp:</p>
          <p>Wind:</p>
          <p>Humidity:</p>
        </div>
      </div>

      <div class="row">
        <div class="container-fluid">
          <h3>5-Day Forecast</h3>
        </div>
      </div>
    </div>
  </div>

</main>

<!-- SCRIPTS -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096b66667d7a7d7b6879493c273a273924686579616838">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

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

Attempting to isolate just a fragment of the inner content

Option Explicit Sub VBAWebscraping2() Dim IEObject As Object Set IEObject = New InternetExplorer IEObject.Visible = True IEObject.navigate url:="https://streeteasy.com/building/" & Cells(2, 4).Value ...

htmlcssexcelvba

A guide on how to modify a CSS property to set the display to none upon clicking a radio button

Currently, I am attempting to display two input boxes in a table when I select specific radio buttons and hide them if I choose another option. The code I have does work but has a minor issue, function disappear() { document.getElementsByClassName("ta ...

javascripthtmljquerycss

Tips for using various versions of jQuery at the same time

Despite searching on Stack Overflow, none of the answers provided seem to work for my issue. My requirement is to utilize two separate versions of jQuery. Below is the code snippet: I first link to the initial version and use the following code: <sc ...

javascriptjqueryhtml

personalized options for initiating and concluding html audio component

I am currently facing an issue with my html audio element that plays a track. The setup is quite straightforward: <audio controls loop="loop"> <source type="audio/wav" src="song.wav"> </audio> However, I need to create custom start ...

javascripthtmlgoogle-chromeaudio

Unable to make boxes responsive to size changes in CSS when layered over video background

I am struggling to position my boxes on top of a video background in HTML/CSS. Despite my efforts, the boxes only appear at the bottom and do not move with any CSS adjustments I make. Is there something I am missing or doing wrong in my approach? I want to ...

htmlcss

Is there a way to align the mat card title and subtitle on a single line?

My code is utilizing Angular material and here is the HTML snippet: <mat-card> <mat-card-header *ngFor="let club of result[0]"> <mat-card-title>{{club.clubName}}</mat-card-title> <mat-card-subtitle>Clu ...

htmlcssangularangular-material

Count the base in MySQL based on the $_SESSION['username']

I am seeking a solution to determine how many times the same username appears in 2 or more tables. The username I need to search for will be selected from $_SESSION['username'] First Table | id | username | date | | 1 | Mart |28-5-13| | 2 ...

phphtmlmysqlsql

A guide to connecting keyboard events to div elements within a React application

Currently working on a basic react project to gain some practical experience with the library. I aim to develop a simple user interface with blank spaces to be filled in by typing via keyboard input. Here's a glimpse of my progress so far: function ...

javascripthtmlreactjsreact-hooks

Switch image upon hover within a sprite

I have a sprite that I utilize for displaying various images. Currently, my aim is to change the sprite image upon hovering using solely CSS. .sprE { background-color: transparent; background-image: url(/i/fW.png); background-repeat: no-repeat; height: 30 ...

jquerycss

Tips for creating an endless loop within a nested v-for in Vue?

Here is my attempt at solving the problem: HTML <ul class="tree"> <li> <span>First Node</span> <ul> <li v-for="(tree, i) in trees" :key="i"> <span v-text="tree. ...

javascripthtmlvue.js

Updates made to the Transform property in Mui Theme are not appearing in the browser

I'm looking to modify the MuiInputLabel.outlined. While I can see various changes when inspecting in the browser, I'm having trouble seeing the transform property change specifically. This is the current configuration of my MuiInputLabel: MuiInp ...

cssreactjsmaterial-ui

numbered navigation jquery plugin

Can anyone recommend a jQuery plugin or alternative solution for creating a navigation system for comments similar to YouTube? Here is the link for reference: Thank you in advance. ...

javascriptjqueryhtmlcss

What is the best way to make the final character in the input placeholder appear in red?

Here lies my input field https://i.sstatic.net/0mJyJt.png, I'm striving to make the last character '*' appear in bold red rather than blending into the background. Despite numerous attempts, I haven't been successful in achieving the d ...

csssass

Custom pagination page size in AngularJS trNgGrid

I have been working on developing an Angular table using trNgGrid. It's functioning fine, but I am looking to incorporate custom pagination where the user can choose the number of page items to display per page. I checked out the TrNgGrid Global Opti ...

htmlangularjspaginationgrid

Utilize a fresh font style and replace the font family components in @mui/material with the new

Looking to bring in a fresh font family stored in a fonts directory and replace the existing mui base font family. import { responsiveFontSizes, createTheme } from '@mui/material'; import NEWFONTFAMILLY from '../fonts/something.otf' c ...

cssfontsmaterial-uifont-family

The search functionality on my website, powered by webapp2 and HTML, is not functioning properly

Upon examination, I noticed that my search term is being transmitted to my handler as an empty string. Here are the key components: This is my HTML form: <form class="navbar-search" action="/search"> <input type="text" class="se ...

jquerypythonhtmlgoogle-app-enginewebapp2

Textarea malfunctions if it includes HTML code

Here's a situation I'm facing. I'm setting up a basic text area with buttons for bold, link, img, and italics. When I enter plain text in the text area, everything works fine and the method is triggered as expected. But when I include HTML ...

c#htmlajaxrazorasp.net-mvc-5

Troubleshooting jsPDF problem with multi-page content in React and HTML: Converting HTML to PDF

I need to convert HTML content in my React application into a PDF file. My current approach involves taking an HTML container and executing the following code snippet: await htmlToImage .toPng(node) .then((dataUrl) => { ...

javascripthtmlreactjspdfjspdf

Executing JavaScript functions within static files in Django

I can't figure out why I'm unable to invoke a javascript function when clicking my Bootstrap button in a Django project. In my directory, I have set up the static folder as "main/static/main/js/script.js". While I can successfully load the stati ...

javascriptdjangobootstrap-4bootstrap-5

Having trouble with the filtering feature in Material UI Datagrid

I'm currently using Material UI Data Grid to display a table on my website. The grid has an additional filter for each column, but when I click on the filter, it hides behind my Bootstrap Modal. Is there a way to bring it to the front? https://i.stac ...

javascriptcssreactjsdatagridmaterial-ui