Column Are Full Width in Ie 8 - CSS Bootstrap

column are full width in IE 8 - Css bootstrap

Based on the solution in the thread : Must Bootstrap container elements include row elements?, your markup should be :

<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;"> </div>
        <div class="col-sm-4" style="background:green;"> </div>
        <div class="col-sm-4" style="background:blue;"> </div>
    </div>
</div>

and use this CSS to achieve it in IE8:

.container
{
    display:table;
    width: 100%;
}

.row
{
    height: 100%;
    display: table-row;
}
.col-sm-4
{
    display: table-cell;
}

here is the working demo

The .row class is not required inside a .container, but if you include then, container > row is the order not row > container (which you code)!

EDIT

It might be worth noting that respond.js only works for local files. So if you have got css files of bootstrap from CDN for your website on IE8, it won't work, instead, try with a local copy of bootstrap.css

Internet Explorer 8 and Respond.js

Beware of the following caveats when using Respond.js in your
development and production environments for Internet Explorer 8.

Respond.js and cross-domain CSS
Using Respond.js with CSS hosted on a different (sub)domain (for
example, on a CDN) requires some additional setup. See the Respond.js
docs for details.

Respond.js and file://
Due to browser security rules, Respond.js doesn't work with pages
viewed via the file:// protocol (like when opening a local HTML file).
To test responsive features in IE8, view your pages over HTTP(S). See
the Respond.js docs for details.

Respond.js and @import
Respond.js doesn't work with CSS that's referenced via @import. In
particular, some Drupal configurations are known to use @import. See
the Respond.js docs for details.

IE Compatibility modes
Bootstrap is not supported in the old Internet Explorer compatibility
modes. To be sure you're using the latest rendering mode for IE,
consider including the appropriate tag in your pages:

Source : Getbootstrap

Bootstrap columns is correct in chrome but it doesn't render in Internet Explorer 11.?

Based on my testing result, Look like Ms-flex and flex creating this issue.

If you remove it than it can display the menu properly.

How to set up fixed width for td?

For Bootstrap 4.0:

In Bootstrap 4.0.0 you cannot use the col-* classes reliably (works in Firefox, but not in Chrome).
You need to use OhadR's answer:

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

For Bootstrap 3.0:

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

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

For Bootstrap 2.0:

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.

IE8 issue with Twitter Bootstrap 3

You got your CSS from CDN (bootstrapcdn.com) respond.js only works for local files. So try your website on IE8 with a local copy of bootstrap.css. Or read: CDN/X-Domain Setup

Note See also: https://github.com/scottjehl/Respond/pull/206

Update:

Please read: http://getbootstrap.com/getting-started/#support

In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.

See also: https://github.com/scottjehl/Respond

For this reason the basic template contains these lines in the head section:

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center

Below follows what I think is the best way to solve this. I will divide it up in whether or not it is a background image or color we are looking to apply accross the full width.

CSS (formatting for illustration purposes and fixed width)

.content{
    padding:20px;
    border: 1px solid #269abc;
    background:#d6ec94;
}
[class*="col-"] {
    padding-top:10px; /* 15px side paddings automatically applied */
    padding-bottom:10px;
    border: 1px solid grey;
    background: transparent;
}
.fixed-width {
    display:inline-block;
    float:none;
    width: 300px;
}

The key here is the fixed-width class, and follows your approach (2). The other styles are just so you can try it and easily see how it works.

CSS (background image)

#one {
    background-image: url([insert-url]);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
}

The key here is the background-size: contain element. As long as the width/height ratio of your background image is larger than the section's ratio, the image will fill the full background.

CSS (background color)

#two {
    background-color: grey;
    height:500px;
}

background-color works without any tweaks.

HTML

<section id="one">
    <div class="container">
        <div class="row text-center">

            <div class="col-sm-4 fixed-width">
                <div class="content">HERE</div>
            </div>

            <div class="col-sm-4 fixed-width">
                <div class="content">HERE</div>
            </div>

            <div class="col-sm-4 fixed-width">
                <div class="content">HER</div>
            </div>

        </div>
    </div>
</section>

As seen, by adding a <section> around the container, you can apply the background image or color to the full width of the page.

---

Related Topics