span grid in bootstrap v2.3.0

I am using Bootstrap v2.3.0 to design footer content. I am trying to use the bootstrap grid to order my columns. In v2.3.0 by using span(adding up to 12 cols), my columns are not covering the entire row. Only in 980px screen, it's covering the entire row. But when screen size gets larger than 980px, some space is getting left or uncovered on the right side. I want the 3rd span part to be in the extreme right of the screen.

Please refer to the image for the output of my code. (https://i.stack.imgur.com/SlfyQ.png)

Actually I want my output like below code: [Required or Expected output][1]

<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap.css" rel="stylesheet" />
<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">.col-sm-6</div>
    <div class="col-sm-6" style="background-color:lavenderblush;">
      <div style="float:right;">.col-sm-6_Part-2</div>
      <div style="float:right; padding-right: 100px">.col-sm-6_Part-1</div>
    </div>
  </div>
</div>

Here. I know you are using bootstrap v2 and I understand why but do this.

Do this

<div class="row" style="display: flex; justify-content: space-between">

I did inline style to not destroy other parts of code because bootstrap v2 is really old and I don't know how it will work if you put this CSS globally for every row element

It will put first span to left second span to center and third span to right of the screen.

Is this what you want to do? If not then post in comments.

UPDATE

If you only want to push the third element to the right and leave other two on their current places you can do this

<div class="span4" style="background-color:lavender; float: right">span4</div>

It will float that element to the far right of its parent

UPDATE 2

Based on new info I got from comment here is the solution

<div class="row">

You need

<div class="row-fluid">

row-fluid will take the whole width of parent and spans will stretch

This is a bootstrap 2 feature. Read more about it here

span grid in bootstrap v2.3.0, Here. I know you are using bootstrap v2 and I understand why but do this. Do this <div class="row" style="display: flex; justify-content:� Basic grid HTML. For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

Replace row class with row-fluid:

<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row-fluid">
    <div class="span4" style="background-color:lavender;">span4</div>
    <div class="span4" style="background-color:lavenderblush;">span4</div>
    <div class="span4" style="background-color:lavender;">span4</div>
  </div>
</div>

CSS � Bootstrap, Latest (4.x) � v4 Alpha 6 � v3.4.1 � v3.3.7 � v2.3.2 With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. Predefined grid classes like .row and .col-xs-4 are available for quickly making Grid columns are created by specifying the number of twelve available columns you wish to span. Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes. Block level inputs Make any <input> or <textarea> element behave like a block level element.

check this: minimum amount of code:

        <div class="container-fluid">
            <h1>Hello World!</h1>
            <div class="row">
                <div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
                <div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavenderblush;">span4</div>
                <div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
            </div>
        </div>

check :https://jsfiddle.net/sugandhnikhil/ut8d0j3m/

Grid system � Bootstrap, <div class="container"> <div class="row"> <div class="col"> 1 of 2 </div> <div Create equal-width columns that span multiple rows by inserting a .w-100 where � Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well. Packed with features. A 12-column responsive grid , dozens of components, JavaScript plugins , typography, form controls, and even a web-based Customizer to make Bootstrap your own.

Migrating to v3.x � Bootstrap, This table shows the style changes between v2.x and v3.0. Bootstrap 2.x, Bootstrap 3.0 .row-fluid . Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left. (previously .media-grid up until v1.4) are great for grids of photos or

Bootstrap Grid System, Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4� Changelog v2.3.0. Settings. Dark Mode. RTL Layout Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no

Overview of Bootstrap 3 Features: How to Upgrade (Migrate , <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-tag">< Bootstrap 3.0 introduces significant changes. Bootstrap 2.x nested columns added up to the number of columns in the hosting span. Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles.

Comments
  • and why still using the V2 when we have the V3 and the V4?
  • sorry to say, old code is already present in my project and I need to change the footer content acc. to some guidlenes now and delivier by Dec-2019 end. I have to make it responsive as well. I tried to upgrade the bootstrap to v4.3 but it affected our application which needs significant time to upgrade the code. I guess it will be upgraded later.
  • @AashishNayak "I want my output like below code: " you have the code then what do you want???
  • @nikhilsugandh, Sorry for being unclear, code under 'required output' section is in Bootstrap v3.0.0. Actually I want the same type of output in Bootstrap v2.3.0. which I was unable to do correctly.
  • @AashishNayak you could have used bootstarp 4 grid for doing it in minimum amount of code.There is a lot of redundant code in there.
  • In ur later code change, space is being left between 2nd & 3rd span element.
  • isn't that what you want? to push the third element to the far right? I want the 3rd span part to be in the extreme right of the screen.
  • Thanks for the answer.I think ur later code will work. I have added my required output's image in question. Please refer and help.
  • oh. wait. I just saw it. let me see that. I will get back to you soon
  • I edited the answer. Check it out and see if it works for you :)