Issue
I've got a header, paragraph and image, and I want them aligned with the header above the paragraph, and the image to the right. When I run it I get the 3 elements in a horizontal row
<div class="container">
<div class="row">
<h1 class="col-xs-3 paddingtop">Joselin</h1>
<p class="col-xs-3 bio">
Growing up in the Caribbean, as a young girl Joselin worked as a
coffee bean picker, giving her a profound insight into using only
the freshest, and highest quality coffee beans.
</p>
<img class="col-xs-6 meetus" src="meetus.jpeg">
</div>
</div>
Solution
If the h1
should be above the p
and the img
, the best thing would be to put it in its own row: <div class="row">
. Then put the p
and the img
in a row right under that.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<h1 class="paddingtop">Joselin</h1>
<p class="bio">
Growing up in the Caribbean, as a young girl Joselin worked as a
coffee bean picker, giving her a profound insight into using only
the freshest, and highest quality coffee beans.
</p>
</div>
<div class="col-xs-6">
<img class="col-xs-6 meetus" src="meetus.jpeg">
</div>
</div>
</div>
You can then play around with the column sizes (`class="col-xs-3").
Answered By - wazz Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.