Alternatives to Bootstrap logo

Alternatives to Bootstrap

Semantic UI, jQuery, Material, React, and Foundation are the most popular alternatives and competitors to Bootstrap.
50K
7K
+ 1
7.5K

What is Bootstrap and what are its top alternatives?

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap is a tool in the Front-End Frameworks category of a tech stack.
Bootstrap is an open source tool with 137.6K GitHub stars and 67.7K GitHub forks. Here’s a link to Bootstrap's open source repository on GitHub

Bootstrap alternatives & related posts

related Semantic UI posts

Lee Benson
Lee Benson
React
React
GraphQL
GraphQL
Apollo
Apollo
JavaScript
JavaScript
TypeScript
TypeScript
Webpack
Webpack
React Helmet
React Helmet
styled-components
styled-components
Sass
Sass
Less
Less
PostCSS
PostCSS
Bootstrap
Bootstrap
Semantic UI
Semantic UI
Foundation
Foundation
React Router
React Router
Koa
Koa
#JSX
#React.
#Css
#StyledComponents.
#Async
#HTML
#GraphQL
#Apollo

ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

See more
jQuery logo

jQuery

122.1K
14.9K
6.6K
122.1K
14.9K
+ 1
6.6K
The Write Less, Do More, JavaScript Library.
jQuery logo
jQuery
VS
Bootstrap logo
Bootstrap

related jQuery posts

Kir Shatrov
Kir Shatrov
Production Engineer at Shopify · | 18 upvotes · 161.6K views
atShopifyShopify
jQuery
jQuery
JavaScript
JavaScript
React
React
TypeScript
TypeScript
Prototype
Prototype
#FrameworksFullStack
#Languages

The client-side stack of Shopify Admin has been a long journey. It started with HTML templates, jQuery and Prototype. We moved to Batman.js, our in-house Single-Page-Application framework (SPA), in 2013. Then, we re-evaluated our approach and moved back to statically rendered HTML and vanilla JavaScript. As the front-end ecosystem matured, we felt that it was time to rethink our approach again. Last year, we started working on moving Shopify Admin to React and TypeScript.

Many things have changed since the days of jQuery and Batman. JavaScript execution is much faster. We can easily render our apps on the server to do less work on the client, and the resources and tooling for developers are substantially better with React than we ever had with Batman.

#FrameworksFullStack #Languages

See more
Dan Robinson
Dan Robinson
at Heap, Inc. · | 18 upvotes · 129K views
atHeapHeap
jQuery
jQuery
Backbone.js
Backbone.js
Marionette
Marionette
TypeScript
TypeScript
React
React
MobX
MobX
#JavascriptUiLibraries
#Libraries
#JavascriptMvcFrameworks
#TemplatingLanguagesExtensions

The front end for Heap begun to grow unwieldy. The original jQuery pieces became difficult to maintain and scale, and a decision was made to introduce Backbone.js, Marionette, and TypeScript. Ultimately this ended up being a “detour” in the search for a scalable and maintainable front-end solution. The system did allow for developers to reuse components efficiently, but adding features was a difficult process, and it eventually became a bottleneck in advancing the product.

Today, the Heap product consists primarily of a customer-facing dashboard powered by React, MobX, and TypeScript on the front end. We wrote our migration to React and MobX in detail last year here.

#JavascriptUiLibraries #Libraries #JavascriptMvcFrameworks #TemplatingLanguagesExtensions

See more
Material logo

Material

