How can I get rid of the extra space below the container in bootstrap?

I need to enhance the red-framed box_switch section in the image above by moving it to the top and applying a background color.

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

React.js

<div className="container">
    <div className="row mx-auto text-center">
      <>
          <div className="col-12">
            <div className="box_switch">
                <img className="" src={plugon_pic} />
              <p className="under_ic_switch_state">{item.state}</p>
            </div>
          </div>
      </>
    </div>
</div>
      

App.css

.box_switch {
    position: relative;
    background:#1E3E75; 
    padding:15px;
    border-radius: 10px;
    margin-bottom: 30px;
    margin: 0 calc(50% - 50vw) 15px;
    width: 100vw;
}

.box_switch {
  position: relative;
  background: #1E3E75;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 30px;
  margin: 0 calc(50% - 50vw) 15px;
  width: 100vw;
}
<div class="container">
  <div class="row mx-auto text-center">
    <div class="col-12">
      <div class="box_switch">
        <img class="" src="https://via.placeholder.com/100" />
        <p class="under_ic_switch_state">{item.state}</p>
      </div>
    </div>
  </div>
</div>

Answer №1

it seems like this code will work well

  body {
    margin: 0;
    padding: 0;
  }
  .box_switch {
    position: absolute;
    left: 0;
    top: 0;
  
    background:#1E3E75; 
    padding:15px;
    border-radius: 10px;
    margin-bottom: 30px;
    margin: 0 calc(50% - 50vw) 15px;
    width: 100%;
}
.container {
  position: relative;
}

Answer №2

Success achieved

.wrapper {
  margin-top: 0 !important;
}

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

spill the elements from one div into another div

I'm facing a situation where I have 2 divs on a page, with the first div containing text content only. The issue is that when the content of the first div overflows, it gets cut off due to the CSS applied to it: .one { overflow: hidden; width: 1 ...

When configuring Webpack with a rule array, JSX is not properly recognized by the tool

Here is the configuration for my webpack setup: const path = require('path'); module.exports = { entry: './src/entry.jsx', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist&ap ...

Stop jQuery from resetting the background image when using fadeOut()

Currently, I am using fadeIn and fadeOut functions with jQuery to create a fading effect. However, when the final fade out occurs, the entire CSS table fades out and the background image of the CSS body comes into view. Despite setting the background-posit ...

CSS - Nesting classes within one another

I'm currently working on customizing a Tumblr theme. Users have the option to choose between a one-column or two-column layout style, and I'm facing some challenges with implementing this in the CSS code. I attempted to add a class based on the u ...

Tips for ensuring your background image is fully displayed and covers the entire size

My dilemma lies within the header div. My intention is to have it fully covered with a background image without any cropping. However, the current setup seems to be stretching and cutting off parts of the image. Here is my CSS code: .header { bor ...

Error: The type 'boolean | (() => void)' cannot be assigned to type 'MouseEventHandler<HTMLButtonElement> | undefined'

Playing audio in a NextJS app while writing code in TypeScript has been an interesting challenge. The onClick() function performs well in the development environment, triggered by npm run dev. <button onClick ={toggle}> {playing ? "Pause" : ...

Troubleshooting: Unable to preview Facebook Page plugin

When I visit the Facebook developer site to get the code for a Facebook page plugin, I use this link. The preview feature works perfectly with pages like "facebook.com/Nike", but when I try it with my own page, "facebook.com/BargainHideout", it doesn&apos ...

Unable to adjust the top padding of the navbar to 0 pixels

Having recently started learning HTML and CSS, I am encountering an issue with the padding on my navbar. I am unable to get it to align with the top of the site as there is a persistent space between the navbar and the top. Below is my HTML code: <!do ...

Guide on creating a div container that spans the full width of the HTML page with a horizontal scrollbar

I'm facing an issue where the div container is not extending over the entire HTML page with a horizontal scroll bar. Here's a visual representation of my problem: Image Despite using MathJax to display math formulas, the div container does not ...

Interested in compressing CSS and JavaScript using PHP, but uncertain about the impact on performance and the best methods to implement it?

My current approach involves using PHP to combine multiple css (or js) files into a single file, while also compressing the content using GZIP. For example, the HTML page makes calls to resources like this... <link rel="stylesheet" href="Concat.php?fi ...

Inquiry parameter for RTK Query

I need help with sending a request using the following URL structure: . However, my current code is generating requests in this format: . I am unsure of how to set the query parameters correctly. Can someone guide me on fixing this issue? import { creat ...

When attempting to call a bundle file using browserify from React, an unexpected character '�' Syntax error is thrown: react_app_testing/src/HashBundle.js: Unexpected character '�' (1:0

Hey there, I'm currently struggling with an unexpected unicode character issue. Let me provide some context: I've created a simple class called HashFunction.js that hashes a string: var crypto = require('crypto') module.exports=class H ...

Can you help me create a CSS Toggle similar to this design?

I am currently working on a website and I need to create a FAQs page with a specific layout. When a user clicks on a question (Q), the answer (A) should open smoothly using jQuery animation. Only one question should be visible at a time. If a user clicks ...

What is the best way to implement a sub-menu using jQuery?

After successfully implementing a hover effect on my menu item using CSS, I am now struggling to make the sub-menu appear below the menu item upon hovering. Despite my efforts to search for jQuery solutions online, I have not been successful. Are there a ...

Activate the scroll accordion to automatically expand when the page loads

Incorporated within my FAQ page is an accordion feature. My desired functionality includes allowing the user to click on a link such as localhost:3000/faq#why-choose-us, which should prompt the page to smoothly scroll to the accordion element marked with t ...

What steps can I take to create a responsive jQuery UI buttonset?

I am currently facing a challenge with my web app (http://www.tntech.edu/cafe-menu.php) which is being iframed into a mobile application developed by ATT. The button sizes vary on different phone models, and I am seeking a solution to make them responsiv ...

Encountering a parsing issue: an unexpected token was found, expecting "," instead

I'm encountering a Parsing error that states: Unexpected token, expected ",". I've been unable to pinpoint where the missing "," is located. Please refer to the image below for the exact line of the error. const cartSlice = createSlice({ name ...

Is it possible for me to position an element beside the element before it?

Imagine a traditional layout consisting of paragraphs grouped with a sidebar. However, there are two issues with this setup: first, the browser displays the sidebar (typically used for navigation) before the main content, causing problems for screen reader ...

Tips for showing user data following form submission to a SQL database using React JS

Hey everyone, I'm currently working on a project that involves user registration and login. Once the users complete these steps, they are required to fill out an additional form which is displayed below. After submitting this form, the data is stored ...

A sudden blast of cool air greeted me as I navigated through a

I am currently managing a website using github pages and I have encountered an issue. When I navigate to the landing page, refreshing works fine. However, the problem arises when I visit http://example.com/about and try to refresh, resulting in a 404 error ...