Problems with alignment in Bootstrap4

I am currently using bootstrap 4 to style my website, and I am facing an alignment issue. I want my buttons to be aligned parallel to the date and time fields located above them.

The Blue cross in the image indicates where my buttons are starting from, which is not what I desire.

The Redline indicates the desired starting point for my buttons and all other fields. I have experimented with various combinations of offsets and flexbox provided by Bootstrap grid, but unfortunately, I am unable to solve this problem.

https://i.sstatic.net/42cAt.png

Below is the code snippet:

<form>

    <div class="form-group row">
        <label for="Number of Guests" class="col-md-2 col-form-label">Number of Guests</label>
        <div class="col-md-10">
            <div class="row">
                <!-- Material inline 1 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline1">1</label>
                </div>

                <!-- Material inline 2 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline2">2</label>
                </div>

                <!-- Material inline 3 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline3">3</label>
                </div>

                <!-- Material inline 4 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline1">4</label>
                </div>

                <!-- Material inline 5 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline2">5</label>
                </div>

                <!-- Material inline 6 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline3">6</label>
                </div>
            </div>
        </div>
    </div>

    <div class="row col-md-10">
        <label for="section" class="col-12 col-md-2 col-form-label">Section</label>
        <div class="form-group row ">
            <div class="form-group row">
                <div class="offset-md-2 col-md-10">
                    <button type="submit" class="btn btn-secondary">Cancel</button>
                </div>
            </div>

            <div class="form-group row">
                <div class="offset-md-2 col-md-10">
                    <button type="submit" class="btn btn-primary">Reserve</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row col-md-10">
        <label for="dateandtime" class="col-12 col-md-2 col-form-label">Date and Time</label>
        <div class="col-6 col-md-3">
            <input type="date" class="form-control" id="date" placeholder="Date">
        </div>
        <div class="col-6 col-md-3">
            <input type="time" class="form-control" id="time" placeholder="Time">
        </div>
    </div>
    <div class="row col-md-10">
        <div class="form-group row">
            <div class="offset-md-1 col-md-10">
                <button type="submit" class="btn btn-secondary">Cancel</button>
            </div>
        </div>

        <div class="form-group row">
            <div class="offset-md-1 col-md-12">
                <button type="submit" class="btn btn-primary">Reserve</button>
            </div>
        </div>
    </div>
</form>
htmlcssbootstrap-4

Answer №1

If you're looking for guidance, I would recommend taking a look at this page: https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap utilizes a grid system with 12 columns per row. It seems like you may be combining different classes that shouldn't be mixed together.

For instance, your buttons are mixed with cols and rows, which is not the intended use.

 <div class="row col-md-10">
        <div class="form-group row">
            <div class="offset-md-1 col-md-10">
                <button type="submit" class="btn btn-secondary">Cancel</button>
            </div>
        </div>

        <div class="form-group row">
            <div class="offset-md-1 col-md-12">
                <button type="submit" class="btn btn-primary">Reserve</button>
            </div>
        </div>
    </div>

I would suggest starting with a simpler solution outlined in the link provided. Begin with a row containing 2 columns and see how that progresses.

    <div class="row">
        <div class="col-sm">
            <button type="submit" class="btn btn-secondary">Cancel</button>
        </div>

        <div class="col-sm">
            <button type="submit" class="btn btn-primary">Reserve</button>
        </div>
</div>

Answer №2

It seems like you're seeking a similar outcome, although the specific IDs and classes may vary. This code snippet is intended for educational purposes rather than direct replication. Take some time to review my code and grasp the variances between your original code and the example I've presented.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-group">
    <div class="row">
      <div class="col-md-2">
        <label>
          Number of Guests
        </label>
      </div>
      <div class="col-md-10">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">1</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">2</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">3</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">4</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">5</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">6</label>
        </div>
      </div>
    </div>
  </div>

  <div class="form-group">
    <div class="row">
      <div class="col-md-2">
        <label>
          Section
        </label>
      </div>
      <div class="col-md-10">
        <button class="btn btn-secondary" type="submit">
          Cancel
        </button>
        <button class="btn btn-primary" type="submit">
          Reserve
        </button>
      </div>
    </div>
  </div>

  <div class="form-group">
    <div class="row">
      <div class="col-md-2">
        <label>
          Date & Time
        </label>
      </div>
      <div class="col-md-6">
        <div class="row">
          <div class="col-6">
            <input id="date" class="form-control" type="date">
          </div>
          <div class="col-6">
            <input id="time" class="form-control" type="time">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <button class="btn btn-secondary" type="submit">
        Cancel
      </button>
      <button class="btn btn-primary" type="submit">
        Reserve
      </button>
    </div>
  </div>
