How to divide a page into two columns?

Hello! here is my code:



 <title>Bootstrap 101 Template</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <link href="css/dopstyle.css" rel="stylesheet">

 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->


<div class="col-md-6 col-md-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
 <h3 class="panel-title" align="center"><i class="fa fa-lock"></i> Authorize</h3>
</div>
<div class="panel-body">
<div class="panel-body">

<div class="form-group">
<div class="col-lg-6">

ID
<input type="text" size="20" name="name">

</div>
</div>

<div class="form-group">
<div class="col-lg-8">
<p>Gender<input type="radio" name="Sex" value="Male">Husband.
<input type="radio" name="Sex" value="Female">Wife.</p> 
</div>
</div>

<div class="form-group">
<div class="col-lg-8">
<p>Projects 
<select>
<option>111111111</option>
<option>22222222222</option>
<option>33333333</option>
</select> 
</p>

<div class="pull-left">
<button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-sign-in fa-lg"></i> Add</button>
</div>
</div> 
 </div> 
<!-- jQuery (necessary for Bootstrap''s JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</div>
</div>
</div>
</div>


The result:18ba2dbbdf0e4220b3679c7c9ad2f13b.PNG
I need to divide the page into 2 columns. ID,gender,projects should be in one column, and everything else on the other; still it must be center-aligned. I tried to put ID,gender,class projects separately,"row", but it turned out not very nice. Maybe you can help?)
July 2nd 19 at 18:01
3 answers
July 2nd 19 at 18:03
Solution
Divide the page in Bootstrap in two parts in the following simple code (schematically):
<div class="container">
 <div class="row">
 <div class="col-xs-12 text-center">Authorization</div>//your code inside
</div>
 <div class="row">
 <div class="col-xs-4">ID</div>//your code inside
 <div class="col-xs-8">input</div>//your code inside
</div>
 <div class="row">
 <div class="col-xs-4">Gender</div>//your code inside
 <div class="col-xs-8">RadioButton</div>//your code inside
</div>
 <div class="row">
 <div class="col-xs-4">Projects</div>your code inside
 <div class="col-xs-8">List</div>your code inside
</div>
 <div class="row">
 <div class="col-xs-12 text-center">button</div>your code inside
</div>
</div>


here sketched, styles, just add the jsfiddle
: I have ID - form,Gender - radio buttons,projects-the list does not correspond, ie not exactly work. Can this somehow fix it? - Antone.Stracke commented on July 2nd 19 at 18:06
not quite understand what exactly not exactly? - Missouri.Terry commented on July 2nd 19 at 18:09
: I would do it differently laid out - Missouri.Terry commented on July 2nd 19 at 18:12
For example, look at the word "Projects" drop-down list, they are not the same, the result. - Antone.Stracke commented on July 2nd 19 at 18:15
: and how differently?) - Antone.Stracke commented on July 2nd 19 at 18:18
: now write - Missouri.Terry commented on July 2nd 19 at 18:21
: changed the answer, but I don't know you have it on full width of the screen or half will be placed? - Missouri.Terry commented on July 2nd 19 at 18:24
: thank you very much) tomorrow will look and write)and now to sleep - Antone.Stracke commented on July 2nd 19 at 18:27
good luck - Missouri.Terry commented on July 2nd 19 at 18:30
: I used another code)ogromnoe thank you, no you have not understood)) - Antone.Stracke commented on July 2nd 19 at 18:33
July 2nd 19 at 18:05
Solution
Two columns is:
<div class="row">
 <div class="col-lg-6 col-md-6">column 1</div>
 <div class="col-lg-6 col-md-6">column 2</div>
</div>

That's all you need to know about bootstrap ))
col-lg-6 in your example too can be removed. And all in a container wrapped) - Antone.Stracke commented on July 2nd 19 at 18:08
July 2nd 19 at 18:07
3f7a8f6ce6dc47b3ab1e7e7022d614f3.PNG

Find more questions by tags Bootstrap