The release notes tell you: (http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/)

&gt;Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.

Personally I think most benefits go to the grid system. In Twitter&#39;s Bootstrap all grids are fluid. Columns are defined as percentage of the total width. But the gutter have a fixed width in pixels. By default a padding of 15px on both side of the column. The combination of width in pixels and percentage could be complex. With `border-box` this calculating is easy because the `border-box` value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. (http://css-tricks.com/box-sizing/)

Also read: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

I have the following generic extension method:

&lt;!-- language: c# --&gt;

    public static T GetById&lt;T&gt;(this IQueryable&lt;T&gt; collection, Guid id) 
        where T : IEntity
    {
        Expression&lt;Func&lt;T, bool&gt;&gt; predicate = e =&gt; e.Id == id;

        T entity;
            
        // Allow reporting more descriptive error messages.
        try
        {
            entity = collection.SingleOrDefault(predicate);
        }
        catch (Exception ex)
        {
            throw new InvalidOperationException(string.Format(
                &quot;There was an error retrieving an {0} with id {1}. {2}&quot;,
                typeof(T).Name, id, ex.Message), ex);
        }

        if (entity == null)
        {
            throw new KeyNotFoundException(string.Format(
                &quot;{0} with id {1} was not found.&quot;,
                typeof(T).Name, id));
        }

        return entity;
    }

Unfortunately Entity Framework doesn&#39;t know how to handle the `predicate` since C# converted the predicate to the following:

&lt;!-- language: c# --&gt;

    e =&gt; ((IEntity)e).Id == id

Entity Framework throws the following exception:

&gt; Unable to cast the type &#39;IEntity&#39; to type &#39;SomeEntity&#39;. LINQ to
&gt; Entities only supports casting EDM primitive or enumeration types.

How can we make Entity Framework work with our `IEntity` interface?

LINQ to Entities only supports casting EDM primitive or enumeration types with IEntity interface

I want to connect Java class file with SQL server 2012. I have logged in with SQL server authentication, but I am receiving an error when connecting.
 
Error:

&gt; The TCP/IP connection to the host 127.0.0.1, port 1433 has failed.
&gt; Error: &quot;Connection refused: connect. Verify the connection properties.
&gt; Make sure that an instance of SQL Server is running on the host and
&gt; accepting TCP/IP connections at the port. Make sure that TCP
&gt; connections to the port are not blocked by a firewall.&quot;.

My code:

    Class.forName(&quot;com.microsoft.sqlserver.jdbc.SQLServerDriver&quot;);	//1. Register your driver
    //2. get the connection object
    //Connection con = DriverManager.getConnection(&quot;jdbc:sqlserver://localhost;databaseName=aysha&quot;,&quot;sa&quot;,&quot;admin&quot;);
    Connection con = DriverManager.getConnection(&quot;jdbc:sqlserver://127.0.0.1;databaseName=aysha&quot;,&quot;user=sa&quot;,&quot;password=admin&quot;);
     //&quot;jdbc:sqlserver://127.0.0.1:1433; Instance=SQL2008;&quot; +       &quot;databaseName=MB;user=sa;password=123;&quot;;
    //Connection con = DriverManager.getConnection(&quot;jdbc:sqlserver://localhost:1433;databaseName=aysha&quot;,&quot;sa&quot; , &quot;password&quot;);
    //3. Prepare a statement
    Statement stmt = con.createStatement();
    //4. Write the query`
    String sql = &quot;Select * from employee&quot;;
    //5. Execute the statement and 
    ResultSet rs = stmt.executeQuery(sql);
    //6. Process the result set
    
    while (rs.next())
    {
        System.out.println(rs.getInt(1));
    }



JDBC connection failed, error: TCP/IP connection to host failed

I&#39;m migrating my Bootstrap themes from v2.3.2 to v3.0.0 and one thing I noticed is that a lot of dimensions are calculated differently, due to the following styles in bootstrap.css.

    *,
    *:before,
    *:after {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

Can anyone explain why Bootstrap switches the box-sizing of all elements to border-box? I suspect it has to do with the new grid system being percent-based, but the selector above does not only apply to the grid elements obviously.

Seems a bit radical imho :-)

Anyone care to give some insight?

Why did Bootstrap 3 switch to box-sizing: border-box?

I'm migrating my Bootstrap themes from v2.3.2 to v3.0.0 and one thing I noticed is that a lot of dimensions are calculated differently, due to the following styles in bootstrap.css.
<pre><code class="hljs language-css">*,
*:before,
*:after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
</code></pre>
Can anyone explain why Bootstrap switches the box-sizing of all elements to border-box? I suspect it has to do with the new grid system being percent-based, but the selector above does not only apply to the grid elements obviously.
Seems a bit radical imho :-)
Anyone care to give some insight?

