Leverage the power of Bootstrap 4 without incorporating its pre-built components

Is it possible to utilize Bootstrap 4 without its components? The diagram below seems to suggest otherwise, correct?

My Scenarios:

  • I need to implement Angular Material components instead of Bootstrap components.
  • It's acceptable to use Bootstrap 4 without Jquery.
  • I am aiming to minimize bundle size while still supporting IE 11 and newer versions.
  • I am working with Angular 8.

Are there any alternative approaches to address this issue?

https://i.sstatic.net/9JVaR.png

For example: As per the chart above, I can utilize bootstrap-grid.min.css for the grid system. However, how can I incorporate the Layout, Content, and Utilities CSS from Bootstrap without including the Components?

htmlcssangularbootstrap-4angular-material

Answer №1

First, ensure you have Bootstrap installed and then customize it to suit your needs by compiling it with your desired options. It's important to utilize Sass for styling in your Angular project.

npm install bootstrap

styles.scss:

// Import these essential Bootstrap components without increasing bundle size.
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Root adds variables to the CSS scope
@import "~bootstrap/scss/root";

// Reboot is optional, but commonly used
@import "~bootstrap/scss/reboot";

// Comment out unnecessary components below
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/utilities";

The prefix ~ instructs node_sass to locate the imports in the node_modules directory. The compatibility of this method may vary depending on the Angular version you're using, but it has been functional for me even with Angular 8.

Answer №2

To setup Bootstrap, you begin by installing it and then proceed to compile it with your preferred settings. It is essential to utilize Sass for this process.

npm install bootstrap

Answer №3

If you're not a fan of SASS, or the process of compiling style sheets, you can simply link to the complete version of Bootstrap on your website or through an external content provider. This way, you have all the resources you need without the hassle of additional steps, compiling, or dependencies.

I like to incorporate a custom style sheet that resets Bootstrap's default styles back to the browser's default settings. This effectively removes any custom fonts and text settings applied by Bootstrap, allowing you to introduce your own styles without impacting their custom classes. This method works across different browsers, including IE, by utilizing fallback properties and the newer "all:revert" property to reset values back to the default browser style sheet:

html body {
    display: block;
    margin: initial;
    zoom: 1;
    font-family: sans-serif;
    font-size: initial;
    padding: initial;
    font-weight: normal;
    line-height: normal;
    color: initial;
    text-align: initial;
    background-color: initial;
    all: revert;
}

This approach allows you to maintain a clean HTML style while still having the option to utilize Bootstrap's custom classes. The beauty of this solution is that you can easily reset Bootstrap's styles back to default browser settings by simply incorporating your own external cleaner style sheet.

Remember, sometimes simple is better :)

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

Error: UserService (?) is missing parameters and cannot be resolved

Upon compiling my application, an error is appearing in the console: Uncaught Error: Can't resolve all parameters for UserService (?) Despite having @Injectable() present for the UserService, I am unsure where to troubleshoot further. import {Inj ...

angulartypescript

What is the process of incorporating HTML into a jQuery program in order to immerse the world in an element?

I am looking to utilize HTML with the value in a checkbox, After adding a shortcode: <label class="HCheck">(this is val 1 )</label> and incorporating jQuery to change it to: <label class="HCheck">(this is val 1 ) ...

javascripthtmljqueryloopsdom

Utilizing nested classes in CSS or SCSS for calling a class within another class

I am having trouble calling a class within another class. Can someone help me figure out how to do it? Here is the HTML code: <div class="main">Content</div> <div class="cover">Cover content</div> And here is t ...

css

Tips for keeping images stationary while expanding on hover

Currently, I am in the process of developing my first website. My main goal is to create an image gallery that displays thumbnails of images and expands them when you hover over each one. Initially, I adjusted the sizes of the images to 100px*100px using H ...

htmlcssimage

What is the best way to retrieve the DOM of a webpage that uses MP4 file extension?

I'm attempting to access the DOM within a page that has an MP4 extension. The page isn't a video or audio file, it's just HTML with an MP4 extension "". I've included the code I'm using to try and access it using Simple HTML DOM. T ...

phphtmldom

Enhance functionality in JavaScript by accessing the return value from a function

I'm trying to achieve the same outcome using a different method. The first approach is functioning correctly, but the second one is not: <script> function hello(){ var number = document.getElementById("omg").innerHTML; if(numbe ...

