Minimize the gap between col-lg elements in responsive mode within Bootstrap

My website is built using Bootstrap 4 and the following is the HTML code:

<div class="container">
  <div class="row text-center ">
    <div class="col-lg-6">A</div>
    <div class="col-lg-6">B</div>
  </div>
</div>

The code functions perfectly on the website, but when viewed on mobile or with a narrow browser window, the col-lg-6 classes stack with excess vertical space between them. I am searching for a solution to reduce this space. Any suggestions?

Answer №1

The presence of space in a design can be attributed to either margin or padding... here's how you can adjust it:

  • If you want to set the padding bottom to zero, use the class pb-0
  • To set the padding top to zero, use the class pt-0
  • To eliminate margin bottom, use the class mb-0
  • To remove margin top, use the class mt-0

This approach follows the bootstrap method... find more information here

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

Display of content visible via stationary div

Recently, I successfully implemented a fixed div that remains at the top of my webpage. However, I encountered an issue where text would appear through the div when scrolling. You can witness this phenomenon by visiting this site and simply scrolling down ...

Alter appearance using various classes

I am seeking assistance in changing the font of text using classes. I have multiple texts with different classes and I want to be able to edit all the texts without adding another dropdown menu. I believe that the change needs to occur in a script. Pleas ...

Implement a fadeout effect by using a timeout function that adds a class to the div element in

I implemented a loader on my webpage that animates for 3 seconds before a function kicks in to modify the styles and make it invisible. I am looking to add a fadeout effect when the 'waa' style is applied to the 'load' div. setTimeou ...

Steps for customizing the color of the center circle on a chosen radio button

I am seeking guidance on how to change the color of the center circle of a selected radio button using CSS. I am uncertain about the proper way to implement this change. If my explanation is unclear, please feel free to leave a comment. <div Name="fo ...

the iframe is not properly displaying the embedded responsive page

The primary webpage incorporates the responsive mobile page created with the JQUERY SUPERSLIDES plugin. The mobile page appears correctly when viewed directly on an iPhone using Safari. However, when it is embedded in an iframe, it does not display as expe ...

I possess a table that showcases MatIcon buttons. Upon clicking on a button, two additional buttons should appear at the bottom of the table

I am working on a table that contains mat-icon-buttons. When the button is clicked, it should display 2 additional buttons at the end of the table. Upon clicking the first button, its color changes from primary to red, and I would like to add two more butt ...

Analyzing user input in PHP against a mysqli database

I'm currently working on an online quiz application. I have everything in place with the form, and it's successfully sending emails to the administrator. However, there's a specific functionality that I want to implement: I need the script ...

What is the procedure to reduce my final search result by 1?

When the search is triggered, I want to filter the images by name. However, the issue arises when trying to make everything disappear on filter addition. <ul id="list2"> <li class="in2"> An extra number is added ...

Can a shadowed box feature a notch using only CSS?

I am facing a challenge with designing a layout where I am questioning whether it can be achieved using pure CSS or if images are necessary. My goal is to create something similar to the following: In this design, the <body> represents the yellow a ...

IE7 disregards the margin set in a div after a div that has been positioned absolutely

Within a container, I have two divs - the first one with absolute positioning. Strangely, in IE7, the second div doesn't seem to acknowledge the top margin. Padding works fine, but for visual consistency, I prefer using margin. The culprit appears to ...

Ways to Randomly Flip Divs

I have developed an application where all divs flip vertically on hover. I am looking for a way to make the flipping random without requiring a hover. Any ideas on how to achieve this? .vertical.flip-container { position: relative; float: left; ma ...

What is the best way to emphasize the chosen node in a treeview using jQuery?

.treeview ul { background-color: white; margin-top: 4px; } .treeview a:visited { background-color: Yellow; } .treeview a:active { background-color: Yellow; } .treeview a:selected { background-color: Yellow; } When I click on a node ...

In Internet Explorer 11, border-radius creates a separation between elements

There is an issue with whitespace appearing around elements that have a border-radius larger than 0, but this only occurs in Internet Explorer. If using border-top-left-radius: 20px; and border-top-right-radius: 20px;: https://i.sstatic.net/MAKsx.png *W ...

Is there a way to programmatically toggle a button's enabled state depending on the content of a text input field?

I want to create a functionality where a button will be enabled if the value in a textbox is 'mypassword'. If it's not equal to 'mypassword', then the button should be disabled. I've attempted the code below, but it doesn&apos ...

When I apply a percentage to the height of a div element, it shrinks down to a height

I have several lists with a flex layout. Each column contains 3 list items, and the flex-basis is set to one-third. Within each li element, there is a div for a background image and another div to display text, which should be positioned below the image. ...

Tips for enhancing webpage load times by optimizing CSS and jQuery file handling

As a beginner in HTML and CSS, I am facing slow loading times when testing my pages on a local server. This makes me concerned about the potential loading time on the internet. Currently, I have all the files included in the <head> tag at the top of ...

Attempting to create a div element that automatically adjusts itself horizontally in the center through the utilization of margins

I searched through examples on stack overflow that had similar problems to mine, but unfortunately, I couldn't find a solution. I'm not sure what I'm doing wrong, but the div is not aligning horizontally center as expected. It seems to work ...

Passing Value in Bootstrap 4 Modal

I'm having trouble figuring out how to pass data to a modal. Here is an example of what I am trying to achieve: $('#exampleModal').on('shown.bs.modal', function () { var userID = $(this).data('userId'); $('# ...

Having Issues with JSFiddle: Difficulty with executing a basic onclick event to display a string

Having trouble with an onclick event: Simply click the button to run a function that displays "Hello World" in a paragraph element with id="demo". <button onclick="myFunction()">Click me</button> <p id="demo"></p> <script> ...

Automatically open the first panel of the Jquery Accordion

Is there a way to automatically have the first panel in my JQuery accordion open when all panels are initially closed? Here is the HTML code for my accordion: <div class="accordionx"> <div class="acitemx"> <h3>First Panel</h3> ...