Looking for some guidance with Bootstrap column layouts

I'm in the process of creating an address field layout. My goal is to have the State and Country sections positioned on the right side of the city and postal code fields.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="col-sm-12 col-md-6 col-lg-6">

  <div class="need-info">
    <p class="info-title">Please Input Your Address.</p>
    <input type="text" class="form-control" placeholder="Address Line 1">
  </div>

  <div class="need-info">
    <input type="text" class="form-control" placeholder="Address Line 2">
  </div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
  <div class="need-info">
    <input type="text" class="form-control" placeholder="City">
  </div>
  <div class="need-info">
    <input type="number" class="form-control" placeholder="Postal Code">
  </div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
  <div class="need-info">
    <input type="text" class="form-control" placeholder="State">
  </div>
  <div class="need-info">
    <input type="text" class="form-control" placeholder="Country">
  </div>
</div>

cssbootstrap-4

Answer №1

If you make a few adjustments to your current code, you can achieve the desired result...

  • When the screen is small, make sure the content spans across all 12 columns
  • Otherwise, use 6 columns each for the postal code, city, country, and state

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="col-sm-12 col-md-12 ">

  <div class="need-info">
    <p class="info-title">Please Enter Your Address.</p>
    <input type="text" class="form-control" placeholder="Address line 1">
  </div>

  <div class="need-info">
    <input type="text" class="form-control" placeholder="Address line 2">
  </div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
  <div class='row'>
    <div class="col-12 col-sm-6">
      <div class="need-info">
        <input type="text" class="form-control" placeholder="City">
      </div>
    </div>
    <div class="col-12 col-sm-6 ">
      <div class="need-info">
        <input type="text" class="form-control" placeholder="State">
      </div>
    </div>
    <div class="col-12 col-sm-6 ">
      <div class="need-info">
        <input type="text" class="form-control" placeholder="Postal Code">
      </div>
    </div>
    <div class="col-12 col-sm-6 ">
      <div class="need-info">
        <input type="text" class="form-control" placeholder="Country">
      </div>

    </div>

  </div>
</div>

Answer №2

Feel free to give this layout a try.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="row">
    <div class="col-md-12">
        <div class="need-info">
            <p class="info-title">Please Input Your Address:</p>
            <input type="text" class="form-control" placeholder="Address Line 1.">
        </div>
        <div class="need-info">
            <input type="text" class="form-control" placeholder="Address Line 2.">
        </div>
    </div>
    <div class="col-md-6">
        <div class="need-info">
            <input type="text" class="form-control" placeholder="City">
        </div>
    </div>
    <div class="col-md-6">
        <div class="need-info">
            <input type="text" class="form-control" placeholder="State">
        </div>
    </div>
    <div class="col-md-6">
        <div class="need-info">
            <input type="number" class="form-control" placeholder="Postal Code">
        </div>
    </div>
    <div class="col-md-6">
        <div class="need-info">
            <input type="text" class="form-control" placeholder="Country">
        </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

Creating a text input that spans the full width of the form in a Bootstrap

I'm having trouble creating a text box that spans the entire width of my container. <div class="row"> <div class="col-md-12"> <form class="form-inline" role="form"> <input type="text" class= ...

htmlcsstwitter-bootstrap-3

Why is the Slick Slider displaying previous and next buttons instead of icons?

I'm currently working on creating a slider using the slick slider. Everything seems to be functioning properly, but instead of displaying arrows on the sides, it's showing Previous and Next buttons stacked vertically on the left side. It appears ...

javascripthtmljquerycssslick.js

What could be causing my Next.js layout to re-render?

I currently have a basic root layout set up in Nextjs (app router) that displays a navigation bar and the child components underneath it. ROOT LAYOUT import "./globals.css"; import type { Metadata } from "next"; import { Inter } from & ...

htmlcssreactjsnext.js

Adjust the horizontal position of a text element using CSS

I am faced with a specific challenge where I need to center the text "test" within a text tag using only CSS, without being able to directly change the HTML. <text width="13.89" height="13.89" x="291.46999999999997" y="156.55" transform= ...

javascripthtmlcsssvg

Adjust the color of the font within a div element when hovering over it

I've been attempting to modify the text color and add an underline when a user hovers over it. Despite trying various methods, I haven't been successful. I scoured the internet for a solution but couldn't find one that met my specific requi ...

javascripthtmlcss

