How to eliminate vertical spacing between rows in Bootstrap?

I am looking to eliminate the unsightly vertical spacing between the bootstrap rows displayed below: https://i.sstatic.net/dgR2z.png

The code appears as follows:

<div class="outerbox container-fluid vw-100">
  <div class="row vw-100 justify-content-center">
    <div class="col-6 col-md-7 " style=" background: rgba(255, 255, 255, 0.45);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.18);">
      <div class="optionrow row justify-content-center py-0">
        <div class="col-8">
          <a href="f1/f1.html">
            <div class="option">Function 1</div>
          </a>
        </div>
      </div>
      <div class="optionrow row justify-content-center">
        <div class="col-8">
          <a href="f2/f2.html">
            <div class="option">Function 2</div>
          </a>
        </div>
      </div>
      <div class="optionrow row justify-content-center">
        <div class="col-8">
          <a href="f3/f3.html">
            <div class="option">Function 3</div>
          </a>
        </div>
      </div>
      <div class="optionrow row justify-content-center">
        <div class="col-8">
          <a href="Past Question Papers/past papers.html">
            <div class="option">Past Papers</div>
          </a>
        </div>
      </div>

    </div>
  </div>
</div>

The CSS applied for the link transition is as follows:

.option {
            margin: 0;
            padding: 10px;
            border: unset;
            border-radius: 15px;
            color: black;
            z-index: 1;
            background: #e8e8e8;
            position: relative;
            font-weight: 1000;
            font-size: 14px;
            -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
            box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
            transition: all 250ms;
            overflow: hidden;

        }

        .option::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 0;
            border-radius: 15px;
            background-color: #212121;
            z-index: -1;
            -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
            box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
            transition: all 250ms
        }

        .option:hover {
            color: #e8e8e8;
        }

        .option:hover::before {
            width: 100%;
        }

I have attempted using !important in the CSS, but it does not seem to be effective:

