# bootstrap Published articles for bootstrap. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Agents change the math on big bang migrations DevFeed: [Agents change the math on big bang migrations]() Original publisher: [Read original article]() Author: hi@swizec.com (Swizec Teller) Published: 2026-08-01T00:00:00Z Content type: opinion Language: en Sources: [Swizec Teller]() Topics: [migration](), [Tailwind CSS](), [Bootstrap](), [Design system](), [Tech Debt](), [ui](), [React]() Tags: [agents](), [bootstrap](), [design-system](), [migrations](), [react](), [tailwind](), [tech-debt]() ### AI overview An opinion article argues that AI agents may change how teams approach large software migrations. It describes a one-step migration of hundreds of pages from Bootstrap to Tailwind in a 22,000-line pull request, which the author says fixed 13 small bugs without materially disrupting the company. ### Source excerpt I just did a team's worth of work in 5 days. Honestly I am shook to the core of my 20 YoE ## Building a Bootstrap App with Rails 7 and SCSS Files DevFeed: [Building a Bootstrap App with Rails 7 and SCSS Files]() Original publisher: [Read original article]() Author: Fuzzygroup Published: 2022-06-22T06:12:00Z Content type: tutorial Language: en Sources: [Scott Johnson]() Topics: [Rails](), [Bootstrap](), [Front end](), [Web Development](), [CSS]() Tags: [app](), [bootstrap](), [front-end](), [rails](), [sass](), [scss]() ### AI overview A walkthrough of setting up a Rails 7 application with Bootstrap and SCSS files, including generating the app, adding sassc-rails, copying stylesheets, and managing import order for asset compilation. ### Source excerpt As is too often the case, I find that the initial aspect of getting a modern app (Bootstrap, Tailwind, React) initially setup to be the most frustrating aspect of Rails. Given that I like to spin up new apps pretty regularly, well, I spend a lot of time being frustrated with an old man's grumbling of: It didn't used to be this hard. No it wasn't this hard. And while I still don't really understand asset compilation, I did recently put together a new app where I pulled in SCSS files using variables from a different app and I can start to see it. This blog post walks through a Rails 7 app using .scss files. Step 1: Rails New Here's your Rails 7 new command to generate a new app with Bootstrap: rails new scss_test1 --css bootstrap Yep. That's it. Whoa!!! There are also options to use Tailwind. I found this technique in the Saeloun article linked below and I will be forever grateful; seriously - thank you. Step 2: Add the Sassc-Rails Gem I believe this Gem is needed as sassc support is officially deprecated. But I might be wrong about this; front end stuff changes with every Rails release so if I'm wrong, well, sigh. gem "sassc-rails" NOTE: Please see the last section "That Mysterious Error"; you may not want this in your Gemfile or: Step 3: Copy In Your SCSS Files If you are pulling in SCSS files then you need to copy them into your: app/assets/stylesheets directory. They can exist elsewhere but that directory is for stylesheets so differing on this point confuses me. Modify Your Include Directives This is the tricky bit and where you simply have to experiment. The thing to understand is that asset compilation is just that - compilation.If you're old school enough that you understand the analogy of your stylesheet files becoming akin to a make file with all the dark magic that entails, perhaps that helps. In your stylesheets directory there will be an initial stylesheet file, for me, it was application_bootstrap.scss and then I had copied in a number of other styleshee ## Getting Font Awesome Working On Rails 7 and Bootstrap albeit Perhaps Poorly DevFeed: [Getting Font Awesome Working On Rails 7 and Bootstrap albeit Perhaps Poorly]() Original publisher: [Read original article]() Author: Fuzzygroup Published: 2022-06-08T17:27:00Z Content type: tutorial Language: en Sources: [Scott Johnson]() Topics: [Rails](), [Bootstrap](), [Front end](), [Web Development]() Tags: [blog-post](), [bootstrap](), [css](), [fontawesome](), [front-end-development](), [html](), [rails]() ### AI overview A blog post documents a simple, imperfect method for adding Font Awesome, including its brands extension, to a Rails 7 application, and also explains how to add Bootstrap 5 icons. The approach downloads the assets locally, places files in Rails asset and public directories, updates the asset manifest and configuration, and adjusts stylesheet paths. ### Source excerpt I am not a front end engineer - but I'm on a project right now with heavy front end requirements. This blog post documents how I got Font Awesome running on by application including the brands extension. It is by no means a great way to do it and I know: I have more overhead than needed I did not take advantage of Rails 7 facilities in the best way This skips the gem so you lose another dependency from Gemfile I made this work and I sort of understand it but if you asked me to explain it, I think I'd fail the class. Today I wanted to do nothing more than display a github icon. And it does that. Still this works and it is conceptually simple. NOTE: I full well expect to return to this and figure out the "right" way to do this. However, I'm in heavy greenfield development mode and the desire to simply make it work and GIVE ME MY DAMN ICONS NOW is the paramount concern. In greenfield development mode, nothing is more important than: Productivity / not getting bogged down. Not getting discouraged when trying to do something that should be simple (display a damn icon). So much of modern front end development is just plain ridiculously complicated for simple things like making a font work or displaying an image. Font Awesome Steps Download Font Awesome Locally and Decompress It. This requires an account I think. Move stylesheets/all.css to app/assets/stylesheets/ Move webfonts (directory and all) to public/ (yes public) Add //= link all.css to manifest.js In config/initializers/assets.rb add: Rails.application.config.assets.paths " Rails.root.join("assets/webfonts") (yes that isn't the right path but it still works; who knows???) In application.html.erb you need to make one change. This code: <%= stylesheet_link_tag "all"%> Here's an example of the html to use to generate a font: Sidebar: How to Add Bootstrap Icons Also This set of steps let you add the Bootstrap 5 icons to the mix also and is based on the same i ## When Rails 7 Doesn't Process application.js DevFeed: [When Rails 7 Doesn't Process application.js]() Original publisher: [Read original article]() Author: Fuzzygroup Published: 2022-04-22T22:28:00Z Content type: article Language: en Sources: [Scott Johnson]() Topics: [Rails](), [JavaScript](), [Bootstrap](), [modern web development]() Tags: [asset-pipeline](), [bootstrap](), [javascript](), [modern-web-development](), [pipeline](), [rails]() ### AI overview A troubleshooting post about a Rails 7 application in which Bootstrap popovers did not work because application.js appeared not to be processed or included in the page source. The author discusses tracing the issue to JavaScript and the asset pipeline, but the supplied text ends before the resolution. ### Source excerpt This is more than a mildly embarrassing post to have to write but it is an interesting example of how habits can bite you hard - so, so hard. I recently wanted to start on an application and actually be current on everything: Rails, Bootstrap, etc. I have long admitted to having issues with respect to "modern" web development (specifically JavaScript / the asset pipeline) and I'm mildly starting to deal with those issues. I began with a BootrAils tutorial and started to work through it. I got all the way to the end and I noticed that I simply could NOT get the popovers to work. I don't claim to have a great understanding of the asset pipeline but I do know that it is a preprocessor that should get invoked on every page request. I traced the problem back to application.js seemingly not getting processed (a view source didn't show it). So, just to be sure, I added this to application ## Forcing Grid Stacking with Bootstrap on Mobile DevFeed: [Forcing Grid Stacking with Bootstrap on Mobile]() Original publisher: [Read original article]() Author: Fuzzygroup Published: 2021-12-23T17:33:00Z Content type: tutorial Language: en Sources: [Scott Johnson]() Topics: [Bootstrap](), [Mobile](), [Web Development]() Tags: [bootstrap](), [html](), [mobile]() ### AI overview The article explains that a Bootstrap layout failed to stack or wrap correctly on mobile because the page lacked a viewport meta tag. Adding `` to the HTML head fixed the mobile formatting. ### Source excerpt I recently had the situation where a Bootstrap application: Worked perfectly on a desktop with a side by side layout Properly wrapped on desktop when the window was resized down to a mobile like form factor Failed to ever wrap on mobile showing just a smaller version of the desktop I puzzled over this quite a bit until I ran a google search for "bootstrap text too small on mobile" which led me to this directive: This needs to be inserted into your html head element and then, like magic, made everything format perfectly on mobile. ## Implementing a Master Template and Bootstrap in Laravel 8 DevFeed: [Implementing a Master Template and Bootstrap in Laravel 8]() Original publisher: [Read original article]() Author: Fuzzygroup Published: 2021-06-10T14:19:00Z Content type: tutorial Language: en Sources: [Scott Johnson]() Topics: [Laravel](), [Bootstrap](), [HTML](), [Rails]() Tags: [bootstrap](), [css](), [getting-started](), [html](), [laravel](), [php](), [route](), [structure](), [testing](), [yield]() ### AI overview A tutorial for Laravel 8 that explains how to create a reusable master Blade layout, use yield directives for page sections, add Bootstrap CSS and JavaScript, apply the layout to views, define an About route, and test the result. ### Source excerpt This blog post continues from my Hello World tutorial and adds a master layout that you can use to add a consistent HTML structure to all pages. This is very similar, in a Rails context, to application.html.erb. Step 1: Create a layouts Directory In your application directory, start my creating the directory: mkdir resources/views/layouts Step 2: Create a master.blade.php Layout In your application directory, create the layout file: touch resources/views/layouts/master.blade.php Step 3: Add the HTML Boilerplate Start by adding to the master.blade.php file, your basic HTML stuff: Step 4: Add Yield Directives Just as in Rails, Laravel uses a yield directive during template processing to indicate where things go. Here is the HTML boilerplate marked up using yield directives: @yield('title') @yield('content') These yield statements indicate that two named sections of stuff, title and content, will be inserted at their respective locations. Adding Bootstrap Given that we have a master template, we can also use it to add Bootstrap to our Hello World app. Go to the Get Bootstrap site, click Getting Started, and copy the main CSS url. And add it below as follows: @yield('title') @yield('content') Now we need to add the JavaScript so scroll down in the above Get Boostrap page and copy the JavaScript script tag. And add it below as follows: @yield('title') ) Original publisher: [Read original article]() Author: Fuzzygroup Published: 2020-01-11T00:00:00Z Content type: article Language: en Sources: [Scott Johnson]() Topics: [Tailwind CSS](), [Library](), [Bootstrap](), [Elm]() Tags: [bootstrap](), [css](), [tailwind](), [tools]() ### AI overview The article lists tools for Tailwind CSS, describing Tailwind as a CSS grid library and an alternative to Bootstrap. The linked tools include generators, a toolbox, and a builder. ### Source excerpt Tailwind is a CSS grid library that is an alternative to Bootstrap and, well, something I'm increasingly using. Here are some handy, dandy Tailwind tools: Tailwind Home Page Tailwind Tutorial Tailwind Button Generator (written in Elm!!!!) Tailwind Grid Generator Tailwind Toolbox Tailwind Builder ## Dear Bootstrap Why Aren't My Tables Full Width DevFeed: [Dear Bootstrap Why Aren't My Tables Full Width]() Original publisher: [Read original article]() Author: Fuzzygroup Published: 2019-12-07T00:00:00Z Content type: tutorial Language: en Sources: [Scott Johnson]() Topics: [Bootstrap](), [CSS](), [Code](), [Web Development]() Tags: [bootstrap](), [css](), [how-to]() ### AI overview This troubleshooting article explains why Bootstrap tables may not span the full width of their container. It says the table class adds styling and an inset margin, and recommends omitting the table class while retaining table-condensed when full width is needed, at the cost of losing the table's lines. ### Source excerpt Perhaps I shouldn't have insomnia and then code into the wee hours because this is an exchange that I can see happening if only I could email Bootstrap in the style of Ann Landers ... Dear Bootstrap, I was hoping that you could explain to me why my tables of data aren't full width. Here's an example which isn't full width: And here's an example which is: The difference between the two bits of markup is: The non full width one: The full width one:
Here's an example of what this looks like in full: Thank you. Confused Web Developer that Struggles Mightily with CSS Dear Confused Web Developer that Struggles Mightily with CSS, I'd love to explain this to you but I also find the bootstrap table model confusing as heck. What I can tell you is that, for reasons, I don't understand, adding table seems to have two effects: it improves the lines between the data it sets a margin on the table to inset it from the left and right borders And, no, I can't tell you how to work around this but what I can tell you is this: When you want a table to span the full width then omit the table class and just use table-condensed. And, yes, you're going to lose the nice lines; so sorry; nothing can be done here. And I'd direct you to my table documentation where you can find this discussed in full but there's simply no mention of it anywhere in there so I'd assume that even we don't understand this. My sincere apologies ... Bootstrap 4, Your Friendly Neighborhood CSS Grid ## Adding a Show / Hide Feature to Your Bootstrap 4 Divs DevFeed: [Adding a Show / Hide Feature to Your Bootstrap 4 Divs]() Original publisher: [Read original article]() Author: Fuzzygroup Published: 2019-11-10T00:00:00Z Content type: tutorial Language: en Sources: [Scott Johnson]() Topics: [Bootstrap](), [CSS](), [Web Development]() Tags: [bootstrap](), [css](), [html]() ### AI overview A concise tutorial showing how to add a click-triggered show/hide feature to Bootstrap 4 content using a collapsible div, an anchor, and matching data attributes. ### Source excerpt I know this is simple but I am JavaScript / CSS challenged so I'm writing it down because I've had continuous problems with it in the past and I know that this solution works for Bootstrap 4. Let's say that you have a div that you want hidden and only displayed by a button when you click it. Here's the solution: Toggle Feeds
This div (feeds) is hidden by default.
Here's how this works: Add a div named feeds around the content you want hidden. This needs to have a class named collapse added to it because its default display state is collapsed. Add an A tag with an href of "#feeds" above the content and a data-toggle named collapse. When the user clicks the A tag then the a tag's data-toggle will be applied to the matching div. Thank you to this Stack Overflow post. ## Creating a chat application from scratch using Rails and WebSockets DevFeed: [Creating a chat application from scratch using Rails and WebSockets]() Original publisher: [Read original article]() Author: Lazarus Lazaridis Published: 2019-04-04T20:00:00Z Content type: tutorial Language: en Sources: [Lazarus Lazaridis]() Topics: [WebSocket](), [Rails](), [web applications](), [Ruby](), [Web Development]() Tags: [actioncable](), [application](), [bootstrap](), [chat](), [code](), [devise](), [featured](), [programming](), [rails](), [redis](), [ruby](), [tutorial](), [websocket](), [websockets]() ### AI overview A tutorial for building a chat web application from scratch with Rails and WebSockets. It explains WebSocket bidirectional communication and real-time data transfer, then introduces the Ruby and Rails versions used for the application. ### Source excerpt Hey! It's been a while since my last post. I recently familiarized myself with the awesomeness of WebSockets and I finally found the time to write a tutorial about it. I hope you find it helpful. Update: I also published another post for dockerizing the application of this tutorial, you can find it here. Introduction In this tutorial we are going to create a chat web application from scratch using Rails and WebSockets. Code and comments You can find the code of this tutorial on GitHub. For feedback, comments, typos etc. please open an issue in the repository. What are WebSockets WebSocket is actually a protocol that enables bidirectional communication between the client and the server of a web application over a single long living TCP connection. The WebSocket protocol enables interaction between a web browser (or other client application) and a web server with lower overheads, facilitating real-time data transfer from and to the server. This is made possible by providing a standardized way for the server to send content to the client without being first requested by the client, and allowing messages to be passed back and forth while keeping the connection open. In this way, a two-way ongoing conversation can take place between the client and the server. The communications are done over TCP port number 80 (or 443 in the case of TLS-encrypted connections), which is of benefit for those environments which block non-web Internet connections using a firewall. Similar two-way browser-server communications have been achieved in non-standardized ways using stopgap technologies such as Comet. - WebSocket @ Wikipedia Why WebSockets Suppose you have to create a web page that shows the statuses of running processes. Without WebSockets you would have to either: Use AJAX with Javascript intervals to request and render the latest state of the processes or Automatically reload the page every x seconds () or Add a message on the page "The stat ## Using VueJS + GraphQL to make Practical Magic DevFeed: [Using VueJS + GraphQL to make Practical Magic]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2018-08-27T22:29:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [GraphQL](), [vuejs](), [Content Management System](), [Front end](), [JavaScript](), [axios](), [Bootstrap](), [Jamstack]() Tags: [auto-complete](), [axios](), [bootstrap](), [craft](), [everyday](), [form](), [graphql](), [headless](), [insights](), [jamstack](), [javascript](), [like](), [magic](), [practical](), [problems](), [saving](), [searching](), [solve](), [submission](), [using](), [vuejs]() ### AI overview A practical tutorial showing how to use VueJS and GraphQL with a headless Craft CMS backend to implement auto-complete search and save contact-form submissions. It introduces the frontend and backend tooling used in the examples, including Axios, Bootstrap 4, Craft CMS, and CraftQL. ### Source excerpt Make some practical magic with VueJS + GraphQL to solve everyday problems like auto-complete searching and form submission saving with a headless Craft CMS server ## Discover the new ReactOS website DevFeed: [Discover the new ReactOS website]() Original publisher: [Read original article]() Published: 2016-02-08T00:00:00Z Content type: article Language: en Sources: [Front Page on ReactOS Website]() Topics: [ReactOS](), [Website](), [Drupal](), [IRC](), [Bootstrap](), [jira]() Tags: [bootstrap](), [chat](), [features](), [free](), [history](), [jira](), [open-source](), [os](), [react](), [reactos](), [responsive](), [website](), [win32](), [winapi]() ### AI overview The ReactOS team describes a complete redesign of its website ahead of the 0.4 release. The first stage focused on improving information flow through IRC integration, live Jira activity, social-network updates, responsive Bootstrap-based layout, and site structure changes. ### Source excerpt As you may have noticed, the ReactOS website has been completely revamped. During the last year, the ReactOS Team has been focusing on entering the 0.4 era, the latest major alpha series before the 0.5 Beta. A common feeling among the ReactOS community was that our (now old) website was not good enough from content, design, and technology points of view to honor one of the greatest releases in the ReactOS history. ## Adapting a Blogging Project for Terminal-Based Publishing and Heroku Deployment DevFeed: [Adapting a Blogging Project for Terminal-Based Publishing and Heroku Deployment]() Original publisher: [Read original article]() Author: hi@meedamian.com (Damian Mee) Published: 2014-05-13T00:00:00Z Content type: tutorial Language: en Sources: [Damian Mee | Blog | Portfolio | About]() Topics: [Heroku](), [Express](), [Git](), [Command-line interface](), [Markdown](), [Highlight.js](), [npm](), [GitHub](), [Bootstrap](), [jQuery]() Tags: [bootstrap](), [express](), [git](), [heroku](), [highlighting](), [markdown](), [npm](), [terminal]() ### AI overview The author describes adapting an existing blogging project for writing in Sublime Text and publishing from the terminal. The work included dependency changes, Bootstrap and jQuery integration, Express compatibility fixes, replacing the Markdown processing setup with marked and highlight.js, and deploying the result on Heroku. ### Source excerpt Several days ago I was casually browsing awesomeness of Github when I saw this project by koush, and instantly understood that's the blogging flow I could use - write in sublime and publish/deploy from terminal. I had to do some cleanup there, update & fix some dependencies and rewrite parts of it to a better language. Later, I've created a new Heroku instance, moved my domain to a heroku Add-on called pointDNS, did git push heroku, and it worked great :). ## UP: A Jekyll theme DevFeed: [UP: A Jekyll theme]() Original publisher: [Read original article]() Author: Carlos Alexandro Becker Published: 2012-12-16T00:00:00Z Content type: tutorial Language: en Sources: [Carlos Becker]() Topics: [Jekyll](), [Bootstrap](), [GitHub Pages](), [Markdown](), [Deployment](), [Atom Feed]() Tags: [atom](), [bootstrap](), [css](), [deployment](), [github-pages](), [html](), [jekyll](), [markdown]() ### AI overview The article introduces Up, a clean, responsive Bootstrap-based Jekyll theme designed to be easy to modify for personal blogs. It explains installation, customization, post creation, and deployment with GitHub Pages. ### Source excerpt After a while using Jekyll Bootstrap, I just realized that it was so much bloated. Then, few days ago, I forked the old Zach Holman's blog, and started to tweak my own theme based on theirs (that now is opensource). At first, I like it, but after a while, I just start thinking that it had a "old style" design. ## GWT Bootstrap 2.0.4.0 released DevFeed: [GWT Bootstrap 2.0.4.0 released]() Original publisher: [Read original article]() Author: Carlos Alexandro Becker Published: 2012-08-14T00:00:00Z Content type: release Language: en Sources: [Carlos Becker]() Topics: [Bootstrap](), [Maven Central]() Tags: [bootstrap](), [maven-central](), [release](), [repositories](), [update](), [version]() ### AI overview GWT-Bootstrap 2.0.4.0 was released as a project to port Twitter Bootstrap widgets to GWT-compatible components. The release became available in Maven Central, with plans to port additional components and update to Twitter Bootstrap 2.1.0. ### Source excerpt For those who don't know, GWT-Bootstrap wants to port the Twitter Bootstrap widgets to GWT compatible and easy to use components/widgets. ## Theming GWT-Bootstrap DevFeed: [Theming GWT-Bootstrap]() Original publisher: [Read original article]() Author: Carlos Alexandro Becker Published: 2012-06-27T00:00:00Z Content type: tutorial Language: en Sources: [Carlos Becker]() Topics: [Bootstrap](), [Maven](), [ui](), [CSS]() Tags: [applications](), [bootstrap](), [css](), [dependency](), [maven](), [setup](), [tutorial](), [ui]() ### AI overview A tutorial on applying a custom Bootstrap theme to a GWT-Bootstrap project. It covers creating the project with Maven, configuring GWT-Bootstrap, obtaining and integrating custom CSS resources, cleaning the generated example, and creating the required UI Binder and configurator files. ### Source excerpt First of all, if you haven't done it yet, read Getting started with GWT-Bootstrap. ## Getting started with GWT-Bootstrap DevFeed: [Getting started with GWT-Bootstrap]() Original publisher: [Read original article]() Author: Carlos Alexandro Becker Published: 2012-06-26T00:00:00Z Content type: tutorial Language: en Sources: [Carlos Becker]() Topics: [Bootstrap](), [Library](), [ui](), [Development]() Tags: [bootstrap](), [cons](), [getting-started](), [library](), [maven](), [microservices](), [setup](), [ui]() ### AI overview A tutorial on getting started with GWT-Bootstrap, a project that brings Twitter Bootstrap styles and widgets to GWT applications. It covers obtaining the JAR, configuring a GWT module, using UiBinder widgets, and adding the datepicker module. ### Source excerpt GWT-Bootstrap is a project that aims to provide all the Twitter Bootstrap styles and widgets to GWT applications. ## Hello World DevFeed: [Hello World]() Original publisher: [Read original article]() Author: Carlos Alexandro Becker Published: 2012-06-24T00:00:00Z Content type: opinion Language: en Sources: [Carlos Becker]() Topics: [Jekyll](), [Bootstrap](), [WordPress]() Tags: [bootstrap](), [jekyll](), [responsive](), [server](), [wordpress]() ### AI overview A personal introduction to a new English-language blog and its move from WordPress to Jekyll Bootstrap. The author highlights Jekyll's simple configuration, local preview workflow, speed, responsive customization, and built-in integrations. ### Source excerpt Hello everyone :)