I'm attempting to use Bootstrap to align my divs, but unfortunately, it doesn't seem to be working as I had hoped

I've been attempting to align divs using bootstrap, but I'm encountering issues.
I prefer not to use a table for this purpose and have experimented with the table tag, but would rather achieve alignment with divs and bootstrap.

My familiarity with bootstrap is limited, but I am making an effort.
Could someone provide assistance?

This is how it appears on my screen:

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

Below is the code snippet I am working with:

    <div class="d-flex flex-column">
        <div class="d-flex flex-row justify-content-around">
            <div class="d-flex flex-row">
                Branch Code:
                <input type="text" class="form-control" name="CTD_ITEM">
            </div>
            <div class="d-flex flex-row">
                Name:
                <input type="text" class="form-control" name="CTD_DESC01">
            </div>
        </div>
        <div class="d-flex flex-row justify-content-around">
            <div class="d-flex flex-row">
                State:
                <input type="text" class="form-control" name="CTD_DESC04">
            </div>
            <div class="d-flex flex-row">
                Abbreviation:
                <input type="text" class="form-control" name="CTD_DESC02">
            </div>
        </div>
    </div>
cssbootstrap-5

Answer №1

If you want to enhance your web design, consider utilizing the Grid System of Bootstrap - a fantastic feature offered by Bootstrap. Here is an illustrative example for creating divs:

<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818c8c979097918293a3d7cdd0cdd2">[email protected]</a>/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="row">
                    <div class="col-4">
                        Branch Code:
                    </div>
                    <div class="col-8">
                        <input type="text" class="form-control" name="CTD_ITEM">
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="row">
                    <div class="col-4">
                        Name:
                    </div>
                    <div class="col-8">
                        <input type="text" class="form-control" name="CTD_DESC01">
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-6">
                <div class="row">
                    <div class="col-4">
                        State:
                    </div>
                    <div class="col-8">
                        <input type="text" class="form-control" name="CTD_ITEM">
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="row">
                    <div class="col-4">
                        Abbreviation:
                    </div>
                    <div class="col-8">
                        <input type="text" class="form-control" name="CTD_DESC01">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95e5fae5e5f0e7bbffe6d5a4bba4a1bba2">[email protected]</a>/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c6dcc1dcc3">[email protected]</a>/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

You have the flexibility to replicate significant divs under the container div in order to include additional fields. For more information on the Grid System, visit: https://getbootstrap.com/docs/5.0/layout/grid/

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

"Step-by-step guide on adding and deleting a div element with a double click

