Alternatives to Bootstrap logo

Alternatives to Bootstrap

Semantic UI, jQuery, Material, React, and Foundation are the most popular alternatives and competitors to Bootstrap.
51.9K
11.4K
+ 1
7.6K

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 151.8K GitHub stars and 74K GitHub forks. Here’s a link to Bootstrap's open source repository on GitHub

Top Alternatives to Bootstrap

  • Semantic UI

    Semantic UI

    Semantic empowers designers and developers by creating a shared vocabulary for UI. ...

  • jQuery

    jQuery

    jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. ...

  • Material

    Material

    Express your creativity with Material, an animation and graphics framework for Google's Material Design and Apple's Flat UI in Swift. ...

  • React

    React

    Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project. ...

  • Foundation

    Foundation

    Foundation is the most advanced responsive front-end framework in the world. You can quickly prototype and build sites or apps that work on any kind of device with Foundation, which includes layout constructs (like a fully responsive grid), elements and best practices. ...

  • Material Design

    Material Design

    Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences. ...

  • WordPress

    WordPress

    The core software is built by hundreds of community volunteers, and when you’re ready for more there are thousands of plugins and themes available to transform your site into almost anything you can imagine. Over 60 million people have chosen WordPress to power the place on the web they call “home” — we’d love you to join the family. ...

  • Bulma

    Bulma

    Bulma is a CSS framework based on Flexbox and built with Sass

Bootstrap alternatives & related posts

Semantic UI logo

Semantic UI

818
1.3K
671
A UI Component library implemented using a set of specifications designed around natural language
818
1.3K
+ 1
671
PROS OF SEMANTIC UI
  • 156
    Easy to use and looks elegant
  • 92
    Variety of components
  • 64
    Themes
  • 61
    Has out-of-the-box widgets i would actually use
  • 56
    Semantic, duh
  • 44
    Its the future
  • 42
    Open source
  • 37
    Very active development
  • 31
    Far less complicated structure
  • 28
    Gulp
  • 9
    Already has more features than bootstrap
  • 8
    Just compare it to Bootstrap and you'll be hooked
  • 7
    UI components
  • 7
    Clean and consistent markup model
  • 6
    Responsiveness
  • 4
    Elegant. clean. readable. maintainable
  • 4
    Because it is semantic :-D
  • 4
    Good-Looking
  • 2
    Great docs
  • 2
    Consistent
  • 2
    Is big and look really great, nothing like this
  • 2
    Modular and scalable
  • 1
    Jquery
  • 1
    Easy to use
  • 1
    Blends with reactjs
CONS OF SEMANTIC UI
  • 5
    Outdated build tool (gulp 3))
  • 3
    HTML is not semantic (see list component)
  • 2
    Javascript is tied to jquery
  • 2
    Poor accessibility support

related Semantic UI posts

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

162.2K
45.1K
6.5K
The Write Less, Do More, JavaScript Library.
162.2K
45.1K
+ 1
6.5K
PROS OF JQUERY
  • 1.3K
    Cross-browser
  • 957
    Dom manipulation
  • 805
    Power
  • 660
    Open source
  • 610
    Plugins
  • 457
    Easy
  • 395
    Popular
  • 350
    Feature-rich
  • 281
    Html5
  • 227
    Light weight
  • 91
    Simple
  • 84
    Great community
  • 79
    CSS3 Compliant
  • 69
    Mobile friendly
  • 67
    Fast
  • 43
    Intuitive
  • 42
    Swiss Army knife for webdev
  • 35
    Huge Community
  • 10
    Easy to learn
  • 3
    Clean code
  • 2
    Just awesome
  • 2
    Powerful
  • 2
    Nice
  • 2
    Because of Ajax request :)
  • 1
    Easy Setup
  • 1
    Open Source, Simple, Easy Setup
  • 1
    It Just Works
  • 1
    Improves productivity
  • 1
    Industry acceptance
  • 1
    Allows great manipulation of HTML and CSS
  • 1
    Used everywhere
  • 1
    Widely Used
  • 0
    Javascript
CONS OF JQUERY
  • 5
    Large size
  • 5
    Encourages DOM as primary data source
  • 4
    Sometimes inconsistent API
  • 2
    Live events is overly complex feature

related jQuery posts

Kir Shatrov
Engineering Lead at Shopify · | 20 upvotes · 493.3K views

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
Ganesa Vijayakumar
Full Stack Coder | Module Lead · | 18 upvotes · 2.3M views

