How-To

How to Use Bootstrap Dropdown in Vue 3 – CoreUI Integration Guide

Monday, June 30, 2025

#how-to #vue

Bootstrap dropdowns are everywhere — in headers, sidebars, tables, toolbars. But if you’re using Vue 3, you probably don’t want to manage them via data-bs-toggle or vanilla JS events.

How to Use Bootstrap Modal in Vue 3 – Clean Integration with CoreUI

Łukasz Holeczek

Tuesday, June 24, 2025

#how-to #vue

Modals are essential in modern interfaces, whether you’re confirming destructive actions, displaying forms, or showing dynamic content. If you’re using Vue 3 with Bootstrap styles, you might wonder: what’s the cleanest and most idiomatic way to use a modal?

How to Use Bootstrap Tooltip in Vue 3 – The Right Way with CoreUI

Łukasz Holeczek

Monday, June 23, 2025

#how-to #vue

Using Bootstrap in Vue 3? You’ve probably noticed that native Bootstrap tooltips don’t play well with Vue’s reactive and declarative nature. Bootstrap still relies on imperative DOM access — not ideal for Vue’s component-driven architecture.

How to Use Bootstrap Dropdown in React the Right Way – with CoreUI

Łukasz Holeczek

Friday, June 20, 2025

#how-to #react

If you’re using React and want to build dropdowns that look and behave like Bootstrap 5, there’s a better way than relying on data-bs-toggle or manual DOM manipulation. React applications need declarative, accessible, and lifecycle-aware components — and CoreUI for React delivers exactly that.

In this article, you’ll learn how to implement Bootstrap-style dropdowns in React using the CDropdown component from CoreUI — cleanly, idiomatically, and without hacks.

How to Add a Bootstrap Modal in React Without Breaking React – The CoreUI Way

Łukasz Holeczek

Tuesday, June 17, 2025

#how-to #react

If you’re building a React application and want to use a Bootstrap-style modal, you have options. You can rely on Bootstrap’s vanilla JavaScript, use a third-party component, or—more idiomatically—you can integrate a modal the “React way”: declarative, controlled, and accessible.

In this guide, I’ll show you how to do it properly using CoreUI for React — a component library that’s 100% compatible with Bootstrap styling but built entirely for React.

How to Use Bootstrap Tooltip in React Without Breaking React – CoreUI Integration Guide

Łukasz Holeczek

Tuesday, June 10, 2025

#how-to #react

If you’re working with React and want to use Bootstrap-style tooltips, there’s a catch: Bootstrap’s native tooltip implementation is imperative and DOM-driven — which doesn’t align well with React’s declarative model.

How to Redirect to a New URL Using JavaScript Redirect Techniques

Łukasz Holeczek

Monday, April 7, 2025

#how-to #html

Redirecting users to a new URL using JavaScript is a common and useful practice for web developers. Whether you’re handling successful logins, navigating users after actions, or managing SEO implications, understanding how JavaScript redirects work is crucial. In this guide, you’ll learn the best practices for creating redirects, their implications for SEO performance, and when to choose JavaScript over server-side methods.

How to Achieve Perfectly Rounded Corners in CSS

Łukasz Holeczek

Tuesday, March 4, 2025

#how-to #html

Rounding the corners of an element is a fundamental way to add visual appeal and flexibility to web pages. Whether you want subtle rounded corners, a circle, or even elliptical corners, mastering the border radius property is a key step toward creating modern, user-friendly interfaces. In this post, you will learn how to use the CSS border radius property, explore best practices for top left and bottom corners, handle right bottom left edges, and even add a box shadow or drop shadow for extra flair. By the end, you will be able to style each corner effectively, apply logical properties for both LTR and RTL layouts, and bring your web designs to life.

How to Add a Tab in HTML

Łukasz Holeczek

Saturday, March 1, 2025

#how-to #html

Adding a tab in HTML is a common challenge for developers who want to control spacing and layout on their web pages. Since many browsers and editors interpret the tab key differently, it’s crucial to understand several ways to produce a consistent horizontal tab effect. In this article, you’ll learn key methods for creating a tab character in HTML, explore the best CSS properties to manage spacing, and see how to maintain accessibility for all users. By the end, you’ll have a clear solution for implementing tab space without relying on multiple non breaking spaces.

How to Open Link in a New Tab in HTML?

Łukasz Holeczek

Wednesday, February 26, 2025

#how-to #html

Opening a link in a new tab is a fundamental skill for anyone building modern websites or web applications. By using specific HTML attributes, you can help your users effortlessly view external content or switch between related pages without losing their place on the original page. In this article, you will learn why the target attribute is crucial, how to properly handle potential security concerns, and the best techniques to open the linked document in a separate browser window or tab. Read on to discover how you can enhance user experience and stay in control of your own site’s navigation flow.