37590801?s=460&v=4

A software engineer who dreams about non-electric sheep and autonomous vehicles and likes to champion security.

Software Engineer

Dan Arias

Learn how to use Express and Pug to build a website in Node.js

Build a Website with Node.js and Express

Learn how to use Passport.js to add user authentication to a web app built with Node.js and Express.

Node.js and Express Authentication Using Passport

William Juan

I am a Frontend Developer working primarily in the web and hybrid mobile spaces. The majority of my work has revolved around the Angular ecosystem, including working with other Angular-related frameworks such as NativeScript and Ionic. My passion lies in converting a design into code and achieving a close to pixel-perfect end-product.

Frontend Developer

Improve the User Experience (UX) of an e-commerce application by implementing animations utilizing Angular animations, CSS animations, and Web Animation APIs.

Get Better Angular UX Using 4 Animation Techniques

kapehe-jorgenson

Kapehe is an R&D Content Engineer for Auth0 with a passion for learning and teaching. With her primary focus on ReactJS and JavaScript, she is impressed with what code can create for the web. Technology and web development are constantly evolving and naturally bring that need for continual learning. She enjoys writing tutorials, hosting local meetups, and learning with others to expand coding knowledge.

R&D Content Engineer

Kapehe Jorgenson



**TL;DR:** - In this article, we are going to go over the new updates and features added in the major release of the `create-react-app` tool. We will go over the changes that ReactJS announced and what we can find in this great update. We will also go over the addition of TypeScript support and how that can benefit your project.

## Create React App 2.0 - The Big Reveal