</form>

I trust that this information serves its purpose. Good luck with your project!

Answer №3

There are several reasons why these elements are not aligning properly:

It is incorrect to use both .row and .col in the same class. Instead, organize them like this:

<form>
    <div class="row">
        <div class="col-md-4">
            I am a column on the left (4/12)
        </div>
        <div class="col-md-10">
            I am a column on the right (10/12)
        </div>
    </div>
</form>

Additionally, I have observed instances where a row is placed next to a column, which is not recommended. For subcolumns, consider structuring it like this:

<div class="row">
    <div class="col-6">
        <div class="row">
            <div class="col-md-4">
                I am inside of a larger column
            </div>
            <div class="col-md-10">
                So am I!
            </div>
        </div>
    </div>
</div>

For further clarification, refer to Bootstrap 4 grid documentation available here.

I hope this explanation helps resolve your alignment issues. Feel free to reach out if you need more assistance.

Answer №4

give this a shot:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<form>
  <div class="container-fluid">
    <div class="row my-4">
      <div class="col-md-2">
        <label for="Number of Guests" class="col-form-label">Number of Guests</label>
      </div>
      <div class="col-md-10">
        <div class="row">
          <!-- Material inline 1 -->
          <div class="form-check form-check-inline ml-3">

            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio1">
                                <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1">1
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio2">
                                <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">2
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio3">
                                <input type="radio" class="form-check-input" id="radio3" name="optradio" value="option2">3
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio4">
                                <input type="radio" class="form-check-input" id="radio4" name="optradio" value="option1" >4
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio5">
                                <input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">5
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio5">
                                <input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">6
                            </label>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="row my-4">
      <div class="col-md-2">
        <label for="section" class="col-form-label">Section</label>
      </div>
      <div class="col-md-10">
        <div class="form-group ">
          <button type="submit" class="btn btn-secondary">Cancel</button>
          <button type="submit" class="btn btn-primary">Reserve</button>
        </div>
      </div>
    </div>
    <div class="row my-4">
      <div class="col-md-2">
        <label for="dateandtime" class="col-form-label">Date and Time</label>
      </div>
      <div class="col-md-10">
        <div class="form-group d-flex">
          <input type="date" class="form-control col-md-3" id="date" placeholder="Date">
          <input type="time" class="form-control col-md-2 ml-3" id="time" placeholder="Time">
        </div>
      </div>
    </div>
    <div class="row my-4">
      <div class="offset-md-2 col-md-10">
        <button type="submit" class="btn btn-secondary">Cancel</button>
        <button type="submit" class="btn btn-primary">Reserve</button>
      </div>
    </div>
  </div>
</form>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

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

Choose an option from the drop-down menu in HTML

Using HTML code to select options without closing the option tag is a unique method that is functioning correctly. <div><div class="select-wrapper"> <select name="adult"> <option value="none" />Adults & ...

htmlhtml-select

Determine the position of an HTML list using Xpath by considering additional criteria

After investigating a workaround for this unresolved question, I am now facing a new challenge. I am curious if it is possible to retrieve the list position from HTML based on certain search criteria? This would enable me to reconstruct the xpath of the ...

c#htmlseleniumxpath

It's possible for anyone to enhance the appearance of the Download button by adding styles without compromising its functionality

Looking to enhance the style of the Download button as it appears too formal. Seeking assistance in adding some button styles to make it more stylish. The code is correct, just aiming to give the Download button a trendy look with specified styles. ...

javascripthtmlcss

Fluid and static dimensions in CSS

I am looking to have two divs in the same row in HTML, where one remains a constant width while the other adjusts its size as the end user increases the web page. My initial attempt was to define a parent div with two child divs like this: <div> ...

htmlcss

The words streaked across the page like shooting stars, leaving

On my website, I'm facing an issue with text overflowing off the page when the podcast listing page is viewed on a small screen: https://i.sstatic.net/ZAR6Z.png I stumbled upon this helpful Stack Overflow answer that suggests using a specific CSS cl ...

htmlcss

What steps can I take to create an element that changes upon hovering over it?

