Rectangle 27 8

nope, because the sidebar is fixed in position. my right row/container has a width of mh approx 3000-4000px. so if i scroll right the sidebar is always on top. but thanks for your response

css - Bootstrap fluid layout - fixed width of sidebar - Stack Overflow

css tooltip twitter-bootstrap sidebar
Rectangle 27 8

nope, because the sidebar is fixed in position. my right row/container has a width of mh approx 3000-4000px. so if i scroll right the sidebar is always on top. but thanks for your response

css - Bootstrap fluid layout - fixed width of sidebar - Stack Overflow

css tooltip twitter-bootstrap sidebar
Rectangle 27 596

Quick version: .container has one fixed width for each screen size in bootstrap (xs,sm,md,lg); .container-fluid expands to fill the available width.

The difference between container and container-fluid comes from these lines of CSS:

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Depending on the width of the viewport that the webpage is being viewed on, the container class gives its div a specific fixed width. These lines don't exist in any form for container-fluid, so its width changes every time the viewport width changes.

So for example, say your browser window is 1000px wide. As it's greater than the min-width of 992px, your .container element will have a width of 970px. You then slowly widen your browser window. The width of your .container won't change until you get to 1200px, at which it will jump to 1170px wide and stay that way for any larger browser widths.

Your .container-fluid element, on the other hand, will constantly resize as you make even the smallest changes to your browser width.

.container-fluid
.container

@TheHung Depends exactly what you mean by 'full width', but container-fluid is what I'd go for in your case as far as I can tell

@JKillian As many themes nowadays, they always have 2 layouts: Boxed and wide layout. Hope you can understand what I explaining. Sorry for bad english.

@JKillian How about use .container and .container-fluid in some cases? Ex.: (design.davidrozando.com/drew-html-v1.1/).

twitter bootstrap 3 - Container-fluid vs .container - Stack Overflow

twitter-bootstrap-3
Rectangle 27 27

<div class="sidebar span4">
    this is my fixed sidebar
</div>
<div class="main">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">this is fluid</div>
            <div class="span3 offset1">yeah!</div>
            <div class="span6">Awesome!</div>
        </div>
        <div class="row-fluid">
            <div class="span6">1 half</div>
            <div class="span6">2 half</div>
        </div>
    </div>
</div>

As as general note:

You dont need to use bootstrap as your 'main container', so you can place your sidebar side-by-side with a grid system (like bootstrap fluid and responsive). This way you have A LOT of control of the sidebar, without affecting the actual content.

This is the only answer that solved the fixed width. The others are about fixed position. +1

I appreciate this attempt, but the problem is, the second row in the right hand main floats lower than the bottom of the right-hand sidebar. Notice how '1 half' and '2 half' (which are spans in the second row-fluid in the main nav) float below it: jsfiddle.net/TT8uV/2/show

I don't think this has to be with the solution, but either way I update with an overflow:auto to the row here: jsfiddle.net/TT8uV/35 or you can postion:absolute the sidebar jsfiddle.net/TT8uV/36

This is the proper solution - you don't need to use the Bootstrap grid for everything. Having a separate sidebar is the best. Please accept this answer!

@BartCalixto how does the hidden phone work?

css - Bootstrap fluid layout - fixed width of sidebar - Stack Overflow

css tooltip twitter-bootstrap sidebar
Rectangle 27 27

<div class="sidebar span4">
    this is my fixed sidebar
</div>
<div class="main">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">this is fluid</div>
            <div class="span3 offset1">yeah!</div>
            <div class="span6">Awesome!</div>
        </div>
        <div class="row-fluid">
            <div class="span6">1 half</div>
            <div class="span6">2 half</div>
        </div>
    </div>
</div>

As as general note:

You dont need to use bootstrap as your 'main container', so you can place your sidebar side-by-side with a grid system (like bootstrap fluid and responsive). This way you have A LOT of control of the sidebar, without affecting the actual content.

This is the only answer that solved the fixed width. The others are about fixed position. +1

I appreciate this attempt, but the problem is, the second row in the right hand main floats lower than the bottom of the right-hand sidebar. Notice how '1 half' and '2 half' (which are spans in the second row-fluid in the main nav) float below it: jsfiddle.net/TT8uV/2/show

