How to divide a row into two columns using div

Question

Following is my code and how to divide into two columns:

<form onSubmit={handleSubmit(this.onSubmit)}>
    <div className="row">
        <div className="col-12 col-md-8">
            <div className="col-12 col-md-3">
                <label>Promotional Code</label>
            </div>
            <div className="col-12 col-md-3">
                <label>Promotional Code</label>
            </div>
        </div>
    </div>
</form>

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

3

Change this:

<div className="col-12 col-md-3">

to this:

<div className="col-6 col-md-3">

col-12 is you can say 100% of the width then to break it in half you can use col-6. You can check this to learn more about 12 column layout.

Note:- If you want it to be in two columns in each devices then you have to use different classes on the single node like:

col-6 col-lg-6 - for desktops
col-md-6 - for tablets
col-sm-6 - for phones

Another answer on SO for the same.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 28 '20 at 07:18

Jai

74,255
12
74
103

@MadhumiMunasinghe can you elaborate more about this. _still not working_....doesn't help to give you a better answer. – Jai Feb 28 '20 at 07:24
@MadhumiMunasinghe Only on the 2 divs that are around the `Promotional Code `. Not the parent div of those 2 – Loko Feb 28 '20 at 07:37

score 1 · Accepted Answer · answered Feb 28 '20 at 07:40

This is using flex styles for displaying a row with two columns

<form onSubmit={handleSubmit(this.onSubmit)}>
          <div style={{display: 'flex', flexDirection: 'row'}}>
               <div style={{display: 'flex', flexDirection: 'column'}}>
                    <label>Promotional Code</label>
               </div>

               <div style={{display: 'flex', flexDirection: 'column'}}> 
                    <label>Promotional Code</label>
               </div>
           </div>
    </form>

score 0 · Answer 3 · answered Feb 28 '20 at 07:23

0

Replace your code with below one -

   <form onSubmit={handleSubmit(this.onSubmit)}>
      <div className="row">
        <div className="col-sm-12 col-md-8">
          <div className="col-sm-6 col-md-3">
            <label>Promotional Code</label>
          </div>

          <div className="col-sm-6 col-md-3">
            <label>Promotional Code</label>
          </div>
        </div>
      </div>
    </form>

answered Feb 28 '20 at 07:23

Alok Mali

2,821
2
16
32

I replaced but still it gives the same output. The divs are not separated to two columns – Madhumi Munasinghe Feb 28 '20 at 07:30

faizan · Answer 4 · 2020-02-28T07:29:21.743

  <form onSubmit={handleSubmit(this.onSubmit)}>
      <div className="row">
        <div className="col-lg-6 col-md-3">
          <div className="col-12 col-md-3">
            <label>Promotional Code</label>
          </div>

          <div className="col-lg-6 col-md-3">
            <label>Promotional Code</label>
          </div>
        </div>
      </div>
 </form>

For More Help: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

score 0 · Answer 5 · answered Feb 28 '20 at 07:34

Hi use flex as it gives more flexibility if you have nested row columns

 <form onSubmit={handleSubmit(this.onSubmit)}>
          <div style={{display: 'flex', justifyContent: 'space-around'}}>
              <div>
                <div>Promotional Code</div>
              </div>
              <div>
                <div>Promotional Code</div>
              </div>
           </div>
        </form>

dio.omd · Answer 6 · 2020-02-28T09:50:25.650

0

Add .d-flex .flex-row. Like below:

<form onSubmit={handleSubmit(this.submit)}> <div className="row no-gutters"> <div className="col-12 col-md-8"> <div className="d-flex flex-row"> <div className="col-12 col-md-3"> <label>Promotional Code</label> </div> <div className="col-12 col-md-3"> <label>Promotional Code</label> </div> </div> </div> </div> </form>

edited Feb 28 '20 at 09:50

answered Feb 28 '20 at 09:44

dio.omd

9
3

Welcome to stackoverflow, please edit your answer, as it currently stand it is not possible to understand what the code does. Provide an example and an explanation to your solution. – Pierre Chevallier Feb 28 '20 at 09:50

How to divide a row into two columns using div

6 Answers6

Another answer on SO for the same.