Incorporate Bootstrap and SCSS by utilizing class names within the SCSS code rather than directly in the HTML files

Question

Incorporate Bootstrap and SCSS by utilizing class names within the SCSS code rather than directly in the HTML files

When working with Bootstrap 4, I have discovered the text-truncate class that can be used in an element. For example:

<span class="text-truncate">Any very long text</span>

Now, my goal is to apply this text-truncate class to multiple objects by defining it in a .scss file rather than directly in .html files.

Is there a way to achieve this?

Can I implement something like the following:

@import "text-truncate" from "bootstrap.scss";

.myBeautifulDiv {
  use text-truncate;
}

This would be incredibly useful! Is it feasible?

css twitter-bootstrap sass bootstrap-4 scss-mixins

Answer 1

Answer №1

Utilize scss to create placeholder classes,

The names of these placeholder classes must commence with %. The classes themselves will not appear in the final css files.

However, they can be incorporated into other classes as demonstrated below.

Ensure that you load your bootstrap css beforehand.

 /*Inside the bootstrap file*/
    .text-truncate{
      text-overflow:ellipsis;
      ...
      ...
    }

 /*Within your scss file*/

%truncatedtext {  /*This serves as a placeholder class*/
 @extend .text-truncate;  /*This imports/includes the actual bootstrap code*/
}

.class-a {
  @extend %truncatedtext;
  color: #000000;
}

.class-b {
  @extend %truncatedtext;
  color: red;
}

The resulting output would be

.text-truncate, .class-a, .class-b {
  /*Truncate css code*/
}

.class-a {
  color: #000000;
}

.class-b {
  color: red;
}

Answer 2

Utilize scss to create placeholder classes,

The names of these placeholder classes must commence with %. The classes themselves will not appear in the final css files.

However, they can be incorporated into other classes as demonstrated below.

Ensure that you load your bootstrap css beforehand.

 /*Inside the bootstrap file*/
    .text-truncate{
      text-overflow:ellipsis;
      ...
      ...
    }

 /*Within your scss file*/

%truncatedtext {  /*This serves as a placeholder class*/
 @extend .text-truncate;  /*This imports/includes the actual bootstrap code*/
}

.class-a {
  @extend %truncatedtext;
  color: #000000;
}

.class-b {
  @extend %truncatedtext;
  color: red;
}

The resulting output would be

.text-truncate, .class-a, .class-b {
  /*Truncate css code*/
}

.class-a {
  color: #000000;
}

.class-b {
  color: red;
}

Answer 3

Answer №2

Definitely doable! Visit this link (https://getbootstrap.com/docs/4.1/getting-started/download/), select "Download Source", and the desired content can likely be found in the _scss directory.

Answer 4

Definitely doable! Visit this link (https://getbootstrap.com/docs/4.1/getting-started/download/), select "Download Source", and the desired content can likely be found in the _scss directory.

Incorporate Bootstrap and SCSS by utilizing class names within the SCSS code rather than directly in the HTML files

Answer №1

Answer №2

Similar questions

Navigate to the specified text in the dropdown menu based on the ul li selection

Apply CSS3 to target all td elements within the main table that contains nested tables

Sort an HTML table based on concealed data

Updating the UpdatePanel causes duplication of CssClass

Rearranging the stacking order of CSS pseudo-element

Stylish navigation bars with CSS and Jquery for seamless browsing experience

Using JavaFX to create a StackedAreaChart and implementing the setLowerBound method

The functionality of changing the checkbox to "checked" by clicking on the span is not

Enhance the aesthetic appeal of the Search and Filters component in ASP.NET Core using Bootstrap styling

Alignment of Bootstrap 5 card text and buttons

The HTML button renders all JavaScript functions as null and void

Troubleshooting problems with Z-Index div hover overlay on [windows] and Webkit browsers (Safari, Opera, etc)

Solution to trigger CSS :hover to refresh following a transition (such as expanding a menu)

The design of the button appears unappealing when viewed in

Position the icon to the left side of the button using Bootstrap

Using PHP Hover should apply CSS styles exclusively to the specified element

Creating a sleek and responsive data grid using a combination of Bootstrap and

I am attempting to change a "+" symbol to a "-" symbol using a Bootstrap toggle feature

stopping the current menu selection from altering its color

How can I insert a item into an Array using JavaScript code?