How to Display Two Columns in Html?
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...
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.
6 Answers
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>
You can achieve this by using "table" tag:
<table>
<tr>
<td>column 1</td>
<td>column 2</td>
</tr>
</table>
You have to create a container, add a row, and create two columns in that row.
<link href="" 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:
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="">
<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:
<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>
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>
Marcus Vance is a cybersecurity auditor and technology writer dedicated to educating the public about online safety, data privacy regulations, enterprise security, and emerging cyber threats.
