CODEWITHSUNDEEP
htmlcsstwitter-bootstrapscaffolding
Aashish Nayak
Aashish Nayak

Reputation: 41

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.sstatic.net/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>

What should I use to get it correct? Please help. Thanks in advance !!

Below is the current/wrong code.

<body>
  <div class="container-fluid">
    <h1>Hello World!</h1>
    <div class="row">
      <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>
</body>

Upvotes: 3

Views: 97

Answers (3)

Nikhil
Nikhil

Reputation: 3950

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/

Upvotes: 0

tao
tao

Reputation: 90038

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>

Upvotes: 1

Mileta Dulovic
Mileta Dulovic

Reputation: 1064

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

Upvotes: 0

Related Questions