From the [Bootstrap 4 documentation][1]:

&gt; Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.


  [1]: https://getbootstrap.com/docs/4.0/content/images/#responsive-images

**Bootstrap 3:**  `.img-responsive`

**Bootstrap 4:**  `.img-fluid`

As in [Bootstrap 4 Images:][1]

&gt; Images in Bootstrap 4 are made responsive with .img-fluid. max-width:
&gt; 100%; and height: auto; are applied to the image so that it scales
&gt; with the parent element.

```html
&lt;img class=&quot;img-fluid&quot; src=&quot;&quot; alt=&quot;&quot;&gt; //This will make your image responsive
```


  [1]: https://getbootstrap.com/docs/4.1/content/images/

It seems you need to use a new class img-fluid instead of img-responsive if you are using Bootstrap 4 alpha 2.
Have a look at : http://v4-alpha.getbootstrap.com/content/images/

Use img-fluid class instead of img-responsive

see [docs](https://getbootstrap.com/docs/4.0/migration/#images)

In Bootstrap 4 you can use class=&quot;img-fluid&quot;.

This is the explaination:

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: &gt;auto; are applied to the image so that it scales with the parent element.

This is the code as suggested: 
`&lt;img src=&quot;...&quot; class=&quot;img-fluid&quot; alt=&quot;Responsive image&quot;&gt;`

Boostrap 4 is using `.img-fluid` class.

For more references [Boostrap changes for image][1]


  [1]: https://getbootstrap.com/docs/4.0/content/images/#responsive-images

You can also use `.img-thumbnail` that is the same of `.img-fluid` but also give an image a rounded 1px border appearance.

Look the result: [Image thumbnails][1]


  [1]: https://getbootstrap.com/docs/4.0/content/images/#image-thumbnails

I need to divide elements in RecyclerView on groups with titles (like in the Inbox app on the picture below) so help me please to figure out what approach would be better for my case:
1) I can use Heterogenous layouts for it but it is not so convenient to insert new elements in groups (because I need check if elements of the same group is already added or I need to add new divider). So in this case I&#39;ll wrap all operations with such data structure into a separate class.

2) Theoretically I can wrap each group in its own RecyclerView with label is it a good idea?


[![Inbox app][1]][1]


  [1]: http://i.stack.imgur.com/XlxLu.png

Divide elements on groups in RecyclerView

In Redux, every change to the store triggers a `notify` on all connected components. This makes things very simple for the developer, but what if you have an application with N connected components, and N is very large?

Every change to the store, even if unrelated to the component, still runs a `shouldComponentUpdate` with a simple `===` test on the `reselect`ed paths of the store. That&#39;s fast, right? Sure, maybe once. But N times, for *every* change? This fundamental change in design makes me question the true scalability of Redux.

As a further optimization, one can batch all `notify` calls using `_.debounce`. Even so, having N `===` tests for every store change *and* handling other logic, for example view logic, seems like a means to an end.

I&#39;m working on a health &amp; fitness social mobile-web hybrid application with millions of users and am transitioning from **Backbone to Redux**. In this application, a user is presented with a swipeable interface that allows them to navigate between different stacks of views, similar to Snapchat, except each stack has infinite depth. In the most popular type of view, an endless scroller efficiently handles the loading, rendering, attaching, and detaching of feed items, like a post. For an engaged user, it is not uncommon to scroll through hundreds or thousands of posts, then enter a user&#39;s feed, then another user&#39;s feed, etc. Even with heavy optimization, the number of connected components can get very large.

Now on the other hand, Backbone&#39;s design allows every view to listen precisely to the models that affect it, reducing N to a constant.

Am I missing something, or is Redux fundamentally flawed for a large app?

Can a React-Redux app really scale as well as, say Backbone? Even with reselect. On mobile

I just downloaded the source code for Bootstrap 4 alpha 2 and can&#39;t find the class `img-responsive` in it. It exists in Bootstrap 3 source code and I can find it with Notepad++ but in Bootstrap 4s `bootstrap.css` in `dist` folder it doesn&#39;t exist.

