How to align headings horizontally in two independent cols in bootstrap? - html

I would like to do the following:
I have a Bootstrap layout with Descriptions of two employees.
<div class="container">
<div class="row">
<div class="col-md-6">
EMPLOYE1
HEADING1
HEADING2
HEADING3
...
</div>
<div class="col-md-6">
EMPLOYE2
HEADING1
HEADING2
HEADING3
...
</div>
</div>
</div>
How do I...
Align Heading1 with Heading1, Heading2 with Heading2, ... if the cols are beside each other?
Not care about the Heading alignment if the cols are below each other?
I have searched google/duckduckgo but it seems that there are too many alignment issues with alignment in html. Or maybe what I'm trying is just not possible?

Related

Changing a bootstrap template that already has a div container and div row

I am attempting to use a basic bootstrap template, I have added a:
<div class="container"><div class="row">
<div class="col-md-6">
<p>This is the text I would like to align left</p>.
</div>
</div>
However the bootstrap template I have used has text center align - how do I add a rule just for this paragraph to align left ? (where and what would it be called?)
I should add that I have one css document for the website and can't add to the main class - I need to make a rule just for this area.
<div class="container">
<div class="row">
<div class="col-md-6">
<p class = "text-left">This is the text I would like to align left</p>
</div>
</div>
</div>
Use this it will align the left side. (class = "text-left" on the paragraph tag).
You forgot to close your row div also "text-left" class should be used there like this:
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="text-left">This is the text I would like to align left</p>.
</div>
</div>
</div>

Create the same height in a panel-box with a different length of text by bootstrap

I've created a bootstrap theme with 4 panel boxes and with text in it.
Three of the boxes have have 3 snetence in one of the box is only 1 sentence.
The Problem is, that the three boxes have a different height than the one box with the little text.
Is there a CSS option to create the panel - boxes with the same height, does not matters how much text are in the boxes?
Edit:
Here the code
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Heading</h3></div>
<div class="panel-body ">
<p>Much Text, to much for here :)</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can try just making a table, or you can use display:table on the element which contains the boxes, and display:table-cell on the boxes.
You can also try using a flex grid.
How do I keep two divs that are side by side the same height?

Stacking 2 divs on top

I've used Bootstrap in the past but cannot find how to do a basic stacking of 2 divs, it's basically 2 col-lg-6 divs sat on top of each other but against one div to the left of it (see picture).
How should the HTML look for this? Should it all be in the one row or is there special classes for doing this?
so you will want a row, inside that row you want a col-6 division. on the 2nd division, just add stuff
DEMO: http://jsbin.com/hikopu/1/
<div class="row">
<div class="col-lg-6">
[left]
</div>
<div class="col-lg-6">
[right]
<div class="col-lg-12">
[right top]
</div>
<div class="col-lg-12">
[right bottom]
</div>
</div>
</div>

bootstrap: Insert <hr/> at responsive

I am designing a website using the responsive Bootstrap framework.
I have 3 content areas next each other (horizontally). If I have a small display, these 2 contents are under each other (typical responsive design).
Now I want to add a <hr/> after each content block that is under each other.
<div class="row-fluid content">
<div class="span4">test1</div>
<div class="span4">test2</div>
<div class="span4">test3</div>
</div>
This is the whole code for a big display.
On some displays there are 2 blocks horizontal and 1 block under the 2 blocks.
Then I want to insert a <hr/> between the 2 lines.
Bootstrap provides classes to manage the visibility of any element by device, based on media queries. You have to place <hr/> elements wich are only visible in specific viewports:
<div class="row-fluid content">
<div class="span4">test1</div>
<hr class="visible-phone"/>
<div class="span4">test2</div>
<hr class="visible-phone"/>
<div class="span4">test3</div>
</div>
Check the documentation for more Responsive utility classes.

960 grid system - Difficulty achieiving desired layout with

I'm currently in the process of designing part of my web page, but have encountered difficulty positioning the contact cards as they appear below:
Currently the second column of contact cards is not vertically aligned because of the follwing markup structure. The <h2 class="text200 margbottom margtop">Contact Us</h2> is 'pushing' the other 2 contact cards in the first grid 4 down vertically, but of course this is not happening in the second grid 4 as no <h2> is present. Is there any way to have the contact cards positioned at the same height so they are aligned horizontally as shown in the image above by amending my HTML markup?
Here is the link: http://www.bestcastleintown.co.uk/pg/
<div class="grid_4">
<h2 class="text200 margbottom margtop">Contact Us</h2>
<div class="contact_block_tiny trophy clearfix">
<!-- content -->
</div>
<div class="contact_block_tiny target clearfix">
<!-- content -->
</div>
</div>
<div class="grid_4 omega">
<div class="contact_block_tiny drink clearfix">
<!-- content -->
</div>
<div class="contact_block_tiny editorial clearfix">
<!-- content -->
</div>
</div>
Is the "Contact Us" the heading for the first column or for both columns? If it is the heading for both columns, then why do you put it inside the first column? That's not where it belongs semantically, and consequentially breaks your layout.