2

I'm currently building a responsive website with bootstrap but I've faced an issue, with reference to the code below, I'm unable to have them "align" with each other.

This rough sketch would be what I want my end result to turn out 

<div class="container">
<div class="row-fluid">


<div class="col-sm-6 col-md-4">
<h3><a href="#" onclick="hide;" >1Cross-country cycling</a></h3>
<p>Cross-country cycling is defined by the terrain on which it is performed. XC courses and trails consist of a mix of rough forest paths and singletrack (also referred to as doubletrack depending on width), smooth fireroads, and even paved paths connecting other trails. Riding or racing is also only deemed cross-country if the technical complexity of the trails is easy or moderate. Trails difficult even to experienced riders are more often dubbed "all-mountain", "freeride", or "downhill".</p>
</div>

<div class="col-sm-6 col-md-4">
<h3><a href="#">2Mountain bike trials</a></h3>
<p>Trials riding is an extreme test of bicycle handling skills, over all kinds of obstacles, both natural and man-made. It now has a strong - though small - following worldwide, though it is still primarily a European sport. Skills taken from trials riding can be used practically on any bicycle for balance, for example controlled braking and track standing, or balancing on the bike without putting a foot down. Competition trial bikes are characterized by powerful brakes, wide handlebars, lightweight parts, single-speed low gearing, low tire pressures with a thick rear tire, distinctive frame geometry, and usually no seat.</p>
</div>

<div class="col-sm-6 col-md-4">
<h3><a href="#">3Enduro</a></h3>
<p>Enduro is a form of Mountain bike racing in which there is a number of timed downhill sections of trail, and a number of uphill transfer stages, which are not timed, but might have time limits to complete. It is a stage-race format where the winner is the rider who accumulates the lowest combined time from the various timed sections. Mountain bike enduro competitions typically take place over the course of 1 or 2 days, however, week-long enduro competitions do also exist.</p>
</div>

<div class="col-sm-6 col-md-4">
<h3><a href="#">4Freeride </a></h3>
<p>The term freeriding was originally coined by snowboarders, meaning riding without a set course, goals or rules on natural terrain. In mountain biking, it is riding trail with the most creative line possible that includes style, amplitude, control, and speed.</p>
</div>

<div class="col-sm-6 col-md-4">
<h3><a href="#">5Dirt jumping</a></h3>
<p>Dirt jumping is one of the names given to the practice of riding bikes over cement type jumps of dirt or soil and becoming airborne. The idea is that after riding over the 'take off' the rider will become momentarily airborne, and aim to land on the 'landing'.</p>
</div>

<div class="col-sm-6 col-md-4">
<h3><a href="#">6Downhill mountain biking (DH)</a></h3>
<p>Downhill mountain biking (DH) is a genre of mountain biking practiced on steep, rough terrain that often features jumps, drops, rock gardens and other obstacles. Downhill bikes are heavier and stronger than other mountain bikes and feature front and rear suspension with over 8 inches (200mm) or (20cm) of travel, to glide quickly over rocks and tree roots. 
</p>
</div>


</div>
</div>

view my JSFiddle here : https://jsfiddle.net/he4rtbr0ken/gcc3oxoj/1/

Weiping
  • 53
  • 3

4 Answers4

1

If you want horizontal align, you need same height, id est, you need to force the same height.

for example

.my-div{
   height: 400px;
 }

If you add the class my-div, in divs, class="col-sm-6 col-md-4 my-div"you can get the desired result, if the height of elements are less then 400px...

You can set the heights of all divs, using the next javascript + dom code (for example):

function set_max_height (){
 var div = document.getElementById("main-row"); // main-row is the parent div of the list...
  if(!div) return ; 
  var divs= div.getElementsByTagName("div");
  if(!divs) return; 
  var L = divs.length;
  var maxHeight = 0;
  for(var i=0; i<L; i++){
   var mh = divs[i].offsetHeight;
   if(mh > maxHeight) maxHeight = mh;
  }
  for(var i=0; i<L; i++){
    divs[i].style.height = maxHeight.toString() + "px"; 
  }
}

You can use this function in a "onload" event, or in

Jose Manuel Casal
  • 21
  • 3
1

Weiping Hi there.
You may find it better just to add 2 items per row.
You will run into a problem with using a fixed height with the text when the div is compressed.

Have a look at this FIDDLE HERE.

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">  
<body>
 <!--column examples-->
  <div class="container">
    <div class="row">


      <div class="col-md-4 col-sm-6">
        <h3><a href="#" onclick="hide;" >1Cross-country cycling</a></h3>
        <p>Cross-country cycling is defined by the terrain on which it is performed. XC courses and trails consist of a mix of rough forest paths and singletrack (also referred to as doubletrack depending on width), smooth fireroads, and even paved paths
          connecting other trails. Riding or racing is also only deemed cross-country if the technical complexity of the trails is easy or moderate. Trails difficult even to experienced riders are more often dubbed "all-mountain", "freeride", or "downhill".</p>
      </div>

      <div class="col-md-4 col-sm-6">
        <h3><a href="#">2Mountain bike trials</a></h3>
        <p>Trials riding is an extreme test of bicycle handling skills, over all kinds of obstacles, both natural and man-made. It now has a strong - though small - following worldwide, though it is still primarily a European sport. Skills taken from trials
          riding can be used practically on any bicycle for balance, for example controlled braking and track standing, or balancing on the bike without putting a foot down. Competition trial bikes are characterized by powerful brakes, wide handlebars,
          lightweight parts, single-speed low gearing, low tire pressures with a thick rear tire, distinctive frame geometry, and usually no seat.</p>
      </div>