I'm planning to create a web application and also a mobile application to provide a very good shopping experience to the end customers. Shortly, my application will be aggregate the product details from difference sources and giving a clear picture to the user that when and where to buy that product with best in Quality and cost.

I have planned to develop this in many milestones for adding N number of features and I have picked my first part to complete the core part (aggregate the product details from different sources).

As per my work experience and knowledge, I have chosen the followings stacks to this mission.

UI: I would like to develop this application using React, React Router and React Native since I'm a little bit familiar on this and also most importantly these will help on developing both web and mobile apps. In addition, I'm gonna use the stacks JavaScript, jQuery, jQuery UI, jQuery Mobile, Bootstrap wherever required.

Service: I have planned to use Java as the main business layer language as I have 7+ years of experience on this I believe I can do better work using Java than other languages. In addition, I'm thinking to use the stacks Node.js.

Database and ORM: I'm gonna pick MySQL as DB and Hibernate as ORM since I have a piece of good knowledge and also work experience on this combination.

Search Engine: I need to deal with a large amount of product data and it's in-detailed info to provide enough details to end user at the same time I need to focus on the performance area too. so I have decided to use Solr as a search engine for product search and suggestions. In addition, I'm thinking to replace Solr by Elasticsearch once explored/reviewed enough about Elasticsearch.

Host: As of now, my plan to complete the application with decent features first and deploy it in a free hosting environment like Docker and Heroku and then once it is stable then I have planned to use the AWS products Amazon S3, EC2, Amazon RDS and Amazon Route 53. I'm not sure about Microsoft Azure that what is the specialty in it than Heroku and Amazon EC2 Container Service. Anyhow, I will do explore these once again and pick the best suite one for my requirement once I reached this level.

Build and Repositories: I have decided to choose Apache Maven and Git as these are my favorites and also so popular on respectively build and repositories.

Additional Utilities :) - I would like to choose Codacy for code review as their Startup plan will be very helpful to this application. I'm already experienced with Google CheckStyle and SonarQube even I'm looking something on Codacy.

Happy Coding! Suggestions are welcome! :)

Thanks, Ganesa

See more
Material logo

Material