Trouble with saving the positioning after drag and drop

I am currently facing an issue with my drag-and-drop script where the coordinates of positioned relative divs are not being saved in the same position when I reload. These divs are contained within a container with specific height and width, restricting t ...

phpjavascriptjqueryhtmlcss

What is the best way to showcase the final div at the top with CSS?

I'm working with 4 separate divs, with the last one acting as a footer. Is there a way to position this last div at the top using CSS? ...

csslayouthtml

How can I modify the custom CSS to adjust the color of a Font Awesome icon?

Hello everyone! I am new to coding and I have a question for the Stack Overflow community. I am trying to customize the color of my Font Awesome icons on the homepage of my WordPress theme (Arcade Pro) using the custom CSS editor. Can anyone provide me w ...

htmlcsswordpressfont-awesome

Achieving a full width vertical navigation on the left side using Bootstrap's grid system: a step-by

I am looking to design an admin panel using bootstrap. To start off, I want to create a navigation menu on the left side. However, I encountered an issue where my navigation menu with a red background does not stretch the full width of the left column. Her ...

htmlcsstwitter-bootstrapbootstrap-4

Target the CSS element with a specific class only if it is not the first child within its parent

In my coding project, I have created a div.container which contains multiple p elements. Some of these p elements have the class p.special. My goal is to select the p.special elements that are not positioned at the very top of the parent container (i.e., n ...

htmlcsscss-selectors

Adjust the size of every card in a row when one card is resized

At the top of the page, I have four cards that are visible. Each card's height adjusts based on its content and will resize when the window size is changed. My goal is to ensure that all cards in the same row have equal heights. To see a demo, visit: ...

javascriptjquerycssangular

focusing on a specific category within a CSS identifier

My goal is to specifically target the class .page-has-children within this code snippet: <div id="dc_jqverticalmegamenu_widget-2" class="widget sidebarwidget "> <div class="dcjq-vertical-mega-menu" id="dc_jqverticalmegamenu_widget-2-item"> ...

csswordpress

Adding a gradient overlay to an image that has a see-through background

I am trying to achieve a unique effect where a gradient appears on the text instead of the background of an image. An example I created can be found here: https://codepen.io/BenSagiStuff/pen/BaYKbNj body{ background: black; } img{ padding: 30px; ...

csssvg

Organize the Div elements in the form of a message

Here is the code I am working with: https://jsfiddle.net/bdqgszv5/1/ This is the same code without jsfiddle: <section id="aussteller" class="row separated"> <div class="section-header text-center"> <h2& ...

htmlcsstwitter-bootstrap

What is the best way to horizontally center my HTML tables and ensure that they all have uniform widths?

I'm currently facing an issue where I'd like to center align all tables similar to the 'Ruby Table.' However, I'm unsure of how to achieve this. You may also observe that some tables have varying widths. What CSS rule can I apply ...

htmlcsshtml-table

Tips for properly filling empty spaces in a flexbox layout using HTML

Is there a way to fill in the gap using CSS so that boxes automatically take up the empty spaces, even if they are of different sizes? How can I make sure the boxes adjust automatically as the screen size changes? .c1 { display: flex; flex-wrap: w ...

htmlcss

Tips for reducing text in a card design

As a newcomer to codeigniter 4, I recently created an event card with a lengthy description. However, when I attempted to display the event data from the database on the card, it ended up becoming elongated due to the length of the description: https://i. ...

phpcsscodeigniterbootstrap-5card

What steps can be taken to resolve the field error problem in Django?

While attempting to move from the list page to the detail page, I encountered an error related to a field error. To address this, I added an empty Slug field in the models, but it resulted in a page not found error. https://i.sstatic.net/LCptK.png #urls ...

postgresqlbootstrap-4django-2.0

Interactive Material Icons with Hover Effects in CSS

I'm having trouble adding a hover effect to material icons in my code. Despite everything else looking good, the hover effect is not working as expected. Below is the code snippet I've been using: import ManageAccountsIcon from '@mui/icons-m ...

cssreactjsuser-interfacematerial-uihover

Tips for customizing the appearance of a functional stateless component in Reactjs using class objects

I am looking to create a functional stateless component in ReactJs following the guidelines outlined here. const MyBlueButton = props => { const styles = { background: 'blue', color: 'white' }; return <button {...props} sty ...

cssreactjsmaterial-uijsx