What happend to it??

No img-responsive in Bootstrap 4

<p>I just downloaded the source code for Bootstrap 4 alpha 2 and can't find the class <code>img-responsive</code> in it. It exists in Bootstrap 3 source code and I can find it with Notepad++ but in Bootstrap 4s <code>bootstrap.css</code> in <code>dist</code> folder it doesn't exist.</p>
<p>What happend to it??</p>


I&#39;m writing a tool in C# to find duplicate images. Currently I create an MD5 checksum of the files and compare those. 

Unfortunately, the images can be:

- Rotated by 90 degrees.
- Have different dimensions (smaller image with same content).
- Have different compression or file types (e.g. jpeg artifacts, see below).

[![higher resolution koala][1]][1][![lower resolution koala][2]][2]

What would be the best approach to solve this problem?

  [1]: http://i.stack.imgur.com/UvKaV.jpg
  [2]: http://i.stack.imgur.com/8lplJ.jpg

Algorithm to compare two images in C#

I have an image that is 6400 &#215; 3200, while my screen is 1280 x 800. Therefore, the image needs to be resized for display only. I am using Python and OpenCV 2.4.9.
According to [OpenCV Documentation][1], 

&gt; If you need to show an image that is bigger than the screen resolution, you will need to call namedWindow(&quot;&quot;, WINDOW_NORMAL) before the imshow.

That is what I am doing, but the image is not fitted to the screen, only a portion is shown because it&#39;s too big. I&#39;ve also tried with cv2.resizeWindow, but it doesn&#39;t make any difference.


    import cv2
    cv2.namedWindow(&quot;output&quot;, cv2.WINDOW_NORMAL)        # Create window with freedom of dimensions
    # cv2.resizeWindow(&quot;output&quot;, 400, 300)              # Resize window to specified dimensions
    im = cv2.imread(&quot;earth.jpg&quot;)                        # Read image
    cv2.imshow(&quot;output&quot;, im)                            # Show image
    cv2.waitKey(0)                                      # Display the image infinitely until any keypress


  [1]: http://docs.opencv.org/2.4/modules/highgui/doc/user_interface.html &quot;OpenCV Documentation&quot;

OpenCV &amp; Python - Image too big to display

