CODEWITHSUNDEEP
twitter-bootstrap
genxgeek
genxgeek

Reputation: 13367

How to set fixed width for middle column content?

Using the default hero unit example I have a customized 3 column layout:

<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
</div>

It shows up as:

enter image description here

But I really want the middle content to be a fixed width...something like (cut paste photoshop for literary content):

How can I resize the middle content to be fixed? Also interested in how the left and right can be fixed as well?

enter image description here

Code (less stock from bootstrap hero default example):

<div class="container">
<div class="row">
<div class="span4">
      <div class="row">
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus.  cursus commodo, tortor ma</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
        </div>
</div>
<div class="span4">
<div class="row"    >
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. </p>
        <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>
      </div>
</div>
<div class="span4">
      <div class="row">
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
        </div>
</div>
</div>
</div>

Upvotes: 0

Views: 879

Answers (2)

Ross Allen
Ross Allen

Reputation: 44900

As long as the span counts add up to 12, you can size them however you like. Your screenshot looks like either 3:6:3 or 2:8:2:

3:6:3:

<div class="container">
  <div class="row">
    <div class="span3"></div>
    <div class="span6"></div>
    <div class="span3"></div>
  </div>
</div>

2:8:2:

<div class="container">
  <div class="row">
    <div class="span2"></div>
    <div class="span8"></div>
    <div class="span2"></div>
  </div>
</div>

Upvotes: 1

Ronny
Ronny

Reputation: 481

Try a float left for all, and set the middle column to have a width attribute. You could also just place them into a table as a container, and then set the tree td columns width.

I am hoping this is what you needed, as I don't want to just tie up response space... lol Happy coding.

Upvotes: 0

Related Questions