![\"Features](\"/a2514ba65b9a9296996372a35081a94e/features-of-solidjs.webp\")
SolidJS is a declarative JavaScript framework used for building UIs and web applications pragmatically and performatively. Even though it's relatively new, its similarity with other JavaScript frameworks like React and Svelte has made it more adoptable for the developer community.
\nSo in this tutorial, I'll give you a complete walkthrough of SolidJS and help you understand the essentials. You'll also build a simple web application with SolidJS to get a better hang of the basics. Finally, I'll compare and contrast it with the most popular framework in town — React.
\n
SolidJS takes the syntax and developer experience of React and combines it with the performance of Svelte to give you the best of both worlds.
\nJust like React, Solid uses JSX to render HTML in the browser. It also uses similar syntax for reactivity to update DOM in real-time. However, unlike React, it uses a compiled DOM instead of virtual DOM.
\nThis means you get a smaller size pure JavaScript bundle, much like the production bundle of your Svelte or Vanilla JS application. This makes it blazingly fast and highly performant.
\nLet's now understand the fundamentals of SolidJS using some code examples. To follow along, you can directly run these snippets in the SolidJS playground.
\nSolid follows the component architecture for modularity and reusability. Let's see how you can create an entry component and render it to the DOM.
\nHere's a component HelloWorld that is injected into the DOM inside an HTML element that has an id app:
import { render } from "solid-js/web";\n\nfunction HelloWorld() {\n \n\n return (\n <h1>Hello World</h1>\n );\n}\n\nrender(() => <HelloWorld />, document.getElementById("app")!);From the above code, it's also clear that components are functions that return the HTML template using JSX.
\n![\"HelloWorld](\"/d96256d16965f92c7faec59f4e627b24/hello-world-example.webp\")
Solid components allow only a single JSX element at the top level. To combat this, you can use special JSX elements called fragments:
\n <>\n <h1>Hello World </h1>\n <p>This is my first solid app </p>\n </>Components can be nested inside one another. For instance, here you have a <Header/>component:
function Header() {\n return (\n <h1>\n Header\n </h1>\n );\n}\n\nexport default Header;That is rendered inside the main <App/>component:
import { render } from "solid-js/web";\nimport Header from './header';\n\nfunction App() {\n \n\n return (\n <>\n <Header/>\n <h1>\n Hello World\n </h1>\n </>\n );\n}\n\nrender(() => <App />, document.getElementById("app")!);That should give you both the components on the DOM like this:
\n![\"Header](\"/635fc35b840666bba0a846f8c215c437/header-and-hello-world.webp\")
Props are data and functions you can pass from one component to another to share data and features between the two components. In the previous example, you can pass a title prop to the <Header/> component:
...\n <Header title="Header"/>\n...Then consequently consume this prop inside the child component:
\nfunction Header({title}) {\n return (\n <h1>\n {title}\n </h1>\n );\n}\n\nexport default Header;Reactivity allows you to create variables that dynamically trigger a DOM update when changed.
\nSolidJS allows you to create reactive variables called signals using the createSignal function. This function takes in the initial value of the variable as a parameter. And it returns an array where the first element is the variable itself and the second element is a function used to mutate that variable.
Here's an example that changes the reactive variable called name:
import { render } from "solid-js/web";\nimport { createSignal } from "solid-js";\n\nfunction DisplayName() {\n const [name, setName] = createSignal('fuzzysid');\n const changeName = () => setName('siddhant')\n\n return (\n <>\n <h1> {name} </h1>\n <button onClick={changeName}> Change Name </button>\n </>\n );\n}\n\nrender(() => <DisplayName />, document.getElementById("app")!);Initially, the name outputs the string 'fuzzysid':
\n![\"Reactivity](\"/1f715e6e1a7bbd2df0c8aa9d806eda9b/reactivity-before-update.webp\")
A click event is used on the button that fires a function called changeName. When you press the Change Name button, the changeName function updates the name signal to 'siddhant':
![\"Reactivity](\"/ff011e658142db06b088ebff6415ca08/reactivity-after-update.webp\")
What a state is to React components, a signal is to Solid components. Here's another useful and typical example of reactive variables:
import { render } from "solid-js/web";\nimport { createSignal } from "solid-js";\n\nfunction Counter() {\n const [count,setCount] = createSignal(0);\n\n return (\n <>\n <h1> Counter: {count} </h1>\n <button onClick={()=>setCount(count=>count-1)}> Decrement </button>\n \n <button onClick={()=>setCount(count=>count+1)}> Increment </button>\n </>\n );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);You can take the current value of a signal inside the signal's mutation's callback function. The above code used the present value of count to increment and decrement it accordingly.
Effects are triggers or watchers that can help you fire a function when a signal updates.
\nLet's say, in the previous example, you want to throw an alert when the count becomes greater than 5.
\nTo do so, you can create an effect using the createEffect function. It takes a callback function as a parameter. This callback function is fired whenever a signal invoked inside it changes.
createEffect(()=>{\n if(count()>5) alert('Count is greater than five')\n})So now, if you click on the Increment button, you should get an alert when it becomes greater than 5:
\n![\"Effects](\"/c71abb37732d1396f71838c2649bc688/effects-example.webp\")
Solid provides special components called <Show> to render a template based on a condition or the value of a signal. Here's an example of that:
import { render } from "solid-js/web";\nimport { createSignal,Show } from "solid-js";\n\nfunction Counter() {\n const [count,setCount] = createSignal(0);\n\n return (\n <>\n <h1> Counter: {count} </h1>\n <button onClick={()=>setCount(count=>count-1)}> Decrement </button>\n \n <button onClick={()=>setCount(count=>count+1)}> Increment </button>\n <Show when={count()>5}>\n <p>Count is greater than five </p>\n </Show>\n </>\n );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);Once the count becomes greater than 5, the <p> will start showing on the DOM:
![\"Conditionals](\"/412d0e34c71697847bf639180351097b/conditionals-example.webp\")
Just like <Show>, Solid also provides a special component called <For> to render a list on the DOM from an array.
In the following example, you use the <For> component to render a list of fruits from the fruits signal. Inside the opening brackets of the <For> component, you specify the variable name that will be used to extract items to loop through using the each prop.
Then, you can take a callback inside which you get the individual item as the first parameter and an optional index of the iteration as a second parameter.
\nimport { render } from "solid-js/web";\nimport { createSignal, For } from "solid-js";\n\nfunction Counter() {\n const [fruits,setFruits] = createSignal([\n 'Mango 🥭',\n 'Apple 🍎',\n 'Banana 🍌',\n 'Melon 🍈',\n 'Watermelon 🍉'\n ]);\n\n return (\n <>\n <h1> Fruits </h1>\n <For each={fruits()}>{(fruit,index)=>\n <div>{index()+1}: {fruit}</div>\n }\n </For>\n </>\n );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);Here's what the list looks like when rendered in the DOM:
\n![\"For](\"/b01ad13211d6eb1510bd92846e206b7c/for-example.webp\")
Most frameworks provide several lifecycle methods for different purposes. This often leads to a steeper learning curve as well as unnecessary complexity.
\nSolid stays truly reactive: it gives you the createEffect and signals to build whatever interaction you want. However, to simplify things further, it gives you two primary lifecycle methods.
The onMount method is fired just once in the entire lifecycle of a Solid component. It runs only the first time your component mounts on the DOM. It's an excellent place to make any API calls your application needs.
For instance, consider the following example that uses the onMount method to fetch and render some data:
import { render } from "solid-js/web";\nimport { createSignal, onMount, For } from "solid-js";\n\nfunction App() {\n const [posts, setPosts] = createSignal([]);\n\n onMount(async () => {\n const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);\n setPosts(await res.json());\n });\n\n return <>\n <h1>Effects: onMount</h1>\n\n <div>\n <For each={posts()}>{ post =>\n <p>\n {post.body}\n </p>\n }</For>\n </div>\n </>;\n}\n\nrender(() => <App />, document.getElementById('app'));It renders a list of posts fetched from a dummy API:
\n![\"onMount](\"/f06543ab7114424eaf97db0c115aec75/on-mount-example.webp\")
onCleanup is the exact opposite of onMount. It's fired whenever a component unmounts from the DOM completely. Ideally, you can use this method to clear any event listeners you may have added to your DOM elements.
Here's an example that does that:
\nimport { render } from "solid-js/web";\nimport { onMount, onCleanup } from "solid-js";\n\nfunction App() {\n\n const handleMouseEnter=()=>{\n console.log('Entered the box')\n }\n\n onCleanup(()=>{\n const box=document.querySelector('#box');\n box.removeEventListener('mouseenter',handleMouseEnter)\n })\n\n onMount(async () => {\n const box=document.querySelector('#box');\n const onMouseEnter=box.addEventListener('mouseenter',handleMouseEnter)\n });\n\n return <>\n <h1>Effects</h1>\n\n <div id="box" style={{height:'200px',width:'200px',border:'1px solid red'}}>\n\n </div>\n </>;\n}\n\nrender(() => <App />, document.getElementById('app'));When you enter the red box, the mouseenter event fires, and you get a message on the console. As a cleanup, when the component unmounts, we remove this event listener from that <div>.
![\"OnCleanup](\"/71b873ee324c8bf6eea0890a2c55c5df/on-cleanup-example.webp\")
Let's combine all that knowledge to build a small todo application with Solid.
\nTo get started, you'll create a new SolidJS project configured with Vite by running:
\nnpx degit solidjs/templates/js my-appThat should create a new Solid project for you. Navigate inside this project and open it in a code editor (like VS Code):
\ncd my-app && code .Next, install the dependencies by running:
\nnpm iAnd finally, kickstart the app by running:
\nnpm run startThat should open the project for you at http://localhost:3000. Awesome!
Your initial project structure gives the <App/> component by default. This is going to be your entry point component. For starters, clean everything that's inside it:
import styles from './App.module.css';\n\n\nfunction App() {\n \n return (\n <div class={styles.App}>\n \n </div>\n );\n}\n\nexport default App;Notice that you also have an App.module.css file being imported here. It's then referenced inside the <div> container. You'll add all our styles inside this App.module.css file and reference it the same way.
Now let's create some boilerplate files. Here's what the architecture of our Todo app would look like:
\n![\"Todo](\"/1798fa4d73729a43b10f75d049badf3a/todo-app-architecture.webp\")
You'll have your top-most parent <App/> component that would store all the todos and the functions to manipulate these todos. This <App/> component will have two child components.
First, the <AddTodo> component will be responsible for adding a new todo.
Second, the <Todos/> component will be responsible for rendering the list of todos via its own child — <TodoItem/> component.
Create a JSX file for each of the above components.
\nThe <AddTodo/> component will render an input field and a button. The input field is where the user types a new todo. The button will be used to send this new todo back to a function in the parent <App/> component to add this todo to the todos list. This function will be taken as props inside the <AddTodo/> component.
To store the newTodo, create a signal since you want this property to be reactive based on what the user enters in the input.
const [newTodo,setNewTodo]=createSignal('')Now let's add the template inside the component's JSX:
\nimport {createSignal} from 'solid-js'\n\n\nfunction AddTodo({addTodo}){\n\n const [newTodo,setNewTodo]=createSignal('')\n\n \n return(\n <div>\n <input \n onChange={handleChange} \n value={newTodo()} type="text" \n placeholder="Type a new todo..."\n />\n <button onClick={handleClick}>Add Todo</button>\n </div>\n )\n}\n\nexport default AddTodo;You bind the input field to the newTodo signal. You now need to create the handleChange function that updates the newTodo signal based on the onChange event.
You also need to create the handleClick function that passes the newTodo signal to the addTodo function prop and clears the input state.
const handleChange=(e)=>setNewTodo(e.target.value)\n\n const handleClick=()=>{\n addTodo(newTodo)\n setNewTodo('')\n }Here's how the entire <AddTodo/> component looks like:
import {createSignal} from 'solid-js'\n\n\nfunction AddTodo({addTodo}){\n\n const [newTodo,setNewTodo]=createSignal('')\n\n const handleChange=(e)=>setNewTodo(e.target.value)\n\n const handleClick=()=>{\n addTodo(newTodo)\n setNewTodo('')\n }\n \n return(\n <div>\n <input \n onChange={handleChange} \n value={newTodo()} type="text" \n placeholder="Type a new todo..."\n />\n <button onClick={handleClick}>Add Todo</button>\n </div>\n )\n}\n\nexport default AddTodo;You also need to render this inside the <App/> component:
import styles from './App.module.css';\nimport {createSignal} from 'solid-js'\nimport AddTodo from './AddTodo';\n\nfunction App() {\n\n const addTodo=(newTodo)=>{\n \n }\n\n const deleteTodo=(todo)=>{\n\n }\n\n return (\n <div class={styles.App}>\n <h1 class={styles.heading}>Todos</h1>\n <AddTodo addTodo={addTodo}/>\n </div>\n );\n}\n\nexport default App;Once you do that, you should see an input field with a submit button rendered by the <AddTodo/> component on the screen:
![\"AddTodo](\"/3bf1935a89c191327f5787f41f4eeb14/add-todo-component.webp\")
Now let's work on two simple components responsible for rendering the todos. First is the <Todos/> component. As you already know, this component takes in two props — a list of todos called the todos signal and the deleteTodo method.
import { For } from 'solid-js';\nimport TodoItem from './TodoItem';\n\nfunction Todos({todos,deleteTodo}){\n console.log(todos())\n return(\n <For each={todos()}>{(todo,ind)=>\n \n }\n </For>\n )\n\n}\n\nexport default Todos;You use the <For/> component to loop through the list of todos. Now, you need to pass each todo item and the deleteTodo method further down to your <TodoItem/> component. This component is responsible for rendering each list item.
function TodoItem({todo,deleteTodo}){\n const handleDelete=()=>deleteTodo(todo);\n return(\n <p onClick={handleDelete}>{todo}</p>\n )\n}\n\nexport default TodoItem;When you click on an item, you invoke the deleteTodo function and pass the clicked todo item as a parameter.
Finally, render the <Todos/> component inside the root <App/> component.
import styles from './App.module.css';\nimport {createSignal} from 'solid-js'\nimport Todos from './Todos';\nimport AddTodo from './AddTodo';\n\nfunction App() {\n const [todos,setTodos]=createSignal([])\n\n const addTodo=(newTodo)=>{\n }\n\n const deleteTodo=(todo)=>{\n \n }\n\n return (\n <div class={styles.App}>\n <h1 class={styles.heading}>Todos</h1>\n <AddTodo addTodo={addTodo}/>\n <Todos deleteTodo={deleteTodo} todos={todos}/>\n </div>\n );\n}\n\nexport default App;Great! Let's complete the todo app by writing the logic for adding and deleting a todo.
\nTo add a new todo, you only need to complete the logic inside the addTodo function in the <App/> component. This function already takes a newTodo parameter, the new todo item you need to add.
const addTodo=(newTodo)=>{\n setTodos([newTodo(),...todos()]);\n}You'll add the newTodo in the todos signal that is an array using its setter function setTodos. Use JavaScript array destructuring here to ensure to keep the previous todos intact. Let's give this a whirl now:
It looks like you're able to add todos now. Awesome!
\nTo delete the todo when they're clicked, populate your deleteTodo function:
const deleteTodo=(todo)=>{\n let newTodos=todos;\n newTodos=newTodos().filter(_todo=>_todo!=todo);\n setTodos(newTodos)\n }First, make a copy of the current todos array. Then, filter through this copy to remove the todo you wish to delete. Finally, update your original todos signal with this copy using the setTodos setter. Let's test it out now:
You can delete todos as well; fantastic!
\nFunctionally your app is complete, but it surely misses some aesthetics. Let's add some simple yet neat-looking styles. You can directly update the styles in our App.module.css file:
*{\n margin: 0;\n padding: 0;\n}\n\n.App {\n text-align: center;\n height: 100vh;\n background: #F8F8F8;\n padding: 100px;\n display:flex;\n flex-direction: column;\n align-items: center;\n}\n\n.heading{\n font-size: 96px;\n margin-bottom: 20px;\n}\n\ninput{\n border-radius: 12px;\n outline: none;\n border: none;\n padding: 5px 20px;\n margin-right: 20px;\n height: 60px;\n width: 400px;\n font-size: 24px; \n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n}\n\nbutton{\n height: 65px;\n width: 150px;\n border: none;\n outline: none;\n border-radius: 12px;\n font-size: 24px;\n padding: 5px 15px;\n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n cursor: pointer;\n font-weight: 600;\n background:#2e3136;\n color:#fff;\n}\n\np{\n height: 60px;\n background: white;\n width: 600px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n font-size: 24px;\n margin: 20px 0px;\n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n}\n\np:hover{\n background: rgb(232, 169, 146);\n color:#fff;\n cursor: pointer;\n}\n\n\n.header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}And that should give us a much better-looking todo app now:
\n![\"Updated-app\"](\"/47281a0b4ba0ce1cf44dc3af9e917f13/updated-app.webp\")
If you're coming from a React background, building the todo app must feel like a piece of cake to you! This is because, in terms of syntax and architecture, Solid is strikingly similar to React. It uses the same structure of using functional components, returning JSX, fragments, one-way data binding, etc.
\nUsing effects, refs and events are also much similar to React in Solid. So it's safe to say that Solid provides almost the same if not slightly different syntactic sugar as React. Then why do we need another React-like framework for building web applications?
\nSolid differs from React in terms of performance, developer experience, rendering algorithm, and reactivity. Let's skim through the key differences:
\nAt the beginning of this tutorial, we discussed how Solid doesn't use a virtual DOM. Instead, it uses a compiled DOM. This gives it a significant edge over React and any other framework in terms of run-time performance. It generates a blazingly fast production bundle that is aimed to provide a more rich user experience for your users.
\n![\"SolidJS](\"/b978d84ac56d354428cba67a79b0562c/solidjs-performance.webp\")
If you wish to dive deeper into these stats and take a closer look at performance benchmarks, here's a comparison guide you can refer to.
\nReactivity lies at the heart of SolidJS, which is why you'll never find any unnecessary renders of your Solid components. Only the part of a template that needs to update will re-render.
\nWith React, however, change in a state leads to re-rendering the entire component. There are ways to combat this, but it needs additional efforts to learn and incorporate these concepts into your applications.
\nEven though Solid has excellent and extensive documentation, the React community is much larger since it has been around for longer. That can be a deal-breaker if you want to build scalable web applications quickly. Even third-party libraries are short in number for Solid in comparison to React.
\nSolid has an exciting future and is worth a side-project or an MVP for your startup. If you wish to explore Solid in-depth, you can check out an official tutorial by the Solid team here that walks you through every concept in Solid. You can also explore the entire code for the demo in this tutorial here. Until next time!
\n","frontmatter":{"date":"June 28, 2022","updated_date":null,"title":"Introduction to SolidJS","tags":["SolidJS","React","Frontend"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/98c70b8f15d4e24e9751c950a5a4f1cc/58556/introduction-to-solidjs.webp","srcSet":"/static/98c70b8f15d4e24e9751c950a5a4f1cc/61e93/introduction-to-solidjs.webp 200w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/1f5c5/introduction-to-solidjs.webp 400w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/58556/introduction-to-solidjs.webp 800w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/99238/introduction-to-solidjs.webp 1200w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/7c22d/introduction-to-solidjs.webp 1600w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/d3365/introduction-to-solidjs.webp 2240w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Siddhant Varma","github":"FuzzySid","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/guest-post/bootstrap4-vs-bootstrap5/"},"html":"Bootstrap is an open-source tool collection for creating responsive web pages and web apps. It is the combination of HTML, CSS, and JavaScript framework that makes it easy to develop responsive, mobile-first websites. It mainly aims to resolve the cross-browser compatibility issue. Bootstrap is at the core of every website that is perfect for all screen sizes and looks perfect in every modern browser.
\nIn order to start using Bootstrap in your web pages, you need to add a few CSS and JS tags in your template file.
\nCSS Link tag\n\n<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">JS Link tag\n\n<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>\n\n<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>\n\n<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>\n\nNOTE: Always add the
\njqueryscript first, followed by thepopperandbootstrapscripts. Then you can add any of your custom scripts below them.
The developers have been working continuously to enrich the developer experience of using Bootstrap for customizing the web pages quite easily. They've released many minor and major versions. But the major releases that are the most popular are the Bootstrap v4.x and Bootstrap v5.x. Let's look at what all v4.x offered and how those things evolved in the v5.x release with additional features.
Bootstrap 4 was launched back in January 2018, and it was a great improvement over the existing previous versions. However, the most loved features included the following.
\nFlexbox grids gave the power to web developers to align the columns with ease. Now, you could position the columns at any part of the view simply by using classes like justify-content-center or align-items-end, and so on. You can also change the direction of rows which makes the vertical layouts much easier to implement and maintains responsiveness at the same time.
Bootstrap 3 had only four tiers, but Bootstrap 4 has provided improvements by providing new device-width to enhance the support from phablets to smaller devices. The new grid tiers specified the following device widths.
\nBootstrap 4 added the support for Sass, which is a widely-used and very popular CSS preprocessor. A Sass style sheet offers better control and customization and enables defining how you exactly want to use Bootstrap.
\nYou no longer need to design multiple elements and combine them to provide a card view to the users. With the introduction of Cards component, you can directly use this component and further customize it using newly available bootstrap classes to redefine the look and feel of card structures, like profile cards or information tiles. Card component also doesn't have a fixed width and dissolves into the container it is placed into.
\nSpacing utilities make your life easier by providing ready-made utility margin and padding classes that you can simply apply to each visual component. The margin classes are like mt-2 or mx-2, and the padding classes are like pt-2 or px-2, where m stands for margin, p stands for padding, the t for top or x for both left and right side, and the number says the amount you need.
Bootstrap 5 came into play back in May 2021. This release was launched after several iterations of alpha and beta releases and hence had a stack of major additions and new features. Some of the most talked about features are listed below.
\nLet's dive into its features by comparing how things changed in Bootstrap 5 and understanding what better design perspectives it offers for developers.
\nThe above section talked about the features of both Bootstrap 4 and Bootstrap 5. This section talks about the upgrades that Bootstrap 5 provides over Bootstrap 4.
\nThe grid system is retained in Bootstrap 5. However, an extra grid tier xxl has been introduced to minimize the effort in making the pages responsive on higher resolution displays.
Columns don't have a default relative position in Bootstrap 5.
Classes have been added to address vertical spacing.
The form elements in Bootstrap 4 have defaulted to the browser-provided view. However, in Bootstrap 5, the form elements have a custom design that enables them to have a consistent look and feel in all browsers.
\nThe new form controls are based on completely semantic, standard form controls. This helps developers to avoid adding extra markups for form controls.
\nUnlike Bootstrap 4, Bootstrap 5 enables the developers to modify and create their own utilities.
\nYou can simply use sass to create your own utilities.
You can use the state option to generate dummy class variations like hover and focus.
$utilities: (\n "opacity": (\n property: opacity,\n class: opacity,\n state: hover,\n values: (\n 0: 0,\n 25: .25,\n 50: .5,\n 75: .75,\n 100: 1,\n )\n )\n);Bootstrap 5 no longer supports Internet Explorer 10 and 11 like its predecessor, Bootstrap 4.
\nBootstrap 4 had limited color options. But Bootstrap 5 has included many new color options to its color palette, enabling you to choose from the various shades available. You can find some of the color shades below.
\n![\"Bootstrap](\"/816dccdb459358a5d14357ec4f72234d/colors.webp\")
Bootstrap 4 didn't have an SVG icon library. You had to use other third-Party libraries like Font Awesome to use icons in your applications. But Bootstrap 5 has taken care of this issue by introducing its own SVG library with 1000+ icons.
It also includes a web font version in the stable version release of the icon library.
\n![\"Bootstrap](\"/03fd84a90515e2b339b5919c4dd52e07/BootStrapIcons.webp\")
Bootstrap 5 has moved to Hugo for its static site generation over Jekyll. Hugo is a fast static site generator implemented in Go and is quite popular. You can learn more about Hugo here.
\nBootstrap 5 update brings in an update for Popper.js as well, Popper.js v2. Popper.js generally helps to design the tooltips and popovers. With v2, the following changes come in:
fallbackPlacement option becomes fallbackPlacementsoffset option is no longer available. However, you can use the popperConfig parameter to achieve this.Bootstrap 5 allows loading placeholders in your pages. This means that you can utilize the space of the components by showing placeholders in their place while they're still loading the actual content.
\n![\"Placeholder](\"/c5721b448635aeda1d7d2f2697b098a3/placeholders.webp\")
Bootstrap 5 adds support for floating labels in forms for the input fields. You can simply use the form-floating class to enable a floating label. When you enter some value into the input fields, they automatically adjust their position to their floated area.
![\"Floating](\"/d937339a8b17213105a7403c828e1153/flabels.webp\")
Bootstrap 5 has added support for RTL (Right-to-Left), which means you can develop content that needs writing from the right side of the page and continues to the left. As a result, websites in languages like Arabic, Sindhi, and Urdu can easily be developed.
\n![\"RTL](\"/f18b789d3f73dd8d46a078af0c124adf/rtl.webp\")
Bootstrap used jQuery from the very beginning as a dependency to offer dynamic features. With Bootstrap 5, jQuery is dropped, and Vanilla JS is introduced as its replacement.
\n\n\nNOTE: There are still JS dependencies that depend on Popper and Vanilla JS modules. However, jQuery is optional and can be added based on the requirement of the project.
\n
data-* attribute has been renamed to data-bs-*.accordion component that includes icons that have a state and can be clicked. The accordion-flush class can be used to remove the default background color, borders, or corners to possibly render accordions edge-to-edge with the parent element.inline-block property is removed in Bootstrap 5, and the dropdown-menu-dark class now loads with a default black dropdown.jumbotron has been terminated in Bootstrap 5.relative.g* class instead of gutter. The font size is now set to rem instead of px.offcanvas component that enables you to create hidden view panes that would pop out when you interact with component tied to it -- e.g., side navigation bars, shopping carts, etc. Here is an example of the bottom offcanvas component.![\"Offcanvas](\"/b98b75cc8a7a55ccbfe8d7639bb664b3/offcanvas.webp\")
Bootstrap 4 used to do a great job providing all the flexibility and responsiveness for designing the web pages. However, Bootstrap 5 adds several new aspects that help to reduce the effort to do the same. But still, you need to keep certain parameters in mind before choosing either of these two.
\nIf you have an existing project that needs to support IE 10 and 11 or depends on jQuery, you should probably stick to Bootstrap 4. Bootstrap 5 can be overwhelming but might break your project structure if not migrated properly.
\nBut if you're starting a new project and want to provide a more immersive UI for the users, definitely opt for Bootstrap 5 to use its modern components, which this article discussed above.
\nThis is all for this blog post at the moment. I hope you had a great time reading this and learned something new. Do let me know in the comments if you liked the content.
\n\n\n","frontmatter":{"date":"October 21, 2021","updated_date":null,"title":"Bootstrap 4 vs. Bootstrap 5: What is the Difference?","tags":["Bootstrap","Frontend","Sass"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/b8214436ee2553d77f17b33b5fdb3112/58556/coverImage.webp","srcSet":"/static/b8214436ee2553d77f17b33b5fdb3112/61e93/coverImage.webp 200w,\n/static/b8214436ee2553d77f17b33b5fdb3112/1f5c5/coverImage.webp 400w,\n/static/b8214436ee2553d77f17b33b5fdb3112/58556/coverImage.webp 800w,\n/static/b8214436ee2553d77f17b33b5fdb3112/99238/coverImage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rutam Prita Mishra","github":"Rutam21","avatar":null}}}}]}},"pageContext":{"tag":"Frontend"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}NOTE: All the images used in this blog post are taken from the official Bootstrap website and are used here for reference purposes only.
\n