Responsive Images

Responsive images are images that scale nicely to fit any browser size.
Using the width Property
If the CSS width property is set to 100%, the image will be responsive and scale up and down:
Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.
Using the max-width Property If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size

HTML Video

How it Works
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.
The source element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
The text between the video tags will only be displayed in browsers that do not support the video element. 0137294207

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)


The Viewport

What is The Viewport?
The viewport is the user visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport.
To fix this, browsers on those devices scaled down the entire web page to fit the screen. This was not perfect!! But a quick fix.


Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. 0137294207

Handling Events

Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:
React events are named using camelCase, rather than lowercase.
With JSX you pass a function as the event handler, rather than a string.


Related Content


Overflow Use these shorthand utilities for quickly configuring how content overflows an element.


Icons Guidance and suggestions for using external icon libraries with Bootstrap.


Overflow Use these shorthand utilities for quickly configuring how content overflows an element.


Jumbotron Lightweight, flexible component for showcasing hero unit style content.


Background Images Different Images for Different Devices
A large image can be perfect on a big computer screen, but useless on a small device. Why load a large image when you have to scale it down anyway? To reduce the load, or for any other reasons, you can use media queries to display different images on different devices.


Composition vs Inheritance React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.
In this section, we will consider a few problems where developers new to React often reach for inheritance, and show how we can solve them with composition.