Today I was experimenting with React Bootstrap Modal and attempting to customize the closeButton icon. Unfortunately, my attempts were unsuccessful.
<Modal.Header className='modal-head' closeButton>
<Modal.Title>Cart</Modal.Title>
</Modal.Header>
In my opinion, the react-bootstrap library does not offer built-in support for this feature. However, you can manually add an icon to the right side of the modal header and include an onClick event that toggles the modal's open state and closes it when clicked.
*Check out this example for a clearer understanding. You only need to import LoginButton.
Pay attention to
handleShow
export const LoginButton = () => {
const [fullscreen, setFullscreen] = useState(true);
const [show, setShow] = useState(false);
function handleShow(breakpoint) {
setShow(breakpoint);
setFullscreen(true);
}
return (
<div>
<Button className="me-2 mb-2" onClick={() => handleShow(true)}>
Login
</Button>
<Modal className="Modal_Login" show={show} fullscreen={fullscreen} onHide={() => setShow(false)} >
<Modal.Header className="Modal_Login_header" >
<Modal.Title className=" Modal_Login_header_title col-md-4" >Login</Modal.Title>
<Button className="col-md-2" onClick={() => handleShow(false)}> CLose </Button>
</Modal.Header>
<Modal.Body>Modal body content</Modal.Body>
</Modal>
</div>
)
};
CSS:
.Modal_Login{
display: flex;
flex-direction:row;
}
.Modal_Login_header{
display: flex;
flex-direction:row;
justify-content: flex-end;
}
In straightforward terms, it is not possible to alter the icon or color using react-bootstrap. The icon is generated by an SVG tag from CSS where the attribute --bs-btn-close-bg represents the icon itself.
The only workaround I can suggest is creating a custom tag in your CSS file like this:
.btn-close {
--bs-btn-close-bg: url("data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'
fill='white'>
<path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1
1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-
6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-
1.414z'/>
</svg>
") !important;
}
To modify the icon, adjust the path and viewbox attributes to achieve your desired icon. You can utilize FontAwesome to use the SVG of any free icon you prefer:
.btn-close {
--bs-btn-close-bg: url("data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 448 512"
fill='white'>
<path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5
32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3
32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-
45.3s-32.8-12.5-45.3 0l-160 160z"/>
</svg>
") !important;
}
To adjust the color, change the fill='desired color' attribute using options like rgba, rgb, or #color-code.
fill="rgb(13, 110, 253)" //or
fill="%2384b6f4" //or
//(Note: Replace # with %23 for proper formatting)
fill="rgba(0, 255, 25, 0.8)"
This example showcases HTML and CSS but the principle remains consistent since the crucial aspect comes from the App.css or your custom .css file.
.btn-close {
--bs-btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='black'><path d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/></svg>") !important
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7875756e696e687b6a5a2f34293429">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<!-- Button trigger modal -->
<div class="text-center">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283b3c6ddc0ddc0">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>As a newcomer to front-end development, I'm seeking guidance on integrating Bootstrap dropdown menus with a datepicker. The goal is for users to click on the menu and have the datepicker pop up so they can select a date. My ultimate objective is to ca ...
I've been developing a new application that's packed with Shadow-roots. Before entering the shadow root, I could use Xpath to locate elements, but once inside the shadow root, I have to switch to CSS selectors. Check out the Root tree image below ...
Hey there, I have a requirement to show the details of a selected row in the next page. In the first page, I am only displaying the name and city fields, and the rest will be visible after clicking a button. Here is my HTML page: <!DOCTYPE html> &l ...
I encountered a frustrating issue with the react-i18next library. Despite my efforts, I was unable to successfully translate the strings in my application. The relevant code looked like this: App.tsx: import i18n from 'i18next'; import { initR ...
My current project involves creating an overlay to display a fluid image of any size. The challenge I'm facing is how to consistently position the close button 30px above the image and flush with its right edge. The catch is that the container doesn&a ...
I am confused about the error message that says the role "div" was not found, even though there are multiple instances of "div" present. I attempted to replace the div with an "h5" element since there is only one, but it resulted in a similar error. What c ...
I am looking to create a semi-circle for the bottom border of a div, without using rounded corners. Here is an example: https://i.sstatic.net/6Em6c.png Here is the code for the div: #navlogo img { position:fixed; width: 180px; height: 180px; z-index: 2; ...
Having trouble pressing the TouchableOpacity button as it's not responding, and even after pressing it, I need to access the time picker to select a specific time to display inside the square view in the center. Any suggestions on how to resolve this ...
I'm currently working on a palette board project and facing some challenges when switching to a different theme. The initial page is set to have a Warm color palette, but I intend to alter this once the user clicks on the All theme option. Users wil ...
After updating the state in a component and passing the new props into the child, I noticed that the child is not updating correctly and the defaultValue of the input is not changing. My initial thought was that using this.props could be the issue, so I sw ...
Can someone help me double-check my calculations? I am trying to figure out how many pixels are in the span of 13.6 millimeters for a specific device that has a resolution of 224.17 pixels per inch. (Given that 1 inch = 224.17ppi, therefore: 1 centimeter ...
I am currently using a Bootstrap 4 carousel with 28 pictures. However, I am facing an issue where the indicators on small and medium devices are not displaying properly (some indicators seem to be missing). They are not breaking into new lines as expected. ...
I am currently working on developing an ecommerce website. In order to display products, I am fetching data from a database. My goal is to allow users to add products to their cart without having to refresh the page. I have attempted to use AJAX for this ...
Recently, I encountered an issue with styling SVG graphics dynamically generated from data. The SVG graphic appears like this: https://i.sstatic.net/xvIpE.png To address the problem, I turned to Canvg in hopes of converting the SVG into an image or PDF us ...
Looking to change the image upon clicking on any of the navbar items. Emulating the navigation bar behavior from this website : This is my current progress : The HTML file : <html lang="en"> <head> <meta charset="utf-8" /> ...
I have a Dashboard Component with a side nav that contains menu items such as Dashboard, Manage Companies, ContactUs, and Manage Users. When clicking on Dashboard, I want to render the dashboard component on the same page. Similarly, when clicking on Manag ...
I'm currently working on a map project that involves multiple map pointers (7). By using the code below, I have successfully positioned them correctly: <div style="position:relative; left: 0; top: 0;"> <img src="images/JCCareas.png" cla ...
Upon reaching the end of my code, I am encountering an issue where instead of seeing the expected output of "Done!", it displays undefined. This is the code in question: const container = document.querySelector(".container") const table = document.querySe ...
Can anyone help me with parsing the JSON response below into a FlatList? I'm not sure what I'm missing since it doesn't follow the standard key and value pair structure for rendering. {"list":["a","b","c","d"]} Here is my code... impo ...
Imagine we have a standalone HTML file that is sent to someone. Is there a way, possibly using third-party services, to track if the document has been opened without the user knowing? I thought about placing a PHP script on a "friendly" server and making ...