I don't think this has to be with the solution, but either way I update with an overflow:auto to the row here: jsfiddle.net/TT8uV/35 or you can postion:absolute the sidebar jsfiddle.net/TT8uV/36

This is the proper solution - you don't need to use the Bootstrap grid for everything. Having a separate sidebar is the best. Please accept this answer!

@BartCalixto how does the hidden phone work?

css - Bootstrap fluid layout - fixed width of sidebar - Stack Overflow

css tooltip twitter-bootstrap sidebar
Rectangle 27 6

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

This is the only one that works out of all the other answers.

I also added text-overflow: ellipsis to make sure the cut-off text is apparent

css - Bootstrap - how to set up fixed width for ? - Stack Overflow

css twitter-bootstrap width html-table
Rectangle 27 4

In the CSS Box Model, fixed positioning takes an element out of the normal flow, and if there are no other sibling elements, the parent container will collapse. In this case, the form inherits it's width from the parent, but when taken out of normal flow with fixed positioning, the width value of the parent does not cascade. But when I add a sibling element to illustrate my point, in this case a Bootstrap 'jumbotron' element, you will see that the parent .col-lg-4 .col-sm-4 element is once again visible, but it settles in underneath it's fixed sibling who appears first in source order.

html - Bootstrap - why width of the fixed positioned div gets reduced?...

html css twitter-bootstrap css-position fixed
Rectangle 27 3

<style type="text/css">

    table {
        table-layout: fixed;
        word-wrap: break-word;
    }

        table th, table td {
            overflow: hidden;
        }

</style>

css - Bootstrap - how to set up fixed width for ? - Stack Overflow

css twitter-bootstrap width html-table
Rectangle 27 706

With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width.

With twitter bootstrap 2 use: class="span*" where * is a number of columns of width.

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** If you have <th> elements set the width there and not on the <td> elements.

spanX must be replaced by col-md-X in bootstrap 3.0

What happens if you have more than 12 columns?

you can apply this only in the <head> in each <th> tag and all rows will match

Is there documentation about this on the Bootstrap website?

This works, but it's not on the bootstrap site because those col-* classes aren't meant to be used this way. They are meant to be used in the responsive bootstrap grids. If you like what these do, consider looking at the CSS for them and copy it to make your own CSS.

css - Bootstrap - how to set up fixed width for ? - Stack Overflow

css twitter-bootstrap width html-table
Rectangle 27 9

<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="./index.html">Bootstrap</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a href="./index.html">Home</a>
              </li>
              <li>
                <a href="./getting-started.html">Get started</a>
              </li>

              ...

              <li>
                <a href="./customize.html">Customize</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
.navbar { 
    max-width: 1170px; /* width of .container */
    margin: 0 auto;
}

Hi Austin. This works like a charm! I have tried the container inside the menu without luck, may have put them on the wrong side of the navbar-inner??? Anyway... perfect now!

html - Bootstrap

html css twitter-bootstrap fixed navbar
Rectangle 27 83

I was having the same issue, I made the table fixed and then specified my td width. If you have th you can do those as well.

table {
    table-layout: fixed;
    word-wrap: break-word;
}
<td style="width:10%">content</td>

This is great, but as an addition use a class in the td tag instead of applying the style directly

This works thanks better just enough to increase the width of th like : <th style="width: 25%;"></th> this will effect other columns width

css - Bootstrap - how to set up fixed width for ? - Stack Overflow

css twitter-bootstrap width html-table
Rectangle 27 56

Instead of applying the col-md-* classes to each td in the row you can create a colgroup and apply the classes to the col tag.

<table class="table table-striped">
        <colgroup>
            <col class="col-md-4">
            <col class="col-md-7">
        </colgroup>
        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

I prefer this but it seems not affect to my case, the column width not extend by col-md-*

I like this solution, by the way, why one is forced to use col-md-* classes and not col-lg-* ,col-sm-* or col-xs-*?