I have a weird bug on iPad iOS7 landscape mode.

What i was able to investigate is that in iOS7 window.outerHeight is 692px and 
window.innerHeight 672px; while in previous versions both values are 672px.

Even though my `&lt;html&gt;` and `&lt;body&gt;` tags have height 100% there seems to be space for scrolling, and the weird thing is that this problem only shows up on landscpae

You can see what i am talking about by visiting t.cincodias.com, for example, in a iOS 7 iPad the footer bar (or the header sometimes) will be cut. But on previous iOS versions the content displays fine at fullscreen.

Even when i set the height of both tags to `height: 672px !important` and `position:absolute; bottom: 0;`, you can still scroll the content vertically by touching an iframe (the ads are iframes).

I&#39;m running the release candidate version of iOS7

thanks for any help.

IOS 7 - css - html height - 100% = 692px

I cannot understand what the following code means in terms of `icon-bar`:

&lt;!-- language-all: lang-html --&gt;

    &lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse&quot;&gt;
      &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
      &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
      &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
    &lt;/button&gt;

&lt;!-- language: lang-none --&gt;

What is `icon-bar` for? Why are there three similar instances of it?

This code is in the navigation bar section: 

&lt;!-- language-all: lang-html --&gt;

    &lt;div class=&quot;navbar-header&quot;&gt;
      ...
    &lt;/div&gt;

&lt;!-- language: lang-none --&gt;

&quot;icon-bar&quot; in twitter bootstrap navigation bar

I have cart in my top menu, using `push-right` and my problem is that the dropdown bubble falls out of the page. I am trying to align the bubble right, so that it right-aligns with &#39;click&#39;

like this 

![enter image description here][1]

[1]: http://i.stack.imgur.com/MtT4f.png


HTML:

&lt;!-- language: lang-html --&gt;
   
    &lt;div class=&quot;cart pull-right&quot;&gt;
      &lt;ul class=&quot;nav&quot;&gt;
        &lt;li class=&quot;dropdown&quot;&gt;
          &lt;a class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; href=&quot;#&quot;&gt;CLICK&lt;/a&gt;
           &lt;div class=&quot;dropdown-menu&quot;&gt;
           STUFF
           &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;

bootstrap dropdown bubble align right (not push-right)

I have a `div` positioned `fixed` on the left side of a web page, containing menu and navigation links. It has no height set from css, the content determines the height, the width is fixed. The problem is that if the content is too much, the `div` will be larger than the window&#39;s height, and part of the content will not be visible. (Scrolling the window doesn&#39;t help, since the position is `fixed` and the `div` won&#39;t scroll.)

I tried to set `overflow-y:auto;` but that doesn&#39;t help either, the div doesn&#39;t seem to notice that part of it is outside of the window.

How can I make it&#39;s contents scrollable only, if needed, if the `div` hangs out of the window?

How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?

Is there any way to write keyframes in SASS?

Every example I have found is actually SCSS, even when it says it&#39;s SASS.  To be clear, I mean the one with no curly brackets.

SASS (not SCSS) syntax for css3 keyframe animation

I have a bootstrap dropdown menu below.  It has a link in it hooked up to a knockout.js binding, that returns false because I don&#39;t want the # tag to be sent to the browser URL.  However, doing this doesn&#39;t close the dropdown menu when I click the link.  Any way around this?