</div><!-- end row -->
<div class="row">

      <div class="col-md-4 col-sm-6">
        <h3><a href="#">3Enduro</a></h3>
        <p>Enduro is a form of Mountain bike racing in which there is a number of timed downhill sections of trail, and a number of uphill transfer stages, which are not timed, but might have time limits to complete. It is a stage-race format where the winner
          is the rider who accumulates the lowest combined time from the various timed sections. Mountain bike enduro competitions typically take place over the course of 1 or 2 days, however, week-long enduro competitions do also exist.</p>
      </div>

      <div class="col-md-4 col-sm-6">
        <h3><a href="#">4Freeride </a></h3>
        <p>The term freeriding was originally coined by snowboarders, meaning riding without a set course, goals or rules on natural terrain. In mountain biking, it is riding trail with the most creative line possible that includes style, amplitude, control,
          and speed.</p>
      </div>
</div><!-- end row -->
<div class="row">

      <div class="col-md-4 col-sm-6">
        <h3><a href="#">5Dirt jumping</a></h3>
        <p>Dirt jumping is one of the names given to the practice of riding bikes over cement type jumps of dirt or soil and becoming airborne. The idea is that after riding over the 'take off' the rider will become momentarily airborne, and aim to land
          on the 'landing'.</p>
      </div>

      <div class="col-md-4 col-sm-6">
        <h3><a href="#">6Downhill mountain biking (DH)</a></h3>
        <p>Downhill mountain biking (DH) is a genre of mountain biking practiced on steep, rough terrain that often features jumps, drops, rock gardens and other obstacles. Downhill bikes are heavier and stronger than other mountain bikes and feature front
          and rear suspension with over 8 inches (200mm) or (20cm) of travel, to glide quickly over rocks and tree roots.
        </p>
      </div>
</div><!-- end row -->

 </div>

</body>  
</body>
</html>
AngularJR
  • 2,752
  • 2
  • 16
  • 19
1

According to the image you provided for the sketch you want I think this is what you are looking for:

<div class="container">
        <div class="row">
            <div class="col-sm-2">
                <h3><a href="#" onclick="hide;">1Cross-country cycling</a></h3>
                <p>Cross-country cycling is defined by the terrain on which it is performed. XC courses and trails consist of a mix of rough forest paths and singletrack (also referred to as doubletrack depending on width), smooth fireroads, and even paved paths connecting other trails. Riding or racing is also only deemed cross-country if the technical complexity of the trails is easy or moderate. Trails difficult even to experienced riders are more often dubbed "all-mountain", "freeride", or "downhill".</p>
            </div>

            <div class="col-sm-2">
                <h3><a href="#">2Mountain bike trials</a></h3>
                <p>Trials riding is an extreme test of bicycle handling skills, over all kinds of obstacles, both natural and man-made. It now has a strong - though small - following worldwide, though it is still primarily a European sport. Skills taken from trials riding can be used practically on any bicycle for balance, for example controlled braking and track standing, or balancing on the bike without putting a foot down. Competition trial bikes are characterized by powerful brakes, wide handlebars, lightweight parts, single-speed low gearing, low tire pressures with a thick rear tire, distinctive frame geometry, and usually no seat.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2">
                <h3><a href="#">3Enduro</a></h3>
                <p>Enduro is a form of Mountain bike racing in which there is a number of timed downhill sections of trail, and a number of uphill transfer stages, which are not timed, but might have time limits to complete. It is a stage-race format where the winner is the rider who accumulates the lowest combined time from the various timed sections. Mountain bike enduro competitions typically take place over the course of 1 or 2 days, however, week-long enduro competitions do also exist.</p>
            </div>

            <div class="col-sm-2">
                <h3><a href="#">4Freeride </a></h3>
                <p>The term freeriding was originally coined by snowboarders, meaning riding without a set course, goals or rules on natural terrain. In mountain biking, it is riding trail with the most creative line possible that includes style, amplitude, control, and speed.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2">
                <h3><a href="#">5Dirt jumping</a></h3>
                <p>Dirt jumping is one of the names given to the practice of riding bikes over cement type jumps of dirt or soil and becoming airborne. The idea is that after riding over the 'take off' the rider will become momentarily airborne, and aim to land on the 'landing'.</p>
            </div>

            <div class="col-sm-2">
                <h3><a href="#">6Downhill mountain biking (DH)</a></h3>
                <p>
                    Downhill mountain biking (DH) is a genre of mountain biking practiced on steep, rough terrain that often features jumps, drops, rock gardens and other obstacles. Downhill bikes are heavier and stronger than other mountain bikes and feature front and rear suspension with over 8 inches (200mm) or (20cm) of travel, to glide quickly over rocks and tree roots.
                </p>
            </div>
        </div>
    </div>
Ashraf Sada
  • 4,527
  • 2
  • 44
  • 48
0

I wanted the page to be as responsive as possible e.g. 3 cols for col-md, 2 for col-sm, and 1 for col-xs.

I used the script from Use jQuery/CSS to find the tallest of all elements to get the tallest height then set the height of the class to the tallest height. 

$().ready(function() {

  var maxHeight = 0;

  $('.col-sm-6').each(function() {
    maxHeight = maxHeight > $('.col-sm-6').height() ? maxHeight : $('.col-sm-6').height();
  });

  $('.col-sm-6').each(function() {
    $('.col-sm-6').height(maxHeight);
  });


  console.log(maxHeight)
  console.log("loaded")
})

Here's my solution in JSFiddle : https://jsfiddle.net/he4rtbr0ken/gcc3oxoj/9/

Community
  • 1
  • 1
Weiping
  • 53
  • 3