On October 1, 2018, [ReactJS tweeted](https://twitter.com/reactjs/status/1046933146736963587) their release announcement of [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html). 

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">We’ve just released Create React App 2.0, including a year’s worth of improvements. <a href="https://t.co/O2AjlHOUjp">https://t.co/O2AjlHOUjp</a> <a href="https://t.co/sV8YbY7IED">pic.twitter.com/sV8YbY7IED</a></p>&mdash; React (@reactjs) <a href="https://twitter.com/reactjs/status/1046933146736963587?ref_src=twsrc%5Etfw">October 2, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## The Useful Create React App

Once released, developers were excited, to say the least. If you have used ReactJS, chances are you have used the bash command:

```bash
create-react-app name-of-app
```

Once that command starts running, you get to sit back and relax. You will see that ReactJS is taking care of all the setup and configuration. Once it’s finished, the `package.json` is compiled, starting dependencies are installed, and it gives you the initial project structure. What’s in this new and flashy Create React App 2.0? Let’s check it out!

<include src="TweetQuote" quoteText="On October 1, 2018, ReactJS tweeted their release announcement of Create React App 2.0. Once released, developers were excited, to say the least."/>

## Sass and CSS Modules

Have you ever had to install Sass loaders yourself? Have you had to configure [Sass](https://sass-lang.com/) throughout your project yourself? Well now, in Create React App 2.0, you can get Sass running in your project with a simple bash command and some file name changes. Run:

```bash
npm install node-sass
```

Change your `src/App.css` to `src/App.scss` and make sure to update that file name in the top part of `src/App.js` and you are ready to use and reuse your stylesheets. It’s great!

## Babel 7

[Babel](https://babeljs.io/) released their Babel 7 version this year as well and it did not take long for React to switch over. You can learn all about the new [Babel 7 features here](https://babeljs.io/blog/2018/08/27/7.0.0). Babel is important because it converts ES6 into code that browsers can read.  Babel 7 is faster, can now parse TypeScript syntax, and even gives support for the React fragment syntax.

Want to learn more about React fragments? Dive into the [React docs on Fragments](https://reactjs.org/docs/fragments.html#short-syntax).

## Webpack 4

React, having always used [Webpack](https://webpack.js.org/), has now updated to Webpack 4. Webpack 4 is much faster, decreases your build time, and allows you to set up a particular environment whether it's development or production.

![Webpack 4 logo - JavaScript module bundler](https://images.ctfassets.net/23aumh6u8s0i/72d1mUghQG0alzmyZsIM9r/87b1d6cf5fad0164df47e1e6f79c1079/webpack-4-logo)

In short, it is a module bundler for JavaScript applications and version 4 splits the bundles into a more intelligent and better performant way. There is so much that goes with Webpack 4, if you want to learn more about it, you can [visit the Webpack website here](https://webpack.js.org/).

<include src="TweetQuote" quoteText="React has now updated to Webpack 4, a module bundler for JavaScript applications."/>

## Jest 23

When Create React App 2.0 came out, they launched it with that latest version of [Jest](https://jestjs.io/). Jest 23 is more stable and much quicker, which will help you when running tests. You’ll feel more confident with more immediate feedback and reliable results.

![Jest logo - An open-source testing framework](https://images.ctfassets.net/23aumh6u8s0i/3lWxbu0X1JZtfNmfOZM2hg/d5d74ad73a0040712d26427e94de0eae/jest-logo)

Jest is an open-source testing framework that has just been updated to version 23. It has some great new features. One of those updates is the new watch menu option called Interactive Snapshot Mode. You are able to look through each snapshot and review your failed ones. While reviewing you can choose to update or skip each one. Jest has a great list of some of the updates that you can find [here on Jest’s blog](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing#interactive-snapshot-mode).

## PostCSS

PostCSS, a great tool with over 200 custom plugins has been added to Create React App 2.0. By using JavaScript, you are able to easily transform your CSS. Create React App did not have this neat feature, but the team at React thought that adding this in would be a great for developers. I would have to agree!

If you were to head over to [PostCSS.org](https://postcss.org/) you would see a list of features that come with PostCSS.

* Increased code readability
* Converts modern CSS into a more readable version for browsers
* Uses [CSS Modules](https://github.com/css-modules/css-modules) which keeps all class and animation names local
* Utilizes [stylelint](https://stylelint.io/), a modern CSS linter
* Offers a powerful grid system

## Apollo, Relay Modern, MDX, and other third-party Babel Macros transforms

Imagine being able to use a third-party platform like [Apollo](https://www.apollographql.com/), [MDX](https://mdxjs.com/), or [Relay Modern](https://facebook.github.io/relay/) without extra configuration or setup. There is no longer the issue of being able to use Babel Macros without ejecting first, Create React App 2.0 is taking care of that setup for us.

Check out this tutorial on [how to create a React app with MDX](https://auth0.com/blog/how-to-build-an-app-with-react-and-mdx/?utm_source=linkedin&utm_medium=sc&utm_campaign=mdx_react).

## SVG

We have all seen an SVG tag:

```html
<svg width="100" height="100">
   <circle cx=“50” cy=“50” r=“40” stroke=“blue” stroke-width=“5” fill="black" />
</svg> 
```

This one is a simple circle but some SVG tags can get pretty long and confusing. SVG’s are great because they allow for cleaner looking lines, richer color, and change your images into code.

What if I told you that now you can import an SVG as a React component?

Simply import the component at the top:

`import SVGIcon from "./svgicon";`

And use it down within the file:

`<SVGIcon name="image" width={50} fill={red} />`
or
`<SVGIcon />`

This can give a lot of flexibility in where you use your SVG’s and allows for better readability.


## Yarn Plug’n’Play

Hmmm, getting rid of the `node_modules` seems far-fetched but this experimental [Yarn](https://yarnpkg.com/en/) Plug’n’Play allows for just that. If you look at the bullet points in [this GitHub PR conversation](https://github.com/yarnpkg/rfcs/pull/101), you’ll see that there are some awesome aspects to it:

* Installs ran using Plug'n'Play are up to 70% faster than regular ones.
* Starting from this PR, Yarn will now be on the path to make yarn install a no-op on CI (Continuous Integration).
* Yarn will now be able to tell you precisely when you forgot to list packages in your dependencies.
* Your applications will boot faster through a hybrid approach of static resolutions.

This is something that if you want to try out in your React project, go ahead. This feature is just a fun new add-on that is completely optional.

Here you'll see [Dan Abramov](https://twitter.com/dan_abramov) trying out Yarn Plug-n-Play:

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">I’m trying out Yarn Plug’n’Play and it’s pretty incredible. This GIF is *not* speeded up. I literally created a project in five seconds (on a warm cache). No node_modules. It works. <a href="https://t.co/AjJP5vXxEi">pic.twitter.com/AjJP5vXxEi</a></p>&mdash; Dan Abramov (@dan_abramov) <a href="https://twitter.com/dan_abramov/status/1047583342072406022?ref_src=twsrc%5Etfw">October 3, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Proxy Implementation

Want to configure your own proxy? Create React App 2.0 let’s you do that now!

All you need to do is install the dependency:

```bash
npm install http-proxy-middleware
```

And then create a file called `src/setupProxy.js`. Once you import that dependency, you are ready to go! It’s that easy to get it started!

## Use packages written for latest Node versions

Use any Node version package and with the help of Babel 7 and Webpack 4, it won’t break the build. You will not need to do any addition configuration and will feel confident that it’s being bundled correctly.

## A Smaller CSS Bundle

Chances are you are going to be pointing your project towards modern browsers. If you decide to only target those, maybe a smaller CSS bundle would be beneficial for your project and you could experience faster load times by making fewer requests.

Avoid targeting the following:

`-webkit`
`-ms`

in your CSS and that will help in keeping those bundled. Instead point the browsers to the `package.json`.

## Service Workers

Service workers are now opt-in and are built using [Google’s Workbox](https://developers.google.com/web/tools/workbox/). Workbox is a JavaScript library that gives offline support to your project. It can help with your project’s performance and resilience by caching assets such as: 

* Fonts
* Images
* JavaScript
* CSS
* Other files

## The Addition of TypeScript

[TypeScript](http://www.typescriptlang.org/), an Object-oriented programming language, can be beneficial to use versus JavaScript. Some strong benefits of using TypeScript are:

* It can help find errors more efficiently.
* Checks for "types" being correct.
* Same syntax as JavaScript, so easy to start with.

When starting your React project with `create-react-app`, simply add to the bash command:

```bash
--typescript
```

to add TypeScript to your project.

### Add TypeScript To Create React App Project

There are two ways to get TypeScript active in your project.

Add it into an already existing project:

```bash
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
```

or add it in at the beginning of a new project:

```bash
npx create-react-app name-of-app --typescript
```

Files that end in `.js` change to `.tsx` and you are good to go.

`src/index.js` --> `src/index.tsx`

If you add TypeScript to an already existing project, be sure to restart your development server to get the new changes going. You can find the documentation on this new [TypeScript addition here](https://facebook.github.io/create-react-app/docs/adding-typescript).

## Moving Forward with Create React App 2.0

With React’s new Create React App 2.0 being released, the next thought is, “Should I update all my past projects to 2.0?”. Unless it’s broken, just leave it as is. But in the future, when using the command `create-react-app` to start your project, you’ll know you have so many new features to help you build an amazing project.

To find out which version of Create React App you are using in a particular project, head on over to your `package.json` and find this line telling you which version you are currently utilizing:

```json
"react-scripts": "2.0.3"
```

This is also the place where you would update to 2.0 if desired.

Happy coding!

<include src="asides/AboutAuth0" />


Create React App 2.0: What's New?

andrea-chiarelli

I have over 20 years of experience as a software engineer and technical author. Throughout my career, I've used several programming languages and technologies for the projects I was involved in, ranging from C# to JavaScript, ASP.NET to Node.js, Angular to React, SOAP to REST APIs, etc.

In the last few years, I've been focusing on simplifying the developer experience with Identity and related topics, especially in the .NET ecosystem.

Principal Developer Advocate

Andrea Chiarelli

A tutorial about using FuseBox to configure your JavaScript development environment on Node.js

Introducing FuseBox, an alternative to Webpack

1097492785caf9ffeebffeb624202d8f?s=200 avatar

1097492785caf9ffeebffeb624202d8f?s=200

Prosper is a great speaker, community leader, open source hacker, technical consultant, and a fervent Developer Advocate. He is a full-stack software engineer who has worked on biometric, health and developer tools. Prosper recently co-founded a startup called Eden that’s focused on improving the quality of lives in Nigeria and currently leads the engineering team. He also co-founded forloop, the largest developer community in Africa.

Former Auth0 Employee

Prosper Otemuyiwa

Bootstrap 4 ships with a lot of new features and adds spice to the most popular CSS framework in the world. Learn what's new in Bootstrap!



---

**TL;DR:** Bootstrap is the de-facto design frontend component library for designing web and mobile sites. In this article, I'll cover the new features in Bootstrap 4.0 and several other changes and deprecations.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">We never stopped believing, and hope you didn’t either! Bootstrap 4.0.0 has finally landed! <a href="https://t.co/zFAOxpyhvD">https://t.co/zFAOxpyhvD</a></p>&mdash; Bootstrap (@getbootstrap) <a href="https://twitter.com/getbootstrap/status/954061442940002304?ref_src=twsrc%5Etfw">January 18, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

---

Bootstrap is built and maintained by [@mdo](https://twitter.com/mdo), [@fat](https://twitter.com/fat) and a core team of developers. It is an open source toolkit that provides a responsive grid system, Sass variables and mixins, prebuilt components for developing with HTML, CSS, and JS.

Bootstrap 4.0 final release was announced to the world on January 19, 2018, after the alpha version was released three years ago. Bootstrap 4 is a major rewrite of the entire project. It is such a huge milestone for the Bootstrap team to tag the 4.0.0 release after many years of hard work squashing bugs, improving the framework and polishing the documentation. Let's go through the major changes in Bootstrap from the v4.0.0-beta to version 4.0.0.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Nearly three years of personal open source work and energy has gone into this thing. Words cannot express how happy I am that it’s out. Now, on to v4.1! <a href="https://t.co/XgpZzzDNoY">https://t.co/XgpZzzDNoY</a></p>&mdash; Mark Otto (@mdo) <a href="https://twitter.com/mdo/status/954062092037795840?ref_src=twsrc%5Etfw">January 18, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 1. Normalize Dropped, Reboot Here to Stay

Before version 4-beta, Normalize.css was a dependency in Bootstrap used for rendering the consistent appearance of all the HTML elements across the board. The team decided to drop the dependency, fork some of it and remixed it with Bootstrap's [Reboot](https://getbootstrap.com/docs/4.0/content/reboot/) for a better and stable normalization approach.

## 2. Major Browser Support Change

Bootstrap v4.0 now supports Internet Explorer 10+ and iOS 7+. Furthermore, it added official support for Android v5.0 Lollipop's Browser and WebView.

Unfortunately, it dropped support for IE8, IE9 and iOS 6. If you are building applications that need support for these browser versions, use Bootstrap v3.

## 3. Giant Move to Flexbox

With Bootstrap v4, Flexbox is enabled out of the box. Flexbox ships with a lot of awesome features, thus making Bootstrap v4 very rich with benefits such as a Flexbox based grid, responsive sizing and floats, auto margins, vertical centering, auto-layout grid and even new spacing utilities. Flexbox also powers the new card components.

<include src="TweetQuote" quoteText=" With Bootstrap v4, Flexbox is enabled out of the box."/>

## 4. Improved Grid System

With Bootstrap version 4, an improvement has been made to make it a 5 grid tier system, _xs_, _sm_, _md_, _lg_, and _xl_. The new grid tier, _xl_, extends the media query range all the way down to **544px**.

The improved grid system also offers the following:

- Support for flexbox in the grid mixins and predefined classes.
- Support for vertical and horizontal alignment classes.
- Changes in media queries to avoid repeating query declarations.

    ```js
    @include media-breakpoint-up(sm) {

    }
    @include media-breakpoint-down(sm) {

    }
    @include media-breakpoint-only(sm) {

    }
    ```
- Changed grid mixins to merge `make-col-span` into `make-col` for a singular mixin.

Check out this awesome [Bootstrap 4 Grid Demo on Codepen](https://codepen.io/ncerminara/pen/ZGgJVa/).

## 5. Media Queries on Steriods

The `@screen` format no longer exists in Bootstrap v4.0. Now, you can just use media queries easily like the example below:

    ```css
    // Extra small devices (portrait phones, less than 576px)
    // No media query since this is the default in Bootstrap

    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }

    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }

    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }

    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }
    ```

The new `media-breakpoint-up()`, `media-breakpoint-down()`, `media-breakpoint-between`, or `media-breakpoint-only()` can be used like so:

- `@media (min-width: 576px) and (max-width: 767.98px) { ... }` can be used as `@include media-breakpoint-only(sm) { ... }`.
- `@media (min-width: 768px) and (max-width: 991.98px) { ... }` can be used as `@include media-breakpoint-only(md) { ... }`.
- `@media (min-width: 992px) and (max-width: 1199.98px) { ... }` can be used as `@include media-breakpoint-only(lg) { ... }`.
- `@media (min-width: 1200px) { ... }` can be used as `@include media-breakpoint-only(xl) { ... }`.
- `@media (max-width: 575.98px) { ... }` can be used as `@include media-breakpoint-down(xs) { ... }`.
- `@media (max-width: 767.98px) { ... }` can be used as `@include media-breakpoint-down(sm) { ... }`.
- `@media (min-width: 576px) { ... }` can be used as `@include media-breakpoint-up(xs) { ... }`.
- `@media (min-width: 768px) { ... }` can be used as `@include media-breakpoint-up(sm) { ... }`.

An example of media queries spanning multiple breakpoint widths such as `@media (min-width: 768px) and (max-width: 1199.98px) { ... }` can be used as `@include media-breakpoint-between(md, xl) { ... }` in a sass mixin.


## 6. Improved Form Support in Bootstrap 4

In Bootstrap 4, the default checkboxes and radios have been rewritten to have the same layout styles.

Form classes we were very familiar with in version 3 have been modified like so:

- `.control-label` is now `.col-form-label`.
- `.input-lg` and `.input-sm` is now `.form-control-lg` and `.form-control-sm`, respectively.
- `.form-group-*` classes are now `.form-control-*` classes.
- `.help-block` is now `.form-text` for block-level help text. Utility classes like `.text-muted` can be used for inline help text.
- No more `.radio-inline` and `.checkbox-inline`.
- The `.checkbox` and `.radio` classes have metamorphosed into `.form-check` and the various `.form-check-*` classes.
- `.has-error`, `.has-warning`, and `.has-success` classes have been replaced with HTML5 form validation via CSS’s `:invalid` and `:valid` pseudo-classes.
- `.col-form-legend` no longer exists.

Check out [more information on forms](https://getbootstrap.com/docs/4.0/migration/#forms-1).

## 7. Sass By Default, Less Eliminated

Bootstrap v3 uses [Less](http://lesscss.org/) for source CSS files. With Bootstrap v4, [Sass](http://sass-lang.com/) is now used for source CSS files. From project experiments across the world, frontend developers tend to favour Sass over Less. Sass is very flexible and also compiles faster!

## 8. Elevated Card Components

Bootstrap v4 dropped support for **panels**, **thumbnails**, and **wells** in favor of the new **card** component built with Flexbox. The card component provides a flexible and extensible content container with multiple variants and options. It includes options for headers, footers, contextual background colours and powerful display options.

Functionality for panels, thumbnails and wells are available as modifier classes for cards.

``` html  

<div class="card">
  <img class="card-img-top" src="https://images.ctfassets.net/23aumh6u8s0i/5HBmRYlHnhUb0J3dxKTdep/cf9acc7499491eec554b041136a2b270/Screen_Shot_2018-01-08_at_2" alt="Card image cap"/>
  <div class="card-body">
    <h5 class="card-title">Profile Picture</h5>
    <p class="card-text">Prosper Otemuyiwa, Developer Advocate</p>
    <a href="#" class="btn btn-primary">Visit Profile</a>
  </div>
</div>

```

You can have:

- `class="card-body"` which is the building block.
- `class="card-header"` which gives you a header within a card.
- `class="card-footer"` which gives you a footer within a card.
- `class="card-info"`
- `class="card-inverse"`
- `class="card-warning"`
- `class="card-danger"`
- `class="card-success"`

All these classes are available as styling for header elements such as `.card-warning` to a `<h2>`,`<h3>` element.

Cards have no specific width so they'll be 100% wide by default. Custom CSS, grid classes and mixins can adjust it to whatever you want.

## 9. Spacing Utilities

Bootstrap includes a plethora of shorthand responsive margin and padding utility classes to modify an element’s appearance. This simply works by assigning responsive-friendly margin or padding values to an element with shorthand classes.

Here's a psuedocode of its representation, `{margin or padding}-{sides}-{size}`. An example is:

```bash
.mt-2 {
  margin-top: 2 !important;
}

.ml-3 {
  margin-left: ($spacer * .25) !important;
}
```

Check out [more information on spacing utilities](https://getbootstrap.com/docs/4.0/utilities/spacing/).

## 10. Improved Tooltip auto-placement Support

Bootstrap v4 ships with improves support for auto-placement of tooltips, popovers and dropdowns. Bootstrap 4 dropped support for [Tether.js](https://github.com/HubSpot/tether/) in favour of [Popper.js](https://github.com/FezVrasta/popper.js) which does a great job and is actively maintained.

  ```js
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
  ```

  ```html
  
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
    Tooltip on top
  </button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
    Tooltip on right
  </button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
    Tooltip on bottom
  </button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
    Tooltip on left
  </button>
  
  ```

  // Enable Popovers everywhere

  ```js
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
  ```

## Deprecations and Other Updates

* The global font-size has been increased from `14px` to `16px`.
* The primary CSS unit is now `rem` rather than `px`. However, pixels are widely used for media queries.
* Bootstrap 4 dropped the Glyphicons icon font. Suggested options are [fontAwesome](http://fontawesome.io/) and [Octicons](https://octicons.github.com/).
* Bootstrap 4 also dropped the **Affix JQuery library**. Suggested option is to use the `position:sticky` polyfill.
* Bootstrap 4 dropped support for non-responsive usage of Bootstrap.
* Bootstrap 4 uses a user's system fonts, with a fallback to Helvetica Neue, Arial, and sans-serif.

Check out other [Angular 5 updates here](https://github.com/angular/angular/blob/master/CHANGELOG.md).

## Upgrading to Bootstrap 4

The Bootstrap team has a comprehensive guide for [migrating to Bootstrap v4](https://getbootstrap.com/docs/4.0/migration). However, there is a very [nifty tool](http://upgrade-bootstrap.bootply.com) from the community that allows you to drop in a piece of code and convert it to the Bootstrap v4 equivalent.

![Bootstrap v3](https://images.ctfassets.net/23aumh6u8s0i/3YGf1yyMIjoJddMRpaBUuJ/704866e21b002878ba73688a06656735/pieceofcode)
_Bootstrap v3_

![Bootstrap v4](https://images.ctfassets.net/23aumh6u8s0i/6JBv3iQI3oJ2H17ZLazMe3/77fc5a3f07eb48e5011641f80430a31c/convertedcode)
_Converted to Bootstrap v4 code_

## Aside: Styling Auth0 Login Page

Auth0, a global leader in Identity-as-a-Service (IDaaS), provides thousands of customers in every market sector with the only identity solution they need for their web, mobile, IoT, and internal applications. Its extensible platform seamlessly authenticates and secures more than 50M logins per day, making it loved by developers and trusted by global enterprises.

[Auth0 offers a free tier](https://auth0.com/pricing) to get started with modern authentication. Check it out, or [sign up for a free Auth0 account here](https://auth0.com/signup)!

![Auth0 Login Page](https://images.ctfassets.net/23aumh6u8s0i/6u8RmYwmbqHKTbnEkSTeBz/3fdbdc3467b98bf18004f66c5a4ffcf8/lpg)
_Auth0 Login Page_

You can customize the look and feel of the Auth0 Login Page to suit your web application's appearance or theme from the Auth0 dashboard. Click on the **Hosted Pages** option from the sidebar, then go ahead to enable the **Customize Login Page** button.

![Enable the Customize Login Page button](https://images.ctfassets.net/23aumh6u8s0i/5XAqYpZsPxVOdctI2WCWO5/ed3b655f08274cc7c82c650effb1c0c1/customizeloginpage)
_Enable Customize Login Page button_

You'll be presented with various templates. Choose whatever template suits you.

![Auth0 Default templates](https://images.ctfassets.net/23aumh6u8s0i/2pgculTyB6qP6FocWnJBxz/bab043d9ad89c2da8de77d54b58ffd24/defaulttemplates)
_Auth0 Default templates_

For every template selected, the editor will be populated with HTML, CSS and JS code that you can modify to change the look and feel.

![Auth0 Custom Login Form](https://images.ctfassets.net/23aumh6u8s0i/4DLAguUNW8JcO0vNPiXSkN/9e8016d26df7051bb39f77d9765925b1/customloginform)
_Auth0 Custom Login Form_

## Conclusion

**Bootstrap 4** came loaded with new features and significant improvements. It is better, more customizable and slick. I am proud of what the Bootstrap team and the community achieved with this release.

<include src="TweetQuote" quoteText="Bootstrap 4 is a major rewrite of the entire project."/>

Have you switched to Bootstrap v4.0 yet? What are your thoughts? Let me know in the comments section! 😊


"css"