How can I customize the border color in Bootstrap with a specific hex code?

Being new to the world of web design, I have a burning question that may have an easy solution that has evaded my notice. In my current project, I am attempting to create a div with a colored border using bootstrap. Specifically, I want to use a specific hex color for the border (let's say: #cc6666). While the bootstrap website provides some information on border coloring, it seems that the options are limited to predefined choices like border-primary or border-dark, without a clear way to set a custom color.

Question: Is there a simple method to apply a custom hex color to bootstrap borders?

<!DOCTYPE html>
<html>
<body>

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e0fbe4fbe6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="border rounded border-primary">
  <prompt>Lorem Ipsum</prompt>
</div>


  <style type="text/css">
  
    prompt {
      color: #cc6666;
      vertical-align: middle;
    }
    
    
  </style>
</body>

</html>

htmlcssborderbootstrap-5

Answer №1

I successfully incorporated Adam's suggestion into the provided code snippet.

<!DOCTYPE html>
<html>
<body>

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209160914">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="border rounded border-primary">
  <prompt>Lorem Ipsum</prompt>
</div>


  <style type="text/css>
  
    prompt {
      color: #cc6666;
      vertical-align: middle;
    }
 
    .border-primary{ 
      --bs-border-opacity: 1; 
      border-color: #cc6666 !important; }
    
    
  </style>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatically appending textarea value in HTML tag upon form submission via JQuery

When a form is submitted through JQuery, the HTML tag automatically adds textarea value. This is my JQuery code: $('#calling').click(function() { $('#myform').submit(); }); Within my form, there is a textarea element: <textar ...

phpjavascriptjqueryhtmlforms

How can I add information into a nested div element?

I encountered an issue when attempting to insert data into my block. The div structure is as follows: <div class="1"> <div class="2"> <div class="3"> <div class="4"></div> </div> ...

javascriptjqueryhtmlcss

Place a gap at a specific spot within the boundary line

Here is a CSS code snippet that displays a horizontal line: .horizontalLineBottom { border-bottom:solid #6E6A6B; border-width:1px; } Is it possible to add space at a specific position on this line? For example, _________________________________ ...

javascriptjquerycss

the live binding feature fails to function properly once an append operation is executed

Could someone please explain to me why adding an even number of squares causes the bind event to stop working? $("#add").click(function(){ $("#container").append("<div class=\"square\">xxxxxx</div> ").bind("click",function(e) { ...

jqueryhtmlcss

Adjust the ZIndex on a div through interactive clicking

For my new project, I'm exploring a concept inspired by Windows 7. The idea is that when you double click on an icon, a window will open. If you keep double clicking on the same icon, multiple windows should appear. The challenge I'm facing is im ...

javascripthtmlcssz-index

Is there a way to ensure my chat view functions properly without relying on partial views?

I am currently working on integrating a private chat feature using SignalR in my project, and I have encountered an issue while creating a View with accessible model values to pass to the server. Specifically, I have a list of doctors, and when a user clic ...

javascripthtmlcssasp.net-mvcsignalr

Eliminate unnecessary scrollbar from fancybox iframe

I am trying to display content in an iframe using Fancybox, but I am encountering an issue. Despite all the content being contained within the iframe, horizontal and vertical scroll bars are appearing. When inspecting the element in Firefox, I noticed th ...

javascripthtmlcssfancybox

The checkbox filter in Angular 6 has the ability to replace the previously selected

I've been working on creating a filter system using checkboxes. Below is a snippet of the code I'm currently using: filter.pipe.ts import { Pipe, PipeTransform, Injectable } from '@angular/core'; @Pipe({ name: 'filter2' }) ...

javascripthtmlangularfilter

I am attempting to design an HTML page to serve as the body of an email. Can anyone advise me on how to effectively pass it into my setBody() function while using yiiMail?

On one of my .php pages, I have the following code snippet: <html> <head></head> <body> Hi <?php echo $user['first_name'].' '.$user['last_name']?>, <br><br> To reset your ...

phphtmlemailyii

Using CSS to create various h1 headings with distinct colors and sizes

I am currently working with CSS and HTML, trying to replicate the design shown in this image: https://i.stack.imgur.com/Uyczp.png Initially, I attempted to achieve this by using multiple h1 tags, but after researching further, I realized that it is gener ...

htmlcsstextfontshtml-heading

Utilize jQuery and HTML simplistically to display or conceal divs throughout a webpage

After developing some basic jQuery code using if-statements to toggle the visibility of Divs based on a select list in HTML, I am seeking ways to enhance this code: 1) How can I achieve the same functionality with fewer lines of code? 2) Rather than manu ...

javascriptjqueryhtmlif-statementoptimization

Utilizing CSS Grid to dynamically stretch and wrap rows based on adjacent siblings within a flat DOM structure

Looking for a way to create a grid layout that adjusts row sizes based on adjacent siblings. Interested in SCSS or CSS solutions using grid, flexbox, or other techniques. https://i.sstatic.net/Ump5U.png I am working with a dynamically generated list base ...

csssassflexboxcss-grid

How can I create a webpage that is fully responsive to both width and height, with text that automatically scales to fit the

I am currently using Bootstrap and Angular to develop a single-screen webpage tailored for small screens such as the Adafruit 2.2" or 2.8" screen for the Raspberry Pi, or mobile phone displays. I aim to make all content (specifically about 3-4 rows of a ta ...

jqueryhtmlcss

What is the method to make a CSS selector avoid selecting a specific element?

Let's say I have a CSS style that looks like this: input.validation-passed {border: 1px solid #00CC00; color : #000;} The JavaScript validation framework I am using injects every input tag with a class="validation-passed". While this works fine ...

javascripthtmlcss

Explore a Wordpress HTML code

I own a WordPress website using the Photolux theme. My desire is to extract HTML elements such as titles and tags, but for some reason they are not visible. Just to clarify, I am not interested in reading the XML format. If anyone has any suggestions or ...

htmlwordpress

Launching a HTML hyperlink inside a div with the power of jQuery

I am currently exploring the functionality of dragging and dropping an HTML link into a div element. My objective is to have the link open within that specific div element. The layout consists of two divisions named "left-panel" and "canvas". The concept ...

jqueryhtmlajaxjquery-ui

Mismatched units px and rem (existing fixes are ineffective)

Recently, I attempted to implement custom sass in a project at work. However, when running npm watch, I encountered the error: Incompatible units px and rem. The root of the issue seems to be in _variables.scss where the following line resides: $input-h ...

csslaravelvue.jssassbootstrap-4

Using jQuery to replace the content of a div with a delay?

I am attempting to utilize jQuery to create a fade effect on an element, replace its innerHTML content, and then fade it back in once the new content has been added. I have successfully managed to replace the element's content using the .html() method ...

javascriptjqueryhtmlcssinnerhtml

struggling to develop a sophisticated 'shopping cart organization' program

I am in the process of creating a database for video spots, where users can view and modify a list of spots. I am currently working on implementing a cart system that automatically stores checked spot IDs as cookies, allowing users to browse multiple pages ...

javascriptjqueryhtml

Is there a way to place two input fields from different forms side by side on the same line?

Here are two forms extracted from an html page: <form method="get" action="search/s" id="number"> <div style="text-align: center;"> <input type="text" id="regNo" name="regNo" size="30" maxLength="50" > or ...

javascripthtmlcssuser-interfaceweb