$(".sd").dblclick(function() { $(this).parent().remove(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table width="750" border="0" cellpadding="0" cellspacing="0"> <tr> <t ...

javascriptjqueryhtmlcss

Placeholder fails to appear

After implementing some jQuery validation, I wanted to display a text as a placeholder when the user skipped out of an input field without entering anything. This is the code I wrote: $('input[type="text"]').on('blur', function() { ...

javascriptjqueryhtmlcss

How can I alter the background color while performing a transformation in JS/CSS?

I'm currently working on achieving a flipboard effect for some divs, where one side is white and the other is black. Here's what I have so far: setInterval(function () { document.getElementById('test').classList.toggle('flipped& ...

javascripthtmlcss

Looking to replace a background image using javascript?

(apologies for any language mistakes) I have multiple divs with a common background image. I assigned them the same class and set the background image using CSS in style.css which worked perfectly fine. Now, I want to change the background image dynamical ...

javascriptcssbackground-image

Data extracted from the range selector

Is there a way to take values and use them for hiding or displaying certain divs? I have been using jQuery Simple Slider for this purpose. I attempted the following code, but it did not work well. I want the div with id "3" to be visible when the slider ...

javascriptjqueryhtmlcss

Integrating a Find Pano functionality into a Kolor Panotour

I used a program called Kolor to create a panorama. Now, I am attempting to integrate the "find pano" feature, which involves searching through the panoramic images for display purposes. I have come across an HTML file that contains the search functionalit ...

javascripthtmlcsssearchpanoramas

Angular has the feature of a right float button with *ngfor

I've successfully implemented a form using Reactive Forms in Angular. Currently, my form is displayed as follows: <div class="center" appMcard> <form [formGroup]="GroupRMPM_FG"> <div formArrayName="GroupId_Name" *ngFor="let ...

htmlcssangular

How to apply styles to a child component using CSS modules in a parent component

For the styling of a Material UI component (Paper) within a Menu component, I am referencing this documentation. To style my components using CSS modules with Webpack as the bundler, here's an example: // menu.js import React from 'react'; ...

javascriptcssreactjsmaterial-uistyling

Issue with mouseMove function not aligning correctly with object-fit:contain CSS property

My current code allows users to select a color from an image when hovering over the pixel with the mouse. However, I am encountering an issue where the colors do not map correctly when using object-fit: contain for the image. The script seems to be treatin ...

javascripthtmlcssmousemoveobject-fit

Opting for css3 translate over using position: left for positioning elements

Why Using translate() for Element Movement is Superior to Pos: abs Top/left Read the full article Lisa Anderson I struggled with implementing a CSS3 translate animation, so I opted for a jQuery solution that achieves the same effect. Click on the X icon . ...

jquerycsscss-animationstranslate-animation

Ways to create a full-window image cover starting from the center point and extending to the right by 50

Seeking assistance from anyone who can help me with my current issue. I am currently utilizing bootsrap 4 and I need to come up with a solution for the following scenario: I have one element that is situated within the standard six columns, while the secon ...

htmlcssimagebootstrap-4grid

What is the best way to ensure a DIV fills the entire page without using "position: absolute;"?

I am currently working on designing a webpage layout with multiple headers, main content, and a footer. My goal is to use the jQuery UI tabs widget in the main content area with a border around it. The div should span the entire space between the headers ...

csslayouthtml

After pressing the button to access the sidebar, all I see is a plain white screen

I've been diligently working on a school project, but I'm encountering some issues with the Sidebar button in the top left corner. Whenever I click on the button, it opens up to display a blank white page. Can anyone provide me with some assistan ...

javascripthtmlcss

The performance of the animation on http://responsive-nav.com/ becomes erratic when viewed on Android devices

Recently, I came across a fantastic plugin that works perfectly on regular computer browsers. However, when I tested it on my android phone, the css3 animation for the dropdown appeared choppy and seemed to be dropping frames. Does anyone have suggestions ...

javascriptcssplugins

Containerized chatboxes with improved stability

https://i.sstatic.net/ILwsO.jpg Within the div labeled chatbox-container, there are two chatboxes that have been positioned to float: right with a margin-right: 15px. .chatbox-container { position: fixed; z-index: 1; right: 0; left: 0; ...

htmlcss

What is the procedure for adjusting the padding in Material UI's datepicker?

Click here to access the codesandbox link function InlineDatePickerDemo(props) { const [selectedDate, handleDateChange] = useState(new Date()); return ( <Fragment> <MuiPickersUtilsProvider utils={DateFnsUtils}> <Keyboa ...

cssreactjsmaterial-uidatepicker

Difficulty understanding JavaScript sum calculations

I am currently working on a website project. Seeking assistance to enable an increment of one when clicked. Also need guidance on calculating the total price of items collected in a designated section under "number of items selected". Goal is to display ...

javascripthtmlcsscumulative-sum

Encountering overlap issues when applying labels to my flexbox using the Spectre framework in CSS

I need help creating a "hat" with two textarea columns using the spectre.css framework. My goal is to have these columns resize based on the screen size, stacking on top of each other when the screen size is below 600px. I can achieve this without any issu ...

htmlcssflexboxspectre.css

Is there a way to change the border property of an element when clicked, without causing the displacement of other elements?

I'm in the process of creating a webpage where users can choose the color and storage capacity of an item. Only one color/capacity can be selected at a time, and once chosen, it should be highlighted with a border. The issue I encountered is that whe ...

javascripthtmlcsspositionborder

What is the best way to adjust image size based on different screen sizes while ensuring the buttons at the top remain responsive

How can I make the image and image select and delete buttons responsive? I am looking to eliminate the gap after the delete button. Any suggestions are welcomed. <div class="container mt-0"> <div class="row"> ...

javascripthtmlcsstwitter-bootstrap