@LucioB you can use whichever you want and even use several of them by column (example <col class="col-md-4 col-sm-6"> will have a width of 33% in medium screen size and 50% in small screen size)

css - Bootstrap - how to set up fixed width for ? - Stack Overflow

css twitter-bootstrap width html-table
Rectangle 27 47

If you're using <table class="table"> on your table, Bootstrap's table class adds a width of 100% to the table. You need to change the width to auto.

Also, if the first row of your table is a header row, you might need to add the width to th rather than td.

As an addition on Bootstrap 3 you will also need to set the white-space property of the th to normal since it is nowrap currently as such headers won't break.

css - Bootstrap - how to set up fixed width for ? - Stack Overflow

css twitter-bootstrap width html-table
Rectangle 27 1

A block width button could easily become responsive button if the parent container is responsive. I think that using a combination of a fixed width and a more detailed selector path instead of !important because:

1) Its not a hack (setting min-width and max-width the same is however hacky)

2) Does not use the !important tag which is bad practice

3) Uses width so will be very readable and anyone who understands how cascading works in CSS will see whats going on (maybe leave a CSS comment for this?)

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}

css - Fixed width buttons with Bootstrap - Stack Overflow

css css3 twitter-bootstrap
Rectangle 27 22

In my case I was able to fix that issue by using min-width: 100px instead of width: 100px for the cells th or td.

.table td, .table th {
    min-width: 100px;
}

This may have preserved what's left of my sanity.

Yes! this sets, well, the min-width for a column in a responsive table. Thanks.

css - Bootstrap - how to set up fixed width for ? - Stack Overflow

css twitter-bootstrap width html-table
Rectangle 27 219

You can also use the .btn-block class on the button, so that it expands to the parent's width.

If the parent is a fixed width element the button will expand to take all width. You can apply existing markup to the container to ensure fixed/fluid buttons take up only the required space.

<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="span2">
  <p><button class="btn btn-primary btn-block">Save</button></p>
  <p><button class="btn btn-success btn-block">Download</button></p>
</div>

css - Fixed width buttons with Bootstrap - Stack Overflow

css css3 twitter-bootstrap
Rectangle 27 14

<table class="table">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</td>
      <td>Val 2</td>
      <td>Val 3</td>
      <td>Val 4</td>
      <td>Val 5</td>
    </tr>
  </tbody>
</table>

css - Bootstrap - how to set up fixed width for ? - Stack Overflow

css twitter-bootstrap width html-table
Rectangle 27 58

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

container
.wrapper
<div class="wrapper container">
    <div class="row">
        ...
    </div>
</div>

As for an explanation, the .row class has -15px margins on each side.

.row {
    margin-right: -15px;
    margin-left: -15px;
}

The .container class effectively displaces that with the following:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Thank you very much !!! Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

In my case, I could not use .container because it has fixed width on smaller devices. I fix this with .container-fluid.

Great answer! You saved me a lot of time and headache in reviewing all of my pages...

html - How to remove this horizontal scrollbar in Bootstrap 3 - Stack ...

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 58

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

container
.wrapper
<div class="wrapper container">
    <div class="row">
        ...
    </div>
</div>

As for an explanation, the .row class has -15px margins on each side.

.row {
    margin-right: -15px;
    margin-left: -15px;
}

The .container class effectively displaces that with the following:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Thank you very much !!! Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

In my case, I could not use .container because it has fixed width on smaller devices. I fix this with .container-fluid.

Great answer! You saved me a lot of time and headache in reviewing all of my pages...

html - How to remove this horizontal scrollbar in Bootstrap 3 - Stack ...

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 44

To do this you can come up with a width you feel is ok for both buttons and then create a custom class with the width and add it to your buttons like so:

.custom {
    width: 78px !important;
}

I can then use this class and add it to the buttons like so:

<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>

You can take that custom class you create and place it inside your own stylesheet, which you load after the bootstrap stylesheet. We do this because any changes you place inside the bootstrap stylesheet might get accidentally lost when you update the framework, we also want your changes to take precedence over the default values.

use em units instead of pixels, they help you set width by characters length

css - Fixed width buttons with Bootstrap - Stack Overflow

css css3 twitter-bootstrap