52
37
0
52
37
+ 1
0
A Graphics Framework for Material Design in Swift
    Be the first to leave a pro
    Material logo
    Material
    VS
    Bootstrap logo
    Bootstrap
    React logo

    React

    29K
    20.8K
    3.4K
    29K
    20.8K
    + 1
    3.4K
    A JavaScript library for building user interfaces
    React logo
    React
    VS
    Bootstrap logo
    Bootstrap

    related React posts

    Vaibhav Taunk
    Vaibhav Taunk
    Team Lead at Technovert · | 27 upvotes · 117.4K views
    .NET Core
    .NET Core
    Angular CLI
    Angular CLI
    React
    React
    MongoDB
    MongoDB
    Flutter
    Flutter
    React Native
    React Native
    Postman
    Postman
    Markdown
    Markdown
    Visual Studio Code
    Visual Studio Code

    I am starting to become a full-stack developer, by choosing and learning .NET Core for API Development, Angular CLI / React for UI Development, MongoDB for database, as it a NoSQL DB and Flutter / React Native for Mobile App Development. Using Postman, Markdown and Visual Studio Code for development.

    See more
    Dmitry Mukhin
    Dmitry Mukhin
    at Uploadcare · | 22 upvotes · 260.3K views
    atUploadcareUploadcare
    Django
    Django
    Python
    Python
    React
    React
    Ember.js
    Ember.js
    Preact
    Preact
    PostCSS
    PostCSS

    Simple controls over complex technologies, as we put it, wouldn't be possible without neat UIs for our user areas including start page, dashboard, settings, and docs.

    Initially, there was Django. Back in 2011, considering our Python-centric approach, that was the best choice. Later, we realized we needed to iterate on our website more quickly. And this led us to detaching Django from our front end. That was when we decided to build an SPA.

    For building user interfaces, we're currently using React as it provided the fastest rendering back when we were building our toolkit. It’s worth mentioning Uploadcare is not a front-end-focused SPA: we aren’t running at high levels of complexity. If it were, we’d go with Ember.js.

    However, there's a chance we will shift to the faster Preact, with its motto of using as little code as possible, and because it makes more use of browser APIs. One of our future tasks for our front end is to configure our Webpack bundler to split up the code for different site sections. For styles, we use PostCSS along with its plugins such as cssnano which minifies all the code.

    All that allows us to provide a great user experience and quickly implement changes where they are needed with as little code as possible.

    See more

    related Foundation posts

    Lee Benson
    Lee Benson
    React
    React
    GraphQL
    GraphQL
    Apollo
    Apollo
    JavaScript
    JavaScript
    TypeScript
    TypeScript
    Webpack
    Webpack
    React Helmet
    React Helmet
    styled-components
    styled-components
    Sass
    Sass
    Less
    Less
    PostCSS
    PostCSS
    Bootstrap
    Bootstrap
    Semantic UI
    Semantic UI
    Foundation
    Foundation
    React Router
    React Router
    Koa
    Koa
    #JSX
    #React.
    #Css
    #StyledComponents.
    #Async
    #HTML
    #GraphQL
    #Apollo

    ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

    ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

    React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

    styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

    React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

    Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

    See more

    related WordPress posts

    Siddhant Sharma
    Siddhant Sharma
    Head of Growth at Bigstep Technologies · | 12 upvotes · 52.6K views
    WordPress
    WordPress
    Magento
    Magento
    PHP
    PHP
    Java
    Java
    Swift
    Swift
    JavaScript
    JavaScript
    #Messaging
    #Communication
    #InAppChat
    #Dating
    #Matrimonial

    WordPress Magento PHP Java Swift JavaScript

    Back in the days, we started looking for a date on different matrimonial websites as there were no Dating Applications. We used to create different profiles. It all changed in 2012 when Tinder, an Online Dating application came into India Market.

    Tinder allowed us to communicate with our potential soul mates. That too without paying any extra money. I too got 4-6 matches in 6 years. It changed the life of many Millennials. Tinder created a revolution of its own. P.S. - I still don't have a date :(

    Posting my first article. Please have a look and do give feedback.

    Communication InAppChat Dating Matrimonial #messaging

    See more
    Bulma logo

    Bulma

    252
    128
    6
    252
    128
    + 1
    6
    Free, open source, & modern CSS framework based on Flexbox
    Bulma logo
    Bulma
    VS
    Bootstrap logo
    Bootstrap
    Sass logo

    Sass

    11.7K
    7.9K
    3K
    11.7K
    7.9K
    + 1
    3K
    Syntactically Awesome Style Sheets