.optionrow {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.optionrow a {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

It seems likely that the root cause could be attributed to bootstrap functionality.

I am aiming for the layout to resemble the following: Link to the desired webpage layout

htmlcssbootstrap-5

Answer №1

To eliminate the default gutters between rows, make sure to include the gy-0 for vertical gutter (gap) in your code. visit this link for more information

I trust this solution resolves your issue. Enjoy a wonderful day!

Answer №2

I couldn't figure out how to adjust the vertical spacing between the rows, but I did manage to solve the main issue at hand. The new code is more straightforward, even though I don't fully grasp the mechanics behind it. It's functioning properly for now, so that's good enough.

<div class="outerbox container-fluid vw-100">
  <div class="row vw-100 justify-content-center">
    <div class=" col-sm-10 col-md-7 col-lg-6 " style=" background: rgba(255, 255, 255, 0.45);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.18);">
      <div class="optionrow row justify-content-center py-2">
        <a class="col-8 option" href="f1/f1.html">Function 1</a>
        <a class="col-8 option" href="f1/f1.html">Function 1</a>
        <a class="col-8 option" href="f1/f1.html">Function 1</a>
        <a class="col-8 option" href="f1/f1.html">Function 1</a>


      </div>
    </div>
  </div>
</div>
<div>

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

Combining GET and POST requests for CSRF attack

Imagine a scenario where a web application includes a delete button. When the button is clicked, the application initiates a GET request that returns a POST form containing a token key. The user is then prompted with a Yes or No question to confirm deletio ...

htmlajaxcsrf

Troubleshooting scope evaluation in AngularJS within style tags on IE9 not functioning

My issue involves a div block with a style attribute that includes left:{{left}}px; and right:{{right}}px. Even though $scope.left and $scope.right are being updated, my item still doesn't move as expected. I have created a fiddle to demonstrate th ...

cssangularjsinternet-explorer-9

Binding textarea data in Angular is a powerful feature that allows

I am looking to display the content from a textarea on the page in real time, but I am struggling to get the line breaks to show up. Here is my current code snippet: app.component.html <div class="ui center aligned grid">{{Form.value.address}}< ...

javascripthtmlangularangular2-databinding

Unexpected behavior observed with Bootstrap popover

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bootstrap Popover</title&g ...

htmljquerywebbootstrap-5

Executing a function within a ng-repeat iteration

Is there a way to call a method within an ng-repeat loop, even if the element does not exist at that moment? I'm facing this issue and I'm not sure how to resolve it... The ID seems to be correct. Strangely, when I run it in the console after ev ...

javascripthtmlangularjs

The issue of Jquery .click event handler failing to work for class selector specifically in CHROME

Is there a way to achieve the same opacity effect on click as on mouseover? I've tried various selectors without success. Any help on this issue would be greatly appreciated. Thank you in advance! .container { position: absolute; background:url(&a ...

jqueryhtmlcsseventhandler

Modify the Color of Chosen Anchors for Site Categories WITHOUT Using JavaScript

Is there a way to change the color of section anchors in a fixed header when selected without using JavaScript? I'm looking for a CSS-only solution that will change the color of the selected anchor and revert it back to normal when another anchor is c ...

htmlcssanchorsections

Two neighboring sections containing dynamic elements. One section automatically adjusts its size to fit the content, while the other allows

I need to display 2 adjacent boxes with dynamic content rendered using Angular. The Container should have the same height as Box1. The height of Box2 may vary due to its dynamic nature, but it should never be taller than Box1. If it does become higher, a s ...

htmlcssdynamicheight

Duplicate the canvas onto a new canvas

One of the functions I am using involves copying an old canvas to a new canvas. Here is the code snippet for this functionality: function cloneCanvas(oldCanvas) { //create a new canvas var newCanvas = document.createElement('canvas&a ...

javascriptjqueryhtmlcanvas

Obtain the accurate sequence of tr elements in the form of a jQuery object

Even though you can define tfoot before tbody in the source code, when displayed in the browser tfoot will still appear last: <table> <thead><tr><th>i get displayed first</th></tr></thead> <tfoot><t ...

javascriptjqueryhtml

Tips for applying horizontal padding to the container-fluid class in Bootstrap 5

I'm struggling with the CSS code I wrote: .container-fluid{padding 3% 15%;} It's only adjusting the vertical padding to 3%, and there's no change in horizontal padding. #title { background-color: #ff4c68; } .container-fluid { pad ...

htmlcsstwitter-bootstrappaddingbootstrap-5

Generate a loop specifically designed to execute the code following the menu in the script

My website has the code snippet below: let txt_com = document.querySelector(".text_user"); let num_com_user = document.querySelector(".massage_for_user"); txt_com.addEventListener("click", function() { if (this.classList.contains("num_com_user")) { ...

javascripthtmlcss

Generate unique identifiers in HTML

Below is my HTML and JavaScript code: <!DOCTYPE html> <html> <head> <style> .custom-div { border: 1px solid green; padding: 10px; margin: 20px; } </style> <script> ...

javascripthtml

Having images that are too large in size and using a high percentage can

I'm encountering a strange issue. When I define the width and height of my images in pixels in my CSS file, all my jQuery animations and events work perfectly fine. However, when I switch to using percentages or 'auto' for the image dimensio ...

javascriptjqueryhtmlcss

Checking forms for standard regulations with jQuery

Within my project, I have implemented multiple forms, where each form shares common fields like email, but also contains its own unique fields such as uniqueFieldA for Form A and uniqueFieldB for Form B. The challenge at hand is to develop a set of valida ...

javascriptjqueryhtmljquery-validatevalidation

Having issues with column offsetting in Bootstrap v4.0.0-beta

While using Bootstrap 4 Beta (Bootstrap v4.0.0-beta), I encountered an issue with offsetting columns. Previously, I used offset-md-* and it worked fine. However, this feature has been removed in BS4 Beta as per the documentation. The new method suggested i ...

csstwitter-bootstrapbootstrap-4

Exploring different ways to customize the grid style in Angular 6

Here is the style I am working with: .main-panel{ height: 100%; display: grid; grid-template-rows: 4rem auto; grid-template-columns: 14rem auto; grid-template-areas: 'header header''sidebar body'; } I want to know how to cha ...

cssangulargrid

Unusual gaps of white space appearing between React components

Currently developing a small web application with multiple components. The backend functionality is all set, but encountering an unusual styling issue. Specifically, noticing a white space appearing between each component without any clear reason. This ga ...

htmlcssreactjs

How can Angular CLI prevent the submission of an HTML form unless a previous option has been selected

I am currently working on a form that contains select fields with various options pre-populated. <form [formGroup]="selectVehicleForm"> <select formControlName="Manufacturer"> <option *ngFor='let ...

htmlangulartypescriptformsselect