I am puzzled as to why there is extra space on the right side of the output. Is there a way to utilize Bootstrap 4 to fill in

What could be causing the space at the end of the output? And how can I utilize Bootstrap 4 to fill that space?

.navbar-custom {
     background-color:rgb(128 128 128 / 18%);
     height:48px;
}
 .close{
     margin-bottom: 40px;
}
 h2{
     margin-top: 35px;
     margin-left: 34px;
}
/* .logo1{
     margin-bottom: 120px;
}
 */
 .container-fluid {
     max-width: 100%;
     padding-right:0;
     padding-left:0;
     margin-right:0;
     margin-left:0 
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
    <div class="container-fluid">
        <nav class="navbar navbar-custom">
            <!-- Brand/logo -->
            <a class="navbar-brand" href="#">
                <div class="mt-0 ">
                    <img src="logo.png" class="logo1" alt="logo" style="width:50px;"></div>
            </a>
            <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

        </nav>
    </div>
    <h2>Do you have Fever above 101.4?</h2>
    <div class="mx-auto mt-5" style="width:150px">
        <img src="fever.png" class="logo1" alt="logo" style="width:200px;">
    </div>
    <br>
    <div class="row row-cols-1">
        <div class="col"><button type="button" class="btn btn-primary btn-block mt-5">Yes,I do</button></div>
        <div class="col"> <button type="button" class="btn btn-primary btn-block mt-2">No, I don't</button></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Any suggestions for filling the space using bootstrap 4? I'm currently troubleshooting an issue where items are not fully utilizing the container-fluid and leaving empty space on the right side.

htmlcssbootstrap-4containersnavbar

Answer №1

Your row class is being affected by margin-right:-15px and margin-left:-15px, causing the issue. You should set them to zero.

.no-margin
{
  margin-right:0 !important;
  margin-left:0 !important;
}

To fix this, add the no-margin class to your HTML like so:

<div class="row row-cols-1 no-margin">
    ........
 </div>

Answer №2

To prevent the overflow and display of horizontal scrollbar, it is essential to ensure that any Bootstrap row is contained within a container or container-fluid class.

When structuring your layout using Bootstrap's grid/column system, remember to follow this hierarchy: container, child row, and then child col.

The snippet has been updated by relocating the content inside the container-fluid class for proper styling.

.navbar-custom {
  background-color: rgb(128 128 128 / 18%);
  height: 48px;
}

.close {
  margin-bottom: 40px;
}

h2 {
  margin-top: 35px;
  margin-left: 34px;
}


/* .logo1{
     margin-bottom: 120px;
}
 */

.container-fluid {
  max-width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-custom">
      <!-- Brand/logo -->
      <a class="navbar-brand" href="#">
        <div class="mt-0 ">
          <img src="logo.png" class="logo1" alt="logo" style="width:50px;"></div>
      </a>
      <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

    </nav>
    <h2>Do you have Fever above 101.4?</h2>
    <div class="mx-auto mt-5" style="width:150px">
      <img src="fever.png" class="logo1" alt="logo" style="width:200px;">
    </div>
    <div class="row row-cols-1">
      <div class="col"><button type="button" class="btn btn-primary btn-block mt-5">Yes,I do</button></div>
      <div class="col"> <button type="button" class="btn btn-primary btn-block mt-2">No, I don't</button></div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>

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

Showing content from a JavaScript variable once a button has been clicked

Imagine you are using express.js and have a JavaScript variable embedded in an ejs file like this: <%= someVariable %> How can you display the value from this variable on the same page, for instance within a bootstrap modal element (check out https: ...

javascripthtmlnode.jsexpressejs

What is the process for eliminating the message "Hello Member" on the Woocommerce Checkout page?

I've been struggling to remove a certain area on the checkout page without success. I attempted using this CSS code: .avada-myaccount-user-column .username { display:none; } https://i.stack.imgur.com/okFg9.png https://i.stack.imgur.com/GisRQ.png Cu ...

csswordpresswoocommercestylescheckout

The continuation of unraveling the mystery of utilizing `overflow-y:scroll` in a horizontal slider

As a beginner, I realized too late that adding code in comments is not an option. Consequently, I decided to create a new question and ask for your assistance once again. To optimize the use of space, I have implemented bxSlider with fixed dimensions (wid ...

javascriptjqueryhtmlcss

Using CSS to apply hidden box shadow to nth child element

I am encountering a challenge with using the CSS selector :nth-child(...) in combination with the box-shadow effect. The intended outcome is as follows: The even-numbered div elements within a specific container should have alternating background colors. ...

htmlcsscss-selectors

Validation needed for data list option

Here are all the details <form action="order.php" method="post" name="myForm" onsubmit="return(validate());"> <input type="text" list="From" name="From" autocomplete="off" placeholder="From Place"> <datalist id="From"> <option valu ...

javascripthtml

Stopping the Game Loop in Windows Phone 8.1 with WinJS

Despite everything working smoothly, I am facing an issue with stopping the game loop when the Start button is pressed and the app is moved to the background. The event handler for suspend, app.oncheckpoint = function(args) {}, does not seem to fire for t ...

javascripthtmlwinjs

Is it possible to have a GIF start playing when hovered over and automatically pause when the mouse is moved away?

Is there a method to create a GIF with specific functions? Beginning in a paused state on the page; Playing only when hovering over it; Stopping at the exact frame where the mouse leaves the image. Can these features be achieved without relying on JavaS ...

htmlcsshovergifplayback

relocating the input field underneath the button

I need help figuring out how to arrange this. Here's an example link: http://jsfiddle.net/VBS4E/25/ Is there a way to position the input field directly below the button? Like this: ________ __________ __________ | Btn#1 | | Btn#2 | | Btn# ...

htmlcss

The sequence of text is not appearing correctly

I'm attempting to populate a paragraph with JSON data, while inserting a divider between data gathered on different dates. function fetchAllLogs(employeeId) { $.getJSON('datafile.json', function(data) { $("#" + employeeId).html( ...

javascriptjqueryhtmljson

The Php Include function is known to create unnecessary whitespace and disregard any specified styles

On one of my web pages, I am using the include() function to bring in content from another page. This external page contains both HTML and PHP code, with echoes for output. Here's an example: The page Apple.php looks like this: <html> <head ...

phphtml

Align the bottom of an image with the top of text to achieve perfect vertical alignment

My goal is to arrange numerous images in a row, with text displayed below each image. Each block of text may consist of multiple lines and should be centered. While the heights of the images may vary, their widths will remain consistent. It is important th ...

htmlcss

I'm experiencing some unusual behavior with the Windows media app when using HTML and CSS

I have a Windows Media Player box on my page, but it overlaps every piece of HTML code. How can I get it to move to the back so that I can still use it? Another problem is that everyone who visits my page needs a plugin to load it, even though most people ...

htmlcsswindowswindows-media-player

Searching for elements by tag name in JavaScript

Recently, I attempted to create JavaScript code that would highlight an element when a user hovers their cursor over it. My approach involves adding an event listener to every child within the first "nav" tag in the current document: let navigation = docum ...

javascripthtml

Resolving the Issue of Jerky Graphics During HTML5 Canvas Animation

When animating a layer in canvas, the visual quality becomes uneven if there are additional layers present. You can see an example of this by clicking "RUN" on this fiddle: http://jsfiddle.net/Q97Wn/ If I modify this line: opts.percentageIndicator.clearR ...

javascripthtmlanimationcanvas

The browser is not displaying the HTML correctly for the Polymer Paper-Menu component

I attempted to implement a paper-menu, but I am facing issues with the rendered HTML and its interaction. When I click on a menu item, the entire list disappears due to the paper-item elements not being properly placed inside a key div within the paper-men ...

htmltypescriptangularpolymerpaper-elements

A comprehensive guide on creating a package that combines an href link with an <li> element

I am currently using the <li> tag to display href links. The issue I am facing is that when I click on the 'box,' it does not directly link to another page. Instead, I have to click on the href link for it to redirect to another page. Is th ...

javascripthtmlcss

What causes the entire webpage to shift when adjusting the margin-top value?

As I work on creating this website based on a tutorial, it's clear that I am still in the learning stages. Unfortunately, the tutorial didn't provide an explanation for the unexpected behavior I'm experiencing. Here's the CSS code snip ...

csshtml

Transform the color of links in a Sankey diagram on Google upon clicking a node

Currently, I am in the process of creating a Sankey diagram using Google charts. As of now, I have implemented the following CSS: svg path:hover { fill: red; } However, I have noticed that this code only changes the color of the links when hovering over ...

javascripthtmlcssgraphgoogle-visualization

Is there a way to access the value of a variable within a loop inside a function and store it in a global variable?

I am struggling to retrieve the value of a variable after it has passed through a loop. I attempted to make it a global variable, but its value remains unchanged. Is there any way to achieve this? Below is my code snippet where I am attempting to access t ...

htmlfunctionvariablesjavascript

jinja2.exceptions.TemplateSyntaxError: anticipated symbol indicating 'end of block statement', received 'text'

{% extends "base.html %} {% block content %} <h1 style="text-align: center">Displaying Owner Information</h1> <fieldset align="centre"> <body> {% for value in p %} {{ value.id }}<br> {{ value.start_location ...

pythonhtml