Incorporate exclusively the BS4 modal feature onto a basic index.html webpage

Looking to add only the modal component from Bootstrap 4/5 to a basic HTML page without including the entire library, as it conflicts with my existing CSS template. The BS3 Customize builder only supports versions 3.4.1 and earlier.

The issue with this is that the 3.4.1 modal version does not look as modern or stylish as the newer BS4 or BS5 versions. For example, in the image provided, the 'x' button is not properly aligned vertically and the button style is outdated.

https://i.sstatic.net/KLQzO.png

Comparison with BS4/5 modal version

https://i.sstatic.net/D0KVJ.png

Is there a way to achieve this? To import just the BS4 or BS5 modal component into a simple HTML landing page without conflicting with other CSS files?

To export only the 3.4.1 bootstrap modal version, I found this helpful link.

Thank you!

htmlcssbootstrap-4modal-dialogbootstrap-modal

Answer №1

To effectively style your website, it is important to carefully select the CSS classes you want to use. (Please note that JavaScript functions triggering expected behaviors are not covered in this explanation)

Referencing the initial example outlined in Bootstrap's Modal documentation:

Key selectors utilized in a basic modal layout include:

  • .modal
  • .modal-dialog
  • .modal-content
  • .modal-header
  • .modal-title
  • .modal-body
  • .modal-footer
  • .btn
  • .btn-close
  • .btn-primary
  • .btn-secondary
  • h5

For a practical demonstration and implementation, check out this interactive CodePen, featuring a customized Google Font.

Explore the HTML structure below:

<div class="modal" tabindex="-1">
  <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 class="modal-body">
        <p>Content for the modal body goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Corresponding CSS classes for styling purposes:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap');

* {
    font-family: 'Open Sans', sans-serif;
    font-size: Arem;
}
<!-- Additional styles continue... -->

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

"Font-face is effective in Internet Explorer but appears to have compatibility issues in Firefox particularly regarding font formats

I have downloaded a free font that comes in regular and bold variations, with the following formats: svg, eot, ttf, woff. These fonts display properly in Internet Explorer, but they are not working in Firefox. 1. I would like to understand which format is ...

csssvgfontsfont-faceeot

Several submission choices available within a single form

My form is set up like this: <form action='../performSQL.php' method='post'> <input type='hidden' name='hidden_id' value='$id'> <input type='date' name='porteringsdato' va ...

phphtml

Can you modify the current HTML code of a Wix website?

I am currently developing a website using Wix and have encountered an issue with the page description. Despite editing it in Wix, the changes are not reflecting on the live site. Upon inspecting the source code in Chrome, I identified the problem lies wi ...

htmlvelo

Select a hyperlink to access the corresponding tab

I've been playing around with bootstrap and AngularJS. I placed nav-tabs inside a modal-window and have it open when clicking on a link. However, I want the appropriate tab to open directly upon click. For example, if I click on "travel", I want the t ...

javascriptjqueryhtmlangularjstwitter-bootstrap

What is the proper method for storing user registration information in the database so that it can be easily retrieved and accessed later? (Error message)

User.cs: An error is occurring in the User class where 'User' is not a valid type in the context of TestBlazor project. It happened when attempting to save user registration data. using System; using System.Collections.Generic; using S ...

c#htmlcssblazor

Creating a loader for a specific component in Angular based on the view

Creating a loader for each component view is crucial when loading data from an API. Here is the current structure of my components within my <app-main></app-main>: <app-banner></app-banner> <app-data></app-data> <app ...

htmlcssangularcomponentsloader

Cannot hide the minimize/maximize button row in split pane editor layout on Eclipse Neon

Exploring the new features of Eclipse Neon has been a pleasant surprise. One notable improvement is the ability to reclaim wasted space from the UI with minimal effort. For instance, Gtk 3.20 (on Linux) has optimized scrollbars and gutters so well that cu ...

csseclipseuser-interfaceswteclipse-neon

Utilizing dynamic attributes within the CSS styling function

I encountered an issue when attempting the following code. It doesn't seem to be working properly. Could you provide some assistance in figuring out why? var propertyName = 'left'; var propertyVal = $("body").width(); $('nav').cs ...

javascriptjquerycss

Creating responsive columns in Bootstrap 4

Recently delving into Bootstrap to create a responsive banner, I spent time researching last night and this morning. If my question has already been answered elsewhere, please direct me to the source. I have set up a grid with 4 columns in one row, placing ...

bootstrap-4gridresponsive

How can I create a detailed highchart map of Korea that accurately includes Dokdo in its design?

I am currently working on a project to create a comprehensive map of Korea using highchart. One major challenge I have encountered is the absence of Dokdo on the standard map of Korea provided by highchart. Is there a way for me to develop a map that inc ...

javascripthtmlcsschartshighcharts

What is the best way to open a link contained within a div by clicking on it

I am currently in the process of developing a website that is able to parse a Spanish dictionary. When looking up the word HOLA, the site provides the definition. However, for other words like CASA, users receive suggestions with links such as My goal is ...

phphtmlparsingphp-parser

Social media icons failing to adhere to inline block formatting

Three social icons were designed to be displayed in a row (check out the working JSFiddle - here). Despite this, when implemented on my Wordpress blog, they are not positioned side by side but rather stacked on top of each other as seen here - . Is there ...

htmlcsswordpress

transfer data from one HTML page to another through the database

I have an HTML page in Flask that pulls applicant information from a SQLAlchemy database. I would like to be able to click on an applicant's name on the first page and have another page open with specific details for that applicant. While I was succe ...

pythonhtmlflasksqlalchemy

Creating a dynamic slideshow using Jquery Ajax requests

I am looking for help with creating a slideshow using Ajax calls. I have successfully implemented it by adjusting the margin left, but now I need to approach it differently. I have a PHP array that I fetched from a database and I want to use it to display ...

javascriptphpjqueryhtmlajax

Media query mismatch causing unexpected behavior in Bootstrap

Help! I am facing an issue with my container displayed on a screen at 873 pixels width. Strangely, the media query max-width: 540 is taking effect instead of the intended max-width: 720. When checking in Chrome Dev Tools, the one that should be applying ...

twitter-bootstrapbootstrap-4

Tips for vertically centering a span within a div that is floated to the right

Need help centering a span vertically within a div when using float:right? <div class="card"> <div class="card-header"> <h5>TEST</h5> <span class="fa fa-info"></span> </div> <div class="card-body" ...

htmlcsstwitter-bootstrapbootstrap-4

How can I utilize PHP to generate several tables within a single database?

I need some guidance on creating multiple tables within the "new" database. I'm curious if it's possible to include PHP code inside the query to generate table names dynamically. Any help would be greatly appreciated. Thank you in advance. <? ...

phphtmlmysqlmysqli

Prioritize checked checkboxes at the top of the list

When a radio button is clicked, an Ajax request is triggered and the Div containing checkboxes for employees is retrieved. I am hoping to have the selected checkboxes displayed at the top. I am considering the possibility of using a dynamic index attribut ...

javascriptjqueryhtmlajax

What is the best way to conceal the style attribute?

Is there a way to hide the style attribute in HTML while still keeping it functional? For example: <html style="--color:#1E90FF;"> I tried using removeAttr to remove the attribute, but it stopped working completely. I can't achieve this throug ...

javascriptjqueryhtml

including the current parameter from <select> within the URL

I have a HTML form with three <select> tags that populate data from a database. I would like to send a request to a URL in the following format when a button is pressed: /admin/{facultyName}/{specialtyName}/{groupName} Where facultyName repre ...

htmlspringurlmodel-view-controllerthymeleaf