Creating a sleek and innovative responsive design for a Bootstrap 4 Carousel

Recently, I created a page with the help of bootstrap 4 and included a Carousel feature with four items. You can view the webpage here: Check out my Landing-Page with Bootstrap 4

The issue I encountered is that after the page finishes loading, there seems to be some extra space at the edge which allows for scrolling to the right side where there is unnecessary additional space.

Here's what I've attempted to resolve this problem:

  • Removed slide buttons
  • Experimented with different types of carousels
  • Changed and resized images
  • Commented out other elements like divs and navs, keeping only the carousel
  • Tried accessing the page on multiple browsers (firefox, chrome, safari)

I really hope this isn't a bug causing the issue. Appreciate any assistance you can provide.

Thank you for your support!

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Answer №1

The issue is not caused by the margins of any row (as mentioned in your approved response) but rather because some rows are not enclosed within containers.

Please refer to the documentation Bootstrap 4 grid system

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Furthermore, check out this link Bootstrap 4 containers where it explicitly states that 

Containers are the most basic layout element in Bootstrap and are required when using our default grid system.

In summary, the padding of the containers compensates for the negative margins of the rows, which in turn offsets the paddings of the columns

SOLUTION

Make sure any top-level row is wrapped within a container. In this case, consider utilizing container-fluid

Answer №2

To solve the issue, focus on the #education element (located between container and jumbotron).

Its width exceeds by 30px!

Attempt to eliminate any margins applied to it.

Answer №3

<div id="ausbildung" class="row" style="height: 50px;"></div>

To eliminate the extra space and horizontal scrollbar caused by Bootstrap's default negative margins in the .row class, you can override the styling with the following code:

.row {
    margin-left: 0px; 
    margin-right: 0px;
}

By applying this CSS rule, you should see the unwanted space and scrollbar disappear. Just remember to make any necessary adjustments to your columns if you are using .row with Bootstrap columns elsewhere in your project.

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

Show the text from the chosen option using jQuery with a button

Hey everyone, I have a question regarding a coding issue I'm facing. In this problem, I am unable to display the text from the selected option when I click the order button. The desired result is to show the selected option that I choose and display i ...

javascripthtmljquerybootstrap-5

Leveraging the power of PHP and AJAX for seamless transmission and reception of JSON data through a

I am in the process of creating a basic form that consists of a single text field and a submit button. The goal is to have the entered value posted to a $.getJSON method upon clicking the button, which will then retrieve a JSON response and display it on t ...

phpjqueryhtmlajaxjson

Using jQuery to reveal and conceal elements upon hover interaction

I have implemented a basic jquery function to display and hide a div when hovering over an anchor. However, the issue I am facing is that the div disappears when I move my cursor away from the anchor tag. I want to be able to interact with the div without ...

jquerycss

What is the best way to use a jQuery variable within a .css() function

I'm working on a typewriter effect with some advanced CSS code. I need the program to calculate the length of a PHP variable and adjust the cursor animation steps accordingly. Basically, I want the cursor movement in the animation to be determined by ...

phpjqueryhtmlcss

What is the method to extract the value of $r['id_usr'] from a select tag in PHP and store it in a variable?

Is there a way to retrieve the option value from a select tag using $r['usr_id'] when submitting it in order to utilize that value in a php query? Below is an example of my code : <pre> <div class="form-group"> & ...

phpjqueryhtml

How to implement a feature for uploading multiple files through a single form with unique input fields in a web

After searching on Stack Overflow, I couldn't find a suitable solution for my problem. I need help with my code that fetches data and sends it to a PHP file to upload files to specific folders and store their links in a database. However, I am encount ...

javascriptphpjqueryhtml

`Is it challenging to convert JSON into HTML, leading to undefined results?`

I am currently attempting to extract YAHOO data by utilizing getJSON and YQL. Although the connection is successful, I can retrieve the data and log it in the console. However, I am facing difficulties when trying to display this data on the JSP page I am ...

javascripthtmljson

When you assign a variable with a document.write() property, it becomes undefined for some reason

I'm experiencing some issues with assigning a string value to a variable using document.write, as it keeps coming out as undefined. Here's the code I'm trying: var c; c = document.write("hello world"); document.write(c); The out ...

javascripthtml

Spinning triangle around central point using CSS

I'm working on a project that includes the following code snippet: body { background-color: #312a50; font-family: Helvetica Neue; color: white; } html, body { height: 100%; } .main { height: 100%; width: 100%; display: table; } .wr ...

htmlcss

Stop span elements from being removed within a `contenteditable` container

I am facing a challenge with an editable div that contains a span element which I would like to prevent users from deleting. My development environment is Vue3. Currently, if the user presses backspace while their cursor is to the right of the span or sel ...

javascripthtmlvue.js

Issue with Quantity Box not displaying values in Shopify store

I am currently seeking assistance with resolving an issue I have encountered on a Shopify theme that I recently customized. The problem lies within the quantity box on the live site where despite being able to adjust the quantity using the buttons, the act ...

javascriptjqueryhtmlcssshopify

Implementing CSS functionality to enable and disable a button using JQuery upon user clicks

I'm currently exploring a solution to have the LeaderboardButton change its DIV to include bottom border radius upon clicking (which it does). However, I'm wondering how to make it so that upon clicking again, the border radius resets back to non ...

javascriptjquerycss

Mobile devices cause CSS drop shadows to malfunction | Next.js

Update: After some testing, I discovered that this issue is specific to iPhones. When I tested it with an android device, everything worked perfectly fine. However, when I tried viewing the page on two different iPhones, it broke on both. This problem see ...

cssreactjsiphonemobilenext.js

What is the best way to ensure that an input tag within a fieldset tag is required

I am currently working on creating a sign-up page using HTML and JavaScript. However, I am facing an issue with making the input tag required in the HTML code. The following code snippet does not seem to be working as expected: <input type="email" requ ...

javascripthtmlcssinputfieldset

Scrollable container with jQuery draggable functionality

I am currently working on implementing a draggable list that I want to contain within a scrollable div. $( ".draggable" ).draggable(); Here is the fiddle I have created for this: http://jsfiddle.net/YvJhE/660/ However, the issue I am facing is that the ...

javascriptjqueryhtmlcssdraggable

Utilize jQuery and plotly.js to exclusively display newly selected items in a dropdown menu

I'm exploring plotly.js and I want to create a dynamic plot that changes based on dropdown selection. My code includes jQuery and bootstrap. However, I faced an issue where selecting a new option adds a new line to the existing graph instead of replac ...

javascriptjqueryhtmlplotly

What is causing the div element to act as a container?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a1bba3bba5">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0v ...

htmlcssbootstrap-4containers

CSS not affecting DIV height properly

Alright, so I'm facing a little issue with a div that's nested within a form. The form has been set to a minimum height of 100%, however, the child div doesn't seem to stretch even after adjusting the height or min-height properties to 100%. ...

csshtml

Tips for positioning one set of menu buttons to the left and another set to the right

I am currently utilizing bootstrap 5 and I want to align two groups of menu buttons on the same line - one to the left and the other to the right. At the moment, my code is displaying the second group below the first group to the left. This is how it curr ...

htmlbootstrap-5

"The correct syntax for your MariaDB server version is specified in the manual." - The insert statement is not functioning in MySQL

<?php include 'db_connection.php'; $name = $_POST['name']; $password = $_POST['password']; $email = $_POST['email']; $phone = $_POST['phone']; $conn = OpenCon(); echo "<b ...

phphtmlmysqlmariadbsql-insert