70
65
0
A Graphics Framework for Material Design in Swift
70
65
+ 1
0
PROS OF MATERIAL
    Be the first to leave a pro
    CONS OF MATERIAL
      Be the first to leave a con

      related Material posts

      React logo

      React

      99.2K
      79K
      3.8K
      A JavaScript library for building user interfaces
      99.2K
      79K
      + 1
      3.8K
      PROS OF REACT
      • 751
        Components
      • 651
        Virtual dom
      • 558
        Performance
      • 484
        Simplicity
      • 436
        Composable
      • 174
        Data flow
      • 159
        Declarative
      • 123
        Isn't an mvc framework
      • 113
        Reactive updates
      • 110
        Explicit app state
      • 31
        JSX
      • 23
        Learn once, write everywhere
      • 18
        Uni-directional data flow
      • 16
        Easy to Use
      • 14
        Works great with Flux Architecture
      • 10
        Great perfomance
      • 8
        Built by Facebook
      • 6
        Javascript
      • 5
        Speed
      • 5
        TypeScript support
      • 4
        Feels like the 90s
      • 4
        Awesome
      • 4
        Scalable
      • 4
        Easy to start
      • 3
        Fancy third party tools
      • 3
        Hooks
      • 3
        Server side views
      • 3
        Functional
      • 2
        Simple
      • 2
        Great migration pathway for older systems
      • 2
        Server Side Rendering
      • 2
        Cross-platform
      • 2
        SSR
      • 2
        Fast evolving
      • 2
        Simple, easy to reason about and makes you productive
      • 2
        Rich ecosystem
      • 2
        Has functional components
      • 2
        Has arrow functions
      • 2
        Strong Community
      • 2
        Closer to standard JavaScript and HTML than others
      • 2
        Very gentle learning curve
      • 2
        Excellent Documentation
      • 2
        Super easy
      • 2
        Props
      • 2
        Scales super well
      • 2
        Just the View of MVC
      • 1
        Www
      • 1
        Start simple
      • 1
        Sdfsdfsdf
      • 1
        Allows creating single page applications
      • 1
        Fragments
      • 1
        Split your UI into components with one true state
      • 1
        Sharable
      • 1
        Every decision architecture wise makes sense
      • 1
        Permissively-licensed
      • 1
        Beautiful and Neat Component Management
      • 1
        Obama
      CONS OF REACT
      • 33
        Requires discipline to keep architecture organized
      • 21
        No predefined way to structure your app
      • 20
        Need to be familiar with lots of third party packages
      • 6
        JSX
      • 6
        Not enterprise friendly
      • 1
        One-way binding only
      • 1
        State consistency with backend neglected

      related React posts

      Vaibhav Taunk
      Team Lead at Technovert · | 31 upvotes · 1.5M views

      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
      Johnny Bell
      Software Engineer at Weedmaps · | 26 upvotes · 412.3K views
      Shared insights
      on
      Vue.js
      React

      I've used both Vue.js and React and I would stick with React. I know that Vue.js seems easier to write and its much faster to pick up however as you mentioned above React has way more ready made components you can just plugin, and the community for React is very big.

      It might be a bit more of a steep learning curve for your friend to learn React over Vue.js but I think in the long run its the better option.

      See more
      Foundation logo

      Foundation

      1.2K
      1K
      735
      The most advanced responsive front-end framework in the world
      1.2K
      1K
      + 1
      735
      PROS OF FOUNDATION
      • 158
        Responsive grid
      • 92
        Mobile first
      • 79
        Open source
      • 75
        Semantic
      • 72
        Customizable
      • 51
        Quick to prototype
      • 50
        Simple ui
      • 45
        Fast
      • 44
        Best practices
      • 39
        Easy setup
      • 6
        Neutral style
      • 6
        HTML, SCSS and JS
      • 5
        Professional
      • 5
        Accessibility support
      • 3
        Xy grid
      • 2
        Every new version is smaller, smarter & more efficient
      • 2
        Sass
      • 1
        Robust
      CONS OF FOUNDATION
      • 4
        Awful site
      • 4
        Requires jQuery

      related Foundation posts

      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
      Shared insights
      on
      Bootstrap
      Foundation

      Should I go with Foundation CSS instead of Bootstrap? Or, if any other popular responsive frameworks are out there, please suggest them to me. My site mainly targets mobile or tablet

      See more
      Material Design logo

      Material Design

      499
      682
      11
      Google's Material Design
      499
      682
      + 1
      11
      PROS OF MATERIAL DESIGN
      • 4
        They really set a new bar in design
      • 3
        An intuitive design
      • 2
        Simply, And Beautiful
      • 2
        Many great libraries
      • 0
        Composants
      CONS OF MATERIAL DESIGN
      • 1
        Sometimes, it can hang the browser

      related Material Design posts

      Giordanna De Gregoriis
      Jr Fullstack Developer at Stefanini Inspiring · | 7 upvotes · 29.3K views

      TL;DR: Shall I keep developing with Nuxt.js 2 and wait for a migration guide to Nuxt 3? Or start developing with Vue.js 3 using Vite, and then migrate to Nuxt 3 when it comes out?

      Long version: We have an old web application running on AngularJS and Bootstrap for frontend. It is mostly a user interface to easily read and post data to our engine.

      We want to redo this web application. Started from scratch using the newest version of Angular 2+ and Material Design for frontend. We haven't even finished rewriting half of the application and it is becoming dreadful to work on.

      • The cold start takes too much time
      • Every little change reload the whole page. Seconds to minutes of development lost looking at a loading blank page just changing css
      • Code maintainability is getting worse... again... as the application grows, since we must create everytime 5 files for a new page (html, component.ts, module.ts, scss, routing.ts)

      I'm currently trying to code a Proof of Concept using Nuxt.js and Tailwind CSS. But the thing is, Vue.js 3 is out and has interesting features such as the composition API, teleport and fragments. Also we wish to use the Vite frontend tooling, to improve our time developing regardless of our application size. It feels like a better alternative to Webpack, which is what Nuxt 2 uses.

      I'm already trying Nuxt.js with the nuxt-vite experimental module, but many nuxt modules are still incompatible from the time I'm posting this. It is also becoming cumbersome not being able to use teleport or fragments, but that can be circumvented with good components.

      What I'm asking is, what should be the wisest decision: keep developing with Nuxt 2 and wait for a migration guide to Nuxt 3? Or start developing with Vue.js 3 using Vite, and then migrate to Nuxt 3 when it comes out?

      See more
      Ashish Sharma
      Sr. UI Associate at Daffodil Software · | 4 upvotes · 270.5K views

      I am a bit confused when to choose Bootstrap vs Material Design or Tailwind CSS, and why? I mean, in which kind of projects we can work with bootstrap/Material/Tailwind CSS? If the design is made up on the grid, we prefer bootstrap, and if flat design, then material design. Similarly, when do we choose tailwind CSS?

      Any suggestion would be appreciated?

      See more
      WordPress logo

      WordPress

      78.9K
      24.3K
      2K
      A semantic personal publishing platform with a focus on aesthetics, web standards, and usability.
      78.9K
      24.3K
      + 1
      2K
      PROS OF WORDPRESS
      • 408
        Customizable
      • 359
        Easy to manage
      • 349
        Plugins & themes
      • 258
        Non-tech colleagues can update website content
      • 245
        Really powerful
      • 143
        Rapid website development
      • 76
        Best documentation
      • 50
        Codex
      • 43
        Product feature set
      • 34
        Custom/internal social network
      • 13
        Open source
      • 7
        Great for all types of websites
      • 5
        Huge install and user base
      • 4
        Best
      • 4
        It's simple and easy to use by any novice
      • 4
        Most websites make use of it
      • 4
        Open Source Community
      • 4
        Perfect example of user collaboration
      • 4
        I like it like I like a kick in the groin
      • 3
        Community
      • 3
        API-based CMS
      • 2
        Easy To use
      • 1
        <a href="https://secure.wphackedhel">Easy Beginner</a>
      CONS OF WORDPRESS
      • 11
        Hard to keep up-to-date if you customize things
      • 10
        Plugins are of mixed quality
      • 8
        Not best backend UI
      • 1
        Complex Organization
      • 1
        Great Security

      related WordPress posts

      Dale Ross
      Independent Contractor at Self Employed · | 22 upvotes · 908K views

      I've heard that I have the ability to write well, at times. When it flows, it flows. I decided to start blogging in 2013 on Blogger. I started a company and joined BizPark with the Microsoft Azure allotment. I created a WordPress blog and did a migration at some point. A lot happened in the time after that migration but I stopped coding and changed cities during tumultuous times that taught me many lessons concerning mental health and productivity. I eventually graduated from BizSpark and outgrew the credit allotment. That killed the WordPress blog.

      I blogged about writing again on the existing Blogger blog but it didn't feel right. I looked at a few options where I wouldn't have to worry about hosting cost indefinitely and Jekyll stood out with GitHub Pages. The Importer was fairly straightforward for the existing blog posts.

      Todo * Set up redirects for all posts on blogger. The URI format is different so a complete redirect wouldn't work. Although, there may be something in Jekyll that could manage the redirects. I did notice the old URLs were stored in the front matter. I'm working on a command-line Ruby gem for the current plan. * I did find some of the lost WordPress posts on archive.org that I downloaded with the waybackmachinedownloader. I think I might write an importer for that. * I still have a few Disqus comment threads to map

      See more
      Siddhant Sharma
      Tech Connoisseur at Channelize.io · | 12 upvotes · 745K views

      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

      531
      655
      33
      Free, open source, & modern CSS framework based on Flexbox
      531
      655
      + 1
      33
      PROS OF BULMA
      • 10
        Easy setup
      • 6
        Easy-to-customize the sass build
      • 6
        Community-created themes
      • 4
        Great docs
      • 4
        Responsive
      • 3
        Easy to learn and use
      CONS OF BULMA
      • 2
        Not yet supporting Vue 3

      related Bulma posts

      Daniel Hernández Alcojor
      Frontend Developer at atSistemas · | 8 upvotes · 332.6K views

      I'm building, from scratch, a webapp. It's going to be a dashboard to check on our apps in New Relic and update the Apdex from the webapp. I have just chosen Next.js as our framework because we use React already, and after going through the tutorial, I just loved the latest changes they have implemented.

      But we have to decide on a CSS framework for the UI. I'm partial to Bulma because I love that it's all about CSS (and you can use SCSS from the start), that it's rather lightweight and that it doesn't come with JavaScript clutter. One of the things I hate about Bootstrap is that you depend on jQuery to use the JavaScript part. My boss loves UIkIt, but when I've used it in the past, I didn't like it.

      What do you think we should use? Maybe you have another suggestion?

      See more