Padding in Bootstrap rows is not uniform

My grid template has 3 columns, but the first row in one of the columns is slightly pushed. Which CSS property should I adjust to fix this issue? Using Bootstrap framework.https://i.sstatic.net/CLSYK.png

<div class="col">
  <div class="col-sm">
    <input type="redacted" class="form-control" id="redacted" placeholder="" required>
  </div>
</div>
<div class="col">
  <div class="col-sm">
    <input type="redacted" class="form-control" id="redacted" placeholder="">
  </div>
</div>
<div class="col">
  <div class="col-sm">
    <input type="redacted" class="form-control" id="redacted" placeholder="">
  </div>
</div>

Check out the CSS snippet below:

.gridMatchInputs {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
htmlcsstwitter-bootstrap

Answer №1

To achieve the desired layout, try removing the line 

grid-template-columns: 200px 200px 200px;
from your CSS. Instead, use .row to separate elements into new rows.

Check out the demo below: 

.gridMatchInputs {
  display: grid;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="gridMatchInputs">
  <!-- Row 1 -->
  <div class="row">
    <!-- column 1 -->
    <div class="col-sm">
      <input type="text" class="form-control" id="1" placeholder="1" required>
    </div>

    <!-- column 2 -->
    <div class="col-sm">
      <input type="text" class="form-control" id="2" placeholder="2">
    </div>
    <!-- column 3 -->
    <div class="col-sm">
      <input type="text" class="form-control" id="3" placeholder="3">
    </div>
  </div>
  
  <!-- row 2 -->
  <div class="row">
    <div class="col-sm">
      <select class="form-control" id="select1">
        <option selected>select1</option>
      </select>
    </div>

    <div class="col-sm">
      <select class="form-control" id="select2">
        <option selected>select2</option>
      </select>
    </div>

    <div class="col-sm">
      <select class="form-control" id="select3">
        <option selected>select3</option>
      </select>
    </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

Issue with displaying jqplot in a jQuery page

Currently, I'm utilizing jqmobile pages for switching between various pages in an html5 application. One of these pages features a jqplot chart. Below is the code snippet: <div data-role="page" id="page-two" data-title="Page 2"> &l ...

javascripthtmlcordovajqplot

Is the availability of XMLHttpRequest constant?

When using XMLHttpRequest to retrieve data from the server with Javascript, is it necessary to include conditional checks for the specific browser being used? Is the code snippet below considered standard practice when working with XMLHttpRequest? if (w ...

javascripthtmlajaxxmlhttprequest

Conceal HTML code from being displayed on a mobile device

After successfully displaying an element on mobile, I am now trying to hide it on the same platform. While I know this can be achieved with CSS using the display:none property, I want to explore alternative methods that do not involve creating unique CSS r ...

phphtml

Having trouble with Bootstrap 4: I want to rotate an image, but every time I try, it ends up overwriting the CSS properties

I am currently working on a website using bootstrap 4, and I'm facing an issue with the image I selected. It seems to rotate to the right and is not displaying correctly. click here for image preview The main problem lies in rotating the image witho ...

htmlcssbootstrap-4rotationtransform

Clicking on a jQuery element will reveal a list of corresponding elements

I've retrieved a list of elements from the database and displayed them in a table with a button: <a href="#" class="hiden"></a> To show and hide advanced information contained within: <div class="object></div> Here is my jQ ...

javascriptjqueryhtmltoggle

Having trouble displaying the Order List in Tailwind CSS and Next.js?

I am having trouble displaying an ordered list on my page. I have tried using the <ol> tag, but for some reason the numbers are not showing up. Even when I switch to the <ul> tag, it's still not working properly. Take a look at this scree ...

htmlnext.jstailwind-css

Sticky sidebar navigation paired with a scrollable main content area and anchor links

Examining the fiddle reveals a straightforward page layout with a fixed menu on the left and scrollable content. I am looking to align the menu with the content without any blank space at the top that causes the menu to shift upwards while scrolling down. ...

jqueryhtmlcss

Avoiding clashes between CSS styles in web applications

As I work on developing a web application that can be embedded on external websites, one of the challenges I am facing involves constructing dialogues with their own unique stylesheets. This could potentially lead to conflicts if both my dialogue container ...

css

Is your window.location.hash malfunctioning?

I am facing an issue with changing the background color of a <div id="services> when a specific link (index.html#services) is clicked. I have attempted to use the latest jQuery along with the jQuery Color plugin from jQuery Color. The code snippet I ...

javascriptjqueryhtmlxhtml

What is the process for incorporating JavaScript packages into Laravel 5?

Dealing with this situation has become quite chaotic as individuals constantly debate over the best approach, leading to an influx of packages being created to integrate JS into a Laravel project. Within my package.json file, the following dependencies are ...

twitter-bootstraplaravelnpmlaravel-elixir

The floating left div displays oddly when it wraps onto the next line

I currently have a variable number of floating divs, ranging from 1 to 10. When I display either 1-5 or all 10, they appear correctly: item1 item2 item3 item4 item5 item6 item7 item8 item9 item10 However, when I try to display around 7 of them, things s ...

csshtml

Incorporating AJAX functionality into anchor interactions while preserving href links for search engine optimization benefits

Is it possible to create a link/button that triggers an AJAX/jQuery function to load new content, while still providing a link to the same content on a separate page? I am particularly concerned about SEO and how search engine crawlers will index my sitem ...

jqueryhtmlajaxseohref

Implementing CSS keyframe animations in a customized Material UI component using React, Material UI, and JSS

I'm facing an issue with adding a CSS keyframe animation to my Material UI custom styled component. Whenever I try to add a keyframe animation, it throws an error in my code setup: const PulsatingCircle = styled("div")(({ theme, }) => ( ...

cssreactjsmaterial-uijss

Can the text color be customized to match the brightness level of the background area being covered?

Does anyone know of a plugin or method that can automatically change the color of text or swap predefined images/icons based on the average brightness of its parent element's background? If the background is dark, it should make the text white or swit ...

javascriptjqueryhtmlcsssass

Import a new JavaScript file and access a variable

I'm currently working on a school project where I am creating an online platform for purchasing games. The platform is designed using HTML, CSS, and JS, with each game having its own corresponding JS file containing the information. Here is a sample o ...

javascripthtml

Container slide-show fill error

I'm attempting to create a slide show with an overlapping caption that appears when hovering over the container or image. The image needs to fit exactly inside the container so no scroll bar is shown and the border radius is correct. I managed to achi ...

javascripthtmlcsscontainers

Finding the Right Spot to Edit HTML Code in Microsoft Dynamics CRM

Is it possible to change the width of a custom iframe in Microsoft Dynamics CRM that is currently set at 1900px? <div id="mainContainer" class="classname_here" style="max-width: 1900px"> I was able to change it to 100% using a browser extension. Ca ...

htmlcssiframedynamics-crm

Converting the Google logo to grayscale for the Google Translate button

Is there a simple way for a non-coder like myself to change the colors of the Google Logo in the Google Translate Button to grey scale instead of its usual bright shades? Below is the embed code I am using: <div id="google_translate_element"></di ...

htmlembedgoogle-translate

Should you stick with pre-defined styles or switch to dynamic inline style changes?

I am currently developing a custom element that displays playing cards using SVG images as the background. I want to make sure that the background image changes whenever the attributes related to the card's suit or rank are updated. From what I under ...

javascripthtmlcssweb-componentcustom-element

Is it possible to slide-toggle and alter the background color of a div when clicked?

Imagine having several div's on a webpage all with the ID of "Toggle". Each div contains two other smaller divs. "Headline" which is always visible. "Comment" which appears/disappears when the headline is clicked (initially hidden). How could I ac ...

jqueryhtmlcssslidetoggle