How to display two columns in HTML?

Question

I want to display 2 columns using HTML (responsive). The 1st column, the name of the event whereas the 2nd column is the time of the event. How do I go about this? Below is the screenshot I have attached.

Are you using vanilla HTML or a CSS framework (Bootstrap, etc)? — Aditya R, Oct 29 '17 at 04:18
Can't understand why you don't know about grid layout system of Bootstrap: http://getbootstrap.com/docs/4.0/layout/grid/ — Argus Duong, Oct 29 '17 at 04:34
I am a newbie so I don't really understand how the grid system works @AnhTuan — Sabrina Said, Oct 29 '17 at 05:08

score 5 · Answer 1 · edited Oct 08 '20 at 17:45

This is a piece of cake with Bootstrap.

    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                First Column
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                Second Column
            </div>
        </div>
    </div>

score 3 · Answer 2 · edited Oct 29 '17 at 05:45

3

You can achieve this by using "table" tag:

<table>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
  </tr>
</table>

edited Oct 29 '17 at 05:45

Rob

2,243
4
29
40

answered Oct 29 '17 at 04:36

Yogesh Choudhary Paliyal

604
1
8
23

Aditya R · Answer 3 · 2017-10-29T18:31:04.253

1

You have to create a container, add a row, and create two columns in that row.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      Column 1
    </div>
    <div class="col">
      Column 2
    </div>
  </div>
</div>

Read more about the Bootstrap grid system, including how to resize columns, here: https://getbootstrap.com/docs/4.0/layout/grid/

edited Oct 29 '17 at 18:31

answered Oct 29 '17 at 04:26

Aditya R

567
4
17

1

You forgot closing tag of `.row` – Argus Duong Oct 29 '17 at 04:28
It should be fixed now – Aditya R Oct 29 '17 at 04:30
then what about the ceret down icon next to the column 2? do I need to add a new column for that also? @AppleCrazy – Sabrina Said Oct 29 '17 at 05:12
My mistake. It should be a closing tag. – Aditya R Oct 29 '17 at 18:31

score 0 · Answer 4 · answered Oct 29 '17 at 05:00

Create a container then put it inside the column. The whole width of a browser is equals to 12 columns, if you want two columns then divide the 12 columns by 2 so the answer is 6 columns. This is an example of a responsive bootstrap 2 columns.

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


<div class="container">
    <div class="col-lg-6 col-md-6  col-sm-12" style="background-color: red">
      Column 1
    </div>
    <div class="col-lg-6 col-md-6  col-sm-12" style="background-color: green">
      Column 2
    </div
<div>

Output:

score 0 · Answer 5 · answered Nov 06 '17 at 01:47

0

<div class="container">
    <div class="col-lg-6 col-md-6 >
      Column 1
    </div>
    <div class="col-lg-6 col-md-6 >
      Column 2
    </div
<div>

answered Nov 06 '17 at 01:47

score -4 · Answer 6 · answered Oct 29 '17 at 04:21

-4

You need to use a table. Something like this:

<!DOCTYPE html>
<html>
<body>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Time</th> 
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>   
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>  
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

</body>
</html>

answered Oct 29 '17 at 04:21

Will Ansell

1
4

1

I think using table will not responsive when he need it. – Argus Duong Oct 29 '17 at 04:26

How to display two columns in HTML?

6 Answers6