I am attempting to implement a mechanism similar to this: https://i.sstatic.net/wZctM.png Here is my current approach: $(document).ready(function(){ $('a').bind('mouseenter', function() { var self = $(this); this.iid ...

javascriptjqueryhtmlcss

By setting the overflow-x property to hidden on my container, I have inadvertently disabled the sticky positioning

How can I make an element sticky when scrolling and hide horizontal scroll on mobile? I'm having trouble with horizontal scrolling on iPhone. Can you help me troubleshoot this issue? Thank you. .sticky-sidebar { position: -webkit-sticky; posit ...

htmlcssbootstrap-5

Utilize HTML styling for enhancing the detail view in ASP.NET MVC

Currently, I am working on a detailed view page that looks like the following: https://i.sstatic.net/Kw9aE.jpg My objective is to display relevant fields with HTML effects, if applicable. Below is a snippet of the CSHTML code for the aforementioned view ...

htmlasp.netasp.net-mvcasp.net-mvc-4razor

Troubleshooting Problem: Grid Layout Problem with Thumbnail Images in Responsive Image Gallery

I stumbled upon a fantastic example of a responsive image gallery that I'm eager to incorporate into my website: Although I'm using Mobirise to set up the gallery, I'm struggling to replicate the layout of the sample gallery - specifically, ...

jqueryhtmlcssbootstrap-4

NextJS's conversion of HTML to image is malfunctioning, resulting in the download of the identical reference

Having encountered difficulties with the html-to-image library while working on a Next.js project, I used the following code to convert images: import Image from "next/image"; import {toPng} from 'html-to-image' const divReferenceA = u ...

javascripthtmlnext.js

Issue with Firefox causing Bootstrap form to appear incorrectly

I recently created a customized form using Bootstrap, but unfortunately, I'm encountering an issue with Firefox. Despite functioning perfectly on other browsers, the radio buttons are being pushed off the edge of the page and aren't displaying pr ...

javascripthtmlcsstwitter-bootstrap

What is the best way to ensure the current item remains in view within a div with overflow?

I am facing a challenge with a fixed height div of 400px containing a long list of items. When using prev/next links to navigate through the list, eventually the current item goes out of view. Is there a way to automatically move the scrollbar to show the ...

javascriptjqueryhtml

"The issue of a malfunctioning selected option in a select dropdown within an AngularJS application

I've been experiencing some odd behavior with my Dropdown control in an AngularJS application. The selected="selected" attribute doesn't seem to be working, resulting in blank default selected values. Additionally, I'm having trouble with t ...

htmlangularjs

Is the height set to auto for the image stretching to equal the height of the PNG file?

.q-team-images { width: 6.4rem; height: auto; padding-bottom: 1rem; } Does the CSS styling mentioned above ensure that the image will adjust its height according to the height of its PNG file? ...

htmlcss

Stable navigation bar implemented with a grid design

I'm struggling with creating Navbars in Grid Layout. https://codepen.io/Aeshtray/pen/BdqeZL For mobile view, I want the Navbar to be fixed horizontally (as currently coded), but once reaching a width of 500px, I need it to become vertically fixed on ...

csslayoutnavbarcss-grid

Creating a left, down, left line drawing animation using only CSS

Utilizing CSS transitions to animate a line drawing from right to left, then down, and finally continuing to load to the left: point 1------point 2 | | | ---------point 3 Here is the CSS code I ...

htmlcsscss-transitions

Modify the textfield label color using Material-UI

Hey there! I'm running into a little issue when trying to change the color of the text label in a MUI text field. I've successfully customized the border colors and hover states, including the label, but for some reason, I can't seem to get ...

cssmaterial-uijsx

What is the method for displaying map tooltips by default rather than on mouseover?

Currently, I have a script set up to display a map with two markers. Whenever I hover over one of the markers, a popup tooltip appears with location information. My question is, how can I make the information appear by default without needing to hover ov ...

javascriptjqueryhtmlcssgoogle-maps

Conceal the button briefly when clicked

How can I disable a button on click for a few seconds, show an image during that time, and then hide the image and display the button again? HTML: <input type="submit" value="Submit" onclick="validate();" name="myButton" id="myButton"> <img st ...

javascripthtml

The OnClick event is unresponsive when accessing the website on a mobile browser

I have a HTML page where I've included an onclick event in a div tag. Within this event, I'm using location.href = url to open a specific URL. Surprisingly, this works perfectly fine in a web browser but strangely doesn't work in a mobile br ...

javascriptjqueryhtmlmobile