I am making a React w/ Webpack setup and am struggling to do what seems like should be a simple task. I want webpack to include images, and minimize them like I with gulp but I can&#39;t figure it out. I just want to be able to link an image in my css like so:
    
    /* ./src/img/background.jpg */

    body { background: url(&#39;./img/background.jpg&#39;); }

I have all of my css/js/img folders inside a src folder. Webpack outputs to a dist folder, but I can&#39;t figure out how to get images there.

Here is my webpack setup:

     var path = require(&#39;path&#39;);
     var webpack = require(&#39;webpack&#39;);
     var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);

     module.exports = {
      devtool: &#39;cheap-eval-source-map&#39;,
      entry: [
       &#39;webpack-dev-server/client?http://localhost:8080&#39;,
       &#39;webpack/hot/dev-server&#39;,
       &#39;./src/index.js&#39;
      ],
      output: {
      path: path.join(__dirname, &#39;dist&#39;),
      //  publicPath: &#39;./dist&#39;,
      filename: &#39;bundle.js&#39;
      },
      plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new HtmlWebpackPlugin({
      template: &#39;./src/index.html&#39;
       })
      ],
      module: {
      loaders: [{
       exclude: /node_modules/,
       test: /\.js?$/,
       loader: &#39;babel&#39;
       }, {
      test: /\.scss$/,
      loader: &#39;style!css!sass&#39;
        }, {
      test: /\.(png|jpg)$/,
      loader: &#39;file-loader&#39;
      }]
     },

     devServer: {
      historyApiFallback: true,
      contentBase: &#39;./dist&#39;,
      hot: true
      }
    };




How to use images in css with Webpack

[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/Sugxo.jpg

how to make the blur effect with react-native ? like &#39;background-image&#39; 

and i want to switch the effect &#39;blur&#39; and &#39;none&#39;，&#39;none&#39; means no blur effect

how to make the blur effect with react-native?

So here is my code, it displays 6 cards, three across and two rows. I would like for the images to all be the same size without having to manually resize the images. The responsiveness does work, I use &quot;img-fluid&quot; as a class and when I go to a mobile or smaller browser, they all have the same width, but the height is still off. 

    &lt;h1 class=&quot;display-4 text-xs-center m-y-3 text-muted&quot; id=&quot;speakers&quot;&gt;Ice Cream&lt;/h1&gt;

    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-6 col-lg-4&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;&lt;img alt=&quot;Card image cap&quot; class=&quot;card-img-top img-fluid&quot; src=&quot;img/brownie.jpg&quot; /&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;h4 class=&quot;card-title&quot;&gt;Brownie Delight&lt;/h4&gt;

            &lt;p class=&quot;card-text&quot;&gt;Our customer favorite chocolate ice cream jam packed with pieces of brownies and fudge&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;col-md-6 col-lg-4&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;&lt;img alt=&quot;Card image cap&quot; class=&quot;card-img-top img-fluid&quot; src=&quot;img/butterPecan.jpg&quot; /&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;h4 class=&quot;card-title&quot;&gt;Butter Pecan&lt;/h4&gt;

            &lt;p class=&quot;card-text&quot;&gt;Roasted pecans, butter and vanilla come together to make this wonderful ice cream&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;col-md-6 col-lg-4&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;&lt;img alt=&quot;Card image cap&quot; class=&quot;card-img-top img-fluid&quot; src=&quot;img/bCherry.jpg&quot; /&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;h4 class=&quot;card-title&quot;&gt;Black Cherry&lt;/h4&gt;

            &lt;p class=&quot;card-text&quot;&gt;Our classic vanilla loaded with plump black cherries to give flavor and color&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;col-md-6 col-lg-4&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;&lt;img alt=&quot;Card image cap&quot; class=&quot;card-img-top img-fluid&quot; src=&quot;img/mintChip.jpg&quot; /&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;h4 class=&quot;card-title&quot;&gt;Mint Chip&lt;/h4&gt;

            &lt;p class=&quot;card-text&quot;&gt;Our signiture mint ice cream jam packed with mint chocolate chips&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;col-md-6 col-lg-4&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;&lt;img alt=&quot;Card image cap&quot; class=&quot;card-img-top img-fluid&quot; src=&quot;img/pistachio.jpg&quot; /&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;h4 class=&quot;card-title&quot;&gt;Pistachio&lt;/h4&gt;

            &lt;p class=&quot;card-text&quot;&gt;Our classic pistachio is loaded with nuts to give it that great flavor, and of course comes in your favorite color&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;col-md-6 col-lg-4&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;&lt;img alt=&quot;Card image cap&quot; class=&quot;card-img-top img-fluid&quot; src=&quot;img/IceCream.jpg&quot; /&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;h4 class=&quot;card-title&quot;&gt;More Flavors&lt;/h4&gt;

            &lt;p class=&quot;card-text&quot;&gt;We couldn not fit all of our wonderful flavors on one page, click here to see more!&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

Here is an [image][1] of what I am getting and this is what I want to [get][2] where they are all the same size.


  [1]: http://imgur.com/cxEkvmc
  [2]: http://imgur.com/pT8Uctr

How to get images in Bootstrap&#39;s card to be the same height/width?

I am trying to center column&#39;s content. Does not look like it works for me. Here is my HTML:

    &lt;div class=&quot;row&quot;&gt;
       &lt;div class=&quot;col-xs-1 center-block&quot;&gt;
           &lt;span&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/span&gt;
       &lt;/div&gt;
     &lt;/div&gt;

[JSFiddle Demo][1]


  [1]: https://jsfiddle.net/usth0kd2/2/

How to center content in a Bootstrap column?

In Bootstrap v3 I often use the hidden-** classes combined with clearfix to control multi column layouts at different screen widths. For example, 

I could combine multiple hidden-** in one DIV to make my multi columns appear correctly at different screen widths.

As an example if I wanted to display rows of product photos, 4 per row on larger screen sizes, 3 on smaller screens, then 2 on very small screens. The product photos might be different heights so I need the clearfix to ensure the row breaks properly.

Here&#39;s an example in v3...

http://jsbin.com/tosebayode/edit?html,css,output

Now that v4 has done away with these classes, and replaced them with the visible/hidden-**-up/down classes I seem to have to do the same thing with multiple DIVs instead.

Here&#39;s a similar example in v4...

http://jsbin.com/sagowihowa/edit?html,css,output

So I&#39;ve gone from single DIVs to having to add multiple DIVs with lots of up/down classes to achieve the same thing.

From...

    &lt;div class=&quot;clearfix visible-xs-block visible-sm-block&quot;&gt;&lt;/div&gt;

to...

    &lt;div class=&quot;clearfix hidden-sm-up&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;clearfix hidden-md-up hidden-xs-down&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;clearfix hidden-md-down&quot;&gt;&lt;/div&gt;

Is there a better way of doing this in v4 that I have overlooked?

Missing visible-** and hidden-** in Bootstrap v4

How can I set Bootstrap navbar &quot;active&quot; class in Angular 2? I only found [Angular 1 way](https://stackoverflow.com/questions/16199418/how-do-i-implement-the-bootstrap-navbar-active-class-with-angular-js).

When I go to **About** page, add `class=&quot;active&quot;` to **About**, and remove `class=&quot;active&quot;` on **Home**.

    &lt;ul class=&quot;nav navbar-nav&quot;&gt;
        &lt;li class=&quot;active&quot;&gt;&lt;a [routerLink]=&quot;[&#39;Home&#39;]&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a [routerLink]=&quot;[&#39;About&#39;]&quot;&gt;About&lt;/a&gt;&lt;/li&gt;&lt;/li&gt;
    &lt;/ul&gt;

Thanks

How to set Bootstrap navbar &quot;active&quot; class in Angular 2?

I am using Bootstrap 4 alpha 2 and taking advantage on cards. 
Specifically, I am working with [this example][1] taken from the official docs. How can I make all cards to be the same height?

All I can think by now is setting the following CSS rule:
    
    .card {
        min-height: 200px;
    }

But that is just a hard coded solution that won&#39;t work in a general case.
The code in my view is the same as the one in the docs i.e:

    &lt;div class=&quot;card-columns&quot;&gt;
      &lt;div class=&quot;card&quot;&gt;
        &lt;img class=&quot;card-img-top&quot; data-src=&quot;...&quot; alt=&quot;Card image cap&quot;&gt;
        &lt;div class=&quot;card-block&quot;&gt;
          &lt;h4 class=&quot;card-title&quot;&gt;Card title that wraps to a new line&lt;/h4&gt;
          &lt;p class=&quot;card-text&quot;&gt;This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card card-block&quot;&gt;
        &lt;blockquote class=&quot;card-blockquote&quot;&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
          &lt;footer&gt;
            &lt;small class=&quot;text-muted&quot;&gt;
              Someone famous in &lt;cite title=&quot;Source Title&quot;&gt;Source Title&lt;/cite&gt;
            &lt;/small&gt;
          &lt;/footer&gt;
        &lt;/blockquote&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card&quot;&gt;
        &lt;img class=&quot;card-img-top&quot; data-src=&quot;...&quot; alt=&quot;Card image cap&quot;&gt;
        &lt;div class=&quot;card-block&quot;&gt;
          &lt;h4 class=&quot;card-title&quot;&gt;Card title&lt;/h4&gt;
          &lt;p class=&quot;card-text&quot;&gt;This card has supporting text below as a natural lead-in to additional content.&lt;/p&gt;
          &lt;p class=&quot;card-text&quot;&gt;&lt;small class=&quot;text-muted&quot;&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card card-block card-inverse card-primary text-xs-center&quot;&gt;
        &lt;blockquote class=&quot;card-blockquote&quot;&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.&lt;/p&gt;
          &lt;footer&gt;
            &lt;small&gt;
              Someone famous in &lt;cite title=&quot;Source Title&quot;&gt;Source Title&lt;/cite&gt;
            &lt;/small&gt;
          &lt;/footer&gt;
        &lt;/blockquote&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card card-block text-xs-center&quot;&gt;
        &lt;h4 class=&quot;card-title&quot;&gt;Card title&lt;/h4&gt;
        &lt;p class=&quot;card-text&quot;&gt;This card has supporting text below as a natural lead-in to additional content.&lt;/p&gt;
        &lt;p class=&quot;card-text&quot;&gt;&lt;small class=&quot;text-muted&quot;&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card&quot;&gt;
        &lt;img class=&quot;card-img&quot; data-src=&quot;...&quot; alt=&quot;Card image&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card card-block text-xs-right&quot;&gt;
        &lt;blockquote class=&quot;card-blockquote&quot;&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
          &lt;footer&gt;
            &lt;small class=&quot;text-muted&quot;&gt;
              Someone famous in &lt;cite title=&quot;Source Title&quot;&gt;Source Title&lt;/cite&gt;
            &lt;/small&gt;
          &lt;/footer&gt;
        &lt;/blockquote&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card card-block&quot;&gt;
        &lt;h4 class=&quot;card-title&quot;&gt;Card title&lt;/h4&gt;
        &lt;p class=&quot;card-text&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.&lt;/p&gt;
        &lt;p class=&quot;card-text&quot;&gt;&lt;small class=&quot;text-muted&quot;&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

  [1]: http://v4-alpha.getbootstrap.com/components/card/#columns


How to make Bootstrap 4 cards the same height in card-columns?

How would one put a link on a button with bootstrap?

there are 4 methods in the bootstrap documentation:

    &lt;a href=&quot;#&quot; class=&quot;btn btn-info&quot; role=&quot;button&quot;&gt;Link Button&lt;/a&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Button&lt;/button&gt;
    &lt;input type=&quot;button&quot; class=&quot;btn btn-info&quot; value=&quot;Input Button&quot;&gt;
    &lt;input type=&quot;submit&quot; class=&quot;btn btn-info&quot; value=&quot;Submit Button&quot;&gt;

The first one doesn&#39;t work for me, no button shows, just the text with the link, have a feeling its the theme im using.

The second one shows the button which is what i want, but whats the code make the button link to another page when clicked?

Cheers

Content Type	Original Author	Original Content on Stackoverflow
Question	Vahid Amiri	View Question on Stackoverflow
Solution 1 - Image	Boxiom	View Answer on Stackoverflow
Solution 2 - Image	Tahir77667	View Answer on Stackoverflow
Solution 3 - Image	Arnab Chakraborty	View Answer on Stackoverflow
Solution 4 - Image	Abdul Basit	View Answer on Stackoverflow
Solution 5 - Image	Muhammadim Yusoff Jamaluddin	View Answer on Stackoverflow
Solution 6 - Image	Anand Raja	View Answer on Stackoverflow
Solution 7 - Image	alvaro fvr	View Answer on Stackoverflow

No img-responsive in Bootstrap 4

Image Problem Overview

Image Solutions

Solution 1 - Image

Solution 2 - Image

Solution 3 - Image

Solution 4 - Image

Solution 5 - Image

Solution 6 - Image

Solution 7 - Image

Can a React-Redux app really scale as well as, say Backbone? Even with reselect. On mobile

Divide elements on groups in RecyclerView

Attributions