CODEWITHSUNDEEP
twitter-bootstrapalignment
sharin gan
sharin gan

Reputation: 383

Bootstrap heading wrapping issue

In large grid when all headings can fit in single row[![][1]]2

In bootstrap in the large grid when "social recr.." heading needs to wrap on an another line,it creates an alignment problem for the brand identity column as its heading isnt long to align properly. how do i solve the bootstrap issue

code:

<br/>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <h3>Social Recruitment Campaigns</h3>
                    <img src="whatweCreate-SocialCampaign.png" class="img-responsive">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <h3>Brand Identity</h3>
                    <img src="whatweCreate-BrandID.png" class="img-responsive">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <h3>Responsive Career Websites</h3>
                    <img src="whatweCreate-responsive.png" class="img-responsive">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <h3>Career Videos</h3>
                    <img src="whatweCreate-CareerVideo.png" class="img-responsive">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <h3>Digital Marketing</h3>
                    <img src="whatweCreate-digitalMarketing.png" class="img-responsive">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <h3>Games</h3>
                    <img src="whatweCreat-gamese.png" class="img-responsive">
                </div>

Upvotes: 0

Views: 50

Answers (3)

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6642

The right and the most advisable way to do this using BootStrap is to create rows each for heading and for the corresponding images.

Maintain a separate first row containing headers followed by the row containing same amount of images.

Advantages:
In this way you will also reduce the chances of creating wrong grid structure for your application. Another advantage is that since the headers and images are delineated, the effort taken to do any changes for any individual element is minimal since its very modularized.

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Social Recruitment Campaigns</h3></div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Brand Identity</h3></div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Responsive Career Websites</h3></div>
</div>
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <img src="whatweCreate-responsive.png" class="img-responsive">
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <img src="whatweCreate-responsive.png" class="img-responsive">
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <img src="whatweCreate-responsive.png" class="img-responsive">
  </div>
 </div>
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Career Videos</h3></div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Digital Marketing</h3></div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Games</h3></div>
</div>
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <img src="whatweCreate-responsive.png" class="img-responsive">
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <img src="whatweCreate-responsive.png" class="img-responsive">
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <img src="whatweCreate-responsive.png" class="img-responsive">
  </div>
</div>

Here is the Fiddle

Upvotes: 0

osanger
osanger

Reputation: 2362

  1. Insert all headings in a col-md-4 div.
  2. wrap them with a col-md-12 div
  3. do the same with your images.

All images are in the same vertical-alignment now

<div class="col-md-12">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <h3>Social Recruitment Campaigns</h3>  </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <h3>Brand Identity</h3> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <h3>Responsive Career Websites</h3> </div></div> 

<div class="col-md-12">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <img src="whatweCreate-SocialCampaign.png" class="img-responsive"> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <img src="whatweCreate-BrandID.png" class="img-responsive"> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <img src="whatweCreate-responsive.png" class="img-responsive"> </div></div>

Upvotes: 1

Vetm
Vetm

Reputation: 11

You could try this:

<h3><br>Brand Identity</h3>

Not the best solution but it is easy and should work.

Upvotes: 0

Related Questions