javascripthtmldom-events

Animate objects as they move along the page

Modern websites often incorporate animations into their designs. I had the idea to animate elements as we scroll down the page, using a combination of JQuery, HTML, and CSS. <div class="noanimate imgleft"> </div> <div class="noanimate img ...

jqueryhtmlcss

Which HTML tag should I choose to apply color to text in Twitter Bootstrap?

I'm looking to enhance the appearance of a specific word in my text. For example: This is my text, <span class="red">this</span> should be red. Would using the span tag be the appropriate method for achieving this effect? Or are there ot ...

htmlcsstwitter-bootstrap

Implementing translation text into a PHP database

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Translate and Save Text</title> </head> <body> <form action="" method="post" name="theform"> <table width="693" border="1" style="table-l ...

javascriptphphtmlmysqlgoogle-translate

Exploring alternative options for routing in Angular2 using auxiliary outlets

I have a folder structure that looks like this: my-app |- src |- app |- private |- private.routing |- public |- public.routing app.routing The contents of the private.routing file are as follows: export const rout ...

angularangular2-routing

What is the best way to remove a specific row from an Angular Material table that does not have any filters

Here is my samplepage.component.ts code: import { Component } from '@angular/core'; @Component({ selector: 'app-batchticketvalidation', templateUrl: './batchticketvalidation.component.html', styleUrls: ['./batchtic ...

angularmat-table

Cookies with the HttpOnly attribute are not transmitted in a request

I have implemented the use of HttpOnly cookies in my Java code like this: ... Cookie accessTokenCookie = new Cookie("token", userToken); accessTokenCookie.setHttpOnly(true); accessTokenCookie.setSecure(true); accessTokenCookie.setPath("/"); response.addC ...

javaangularcookiesjwtcookie-httponly

Having difficulties executing protractor tests on Safari

In my Angular7 project, everything runs smoothly in Chrome with all E2E tests passing without any issues. However, when trying to run the tests in Safari, Protractor crashes and throws an error. Initially, I had configured my protractor.conf.js file as fo ...

angularsafariprotractor

The Next.js Image component does not implement the maxWidth attribute

<Image src="/assets/blog/image.webp" style={{ maxWidth: "700px" }} width={1400} height={1400} /> Issue Detected The image with src '/assets/blog/image.webp' has the following styles applied, but they are being overwrit ...

cssreactjsnext.js

Issue with URL routing causing page to display incorrectly

When using the normal Href, the page is rendered properly, but the URL is not hidden: <asp:Repeater ID="rCompany" runat="server" DataSourceID="sdsCompany" > <ItemTemplate> <div class="col4" id="trip_third"> <a href="discover_detail.as ...

c#htmlasp.neturl-routing

Seeking to duplicate script for a new table without making any changes to the original script

I am working with two tables that require the capability to dynamically add and delete rows using separate scripts. How can I modify the second script so that it only affects the second table and not the first one? Table: <table id="myTable" class=" t ...

javascriptphphtmlfunction

Unable to open file:/// on localhost in the browser

I have been working on a website that can display the folders and files on a client's machine in an HTML table. Everything was functioning correctly, but I encountered an issue with creating href links for files on the client's machine which were ...

pythonhtmllocalhosthrefinternet-explorer-11

What is the method for creating a rectangle with text inside using HTML and CSS?

Hello, I need help with achieving this design using HTML and CSS. Can you assist me, please? https://i.stack.imgur.com/xOHVX.jpg This is what I have attempted so far: Below is my CSS code: .line-lg{ width:120%; text-align: center; border-bot ...

htmlcss

Issue encountered: NPM error, unable to find solution for resolving dependency and addressing conflicting peer dependency

I am facing difficulties deploying my project on netlify due to NPM errors. Below are the dependencies: "dependencies": { "@angular/animations": "~15.1.1", ... (list of dependencies continues) ...

javascriptangulartypescriptnpmdependencies

Guide to uploading a PDF to Google Drive and embedding it on an HTML static website

I manage a static HTML site for a small food shop. They require monthly menu uploads in PDF format. I believe uploading to Google Drive would be a more efficient solution than creating a separate admin view for file uploads. Can anyone advise me on how to ...

javascriptphphtmlpdf