**HTML**

    &lt;div class=&quot;btn-group&quot;&gt;
        &lt;button class=&quot;btn dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-bind=&quot;enable: !noResults()&quot;&gt;&lt;i class=&quot;icon-download-alt&quot; &gt;&lt;/i&gt; Export &lt;span class=&quot;icon-caret-down&quot;&gt;&lt;/span&gt;&lt;/button&gt;

        &lt;ul class=&quot;dropdown-menu&quot;&gt;
            @foreach(var exportUrl in Model.ExportUrls)
            {
                &lt;li&gt;
                    &lt;a href=&quot;#&quot; data-bind=&quot;disable: noResults(), download: { url: &#39;@exportUrl.Value&#39;, data: data }&quot;&gt;&lt;img src=&quot;/Content/less/images/img/@(exportUrl.Key.ToString().ToLower()).png&quot; alt=&quot;@exportUrl.Key.GetDisplayName()&quot;/&gt; @exportUrl.Key.GetDisplayName()&lt;/a&gt;
                &lt;/li&gt;
            }
        &lt;/ul&gt;
    &lt;/div&gt;

**knockut.js binding**

    ko.bindingHandlers.download = {
        init: function (element, valueAccessor) {

            var value = ko.utils.unwrapObservable(valueAccessor()),
                id = &#39;download-iframe-container&#39;,
                iframe;

            $(element).unbind(&#39;click&#39;).bind(&#39;click&#39;, function () {

                iframe = document.getElementById(id);

                if (!iframe) {
                    iframe = document.createElement(&quot;iframe&quot;);
                    iframe.id = id;
                    iframe.style.display = &quot;none&quot;;
                }

                if (value.data) {
                    iframe.src = value.url + (value.url.indexOf(&#39;?&#39;) &gt; 0 ? &#39;&amp;&#39; : &#39;?&#39;) + $.param(ko.mapping.toJS(value.data));
                } else {
                    iframe.src = value.url;
                }

                document.body.appendChild(iframe);

                return false;
            });
        }
    };

Close Bootstrap Dropdown after link click

Which is the best one to use and if possible, please provide the difference(s) and advantages of these two.

[Semantic-ui][1] vs [Bootstrap][2]
I am trying to build my UI and really confused as what to use.

Please suggest me the best one and if possible with examples.


  [1]: http://semantic-ui.com/
  [2]: http://getbootstrap.com/2.3.2/

Semantic-ui vs Bootstrap

I use the version of [bootstrap-datepicker][1] maintained by [eternicode][2] (Andrew Rowls).

On Bootstrap 2 it worked, but now it doesn&#39;t work with the Bootstrap 3 library.

How can I get [bootstrap-datepicker][1] to work with `Bootstrap 3`?

  [1]: https://github.com/uxsolutions/bootstrap-datepicker
  [2]: https://github.com/eternicode

**Note:** The repository moved from [eternicode][2] to an organization account (uxsolutions).

How do I get bootstrap-datepicker to work with Bootstrap 3?

What is the **Minimum** version of `jquery` and `jquery-ui` to use with `Twitter bootstrap 3`? I have not found any documentation about that.

twitter bootstrap 3 jquery minimum version

Using Bootstrap modal, I&#39;ve seen these `aria` attributes a lot, but I never knew how to make use of them. 

Does anyone know what cases to use these attributes? I googled—just didn&#39;t find any straightforward answers.

What are these attributes: `aria-labelledby` and `aria-hidden`

How can I make input group involves two inputs?

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;input-group&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;MinVal&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;MaxVal&quot;&gt;
    &lt;/div&gt;

This doesn&#39;t work, they are horizontal instead of inline

Input group - two inputs close to each other

I am using Bootstrap 3 and I would like to add some buttons in panel header, on top-right corner. When trying to add them, they are show below title baseline.

Code : http://bootply.com/82631

What are the missing CSS I should add either to the title, panel heading, or buttons ?

Content Type	Original Author	Original Content on Stackoverflow
Question	Alexander Rechsteiner	View Question on Stackoverflow
Solution 1 - Css	Bass Jobsen	View Answer on Stackoverflow

Why did Bootstrap 3 switch to box-sizing: border-box?

Css Problem Overview

Css Solutions

Solution 1 - Css

JDBC connection failed, error: TCP/IP connection to host failed

LINQ to Entities only supports casting EDM primitive or enumeration types with IEntity interface

Attributions