Encountering issues with custom.css.scss not being properly overridden in Rails while using Bootstrap

My Configuration

I made modifications to the .col-lg-4 class in Bootstrap for Rails and added them to my custom.css.scss file after the import statements to remove padding completely.

The Issue at Hand

I am trying to override the styling of .embed-responsive video in the bootstrap CSS by removing the width property and setting padding to zero. While I found a temporary solution by manually importing a bootstrap file, I prefer to utilize the capabilities of the bootstrap sass gem to achieve this.

Unfortunately, the properties are not being overridden in the Custom.css.scss file despite my efforts.

Inconsistent Behavior (Custom.css.scss)

The challenge lies in the fact that when I import Bootstrap-sprockets & Bootstrap, it appears to disregard my custom CSS, preventing me from implementing the desired changes mentioned above.

@import "bootstrap-sprockets";
@import "bootstrap";

.thumb{
}

.col-lg-4 {
    padding: 50px !important;
}
.embed-responsive .embed-responsive-item,.embed-responsive   embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;height:100%;border:0}

Application.css

 *= require_tree .
 *= require_self
 */

I have attempted to use rake assets:clean as well.

UPDATE: Through experimentation, I discovered that providing a custom bootstrap CSS file and not importing bootstrap in Custom.css.scss resolves the issue.

Nevertheless, I would like to find a solution using the bootstrap sass gem if feasible. Is there a way to rectify the current setup?

htmlcssruby-on-railstwitter-bootstrap

Answer №1

Have you tried simply overriding the variable $grid-gutter-width in the variables section?

My typical setup involves manually including individual CSS files to control hierarchy, rather than using require:

 * require_tree .
 * require_self
 */

@import "bootstrap_variables";
@import "bootstrap-sprockets";
@import "bootstrap";

// Bootstrap components
@import "navbar";
@import "forms";

// App components
@import "orders";

  1. To customize Bootstrap variables (https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss), I make sure to include them before anything else to check for overrides.

  2. To override specific Bootstrap components, I include them separately in their own CSS files.

  3. For application-specific styles, categorized by model/view, I create a separate CSS file.

While it may be basic, this approach often proves effective for most situations.

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

Modifying the appearance of the search box

I'm looking to customize the appearance of my search box. On Stack Overflow, you'll notice the search box is a perfect rectangle. I want mine to have rounded edges, like an ellipse, rather than being rectangular. How can I achieve this look? Than ...

htmlcss

AngularJS is failing to recognize the onload event when loading a URL

I am currently working with the AngularJS Framework and I have encountered an issue. My directive only seems to work when the window is fully loaded. screensCreators.directive('createscreen', function () { return { restrict: "A", ...

javascriptjqueryangularjshtml

Adjust the placement of the navigation to the middle of the

Currently working on a webpage using html/css, I came across a stylish navigation bar which I decided to customize. However, I'm facing difficulty in aligning the navigation bar at the center of the header. Here is a snapshot of the current layout: h ...

htmlcss

Stopping individuals from engaging in the act of spamming a picture upload form

I am currently developing an innovative Image hosting platform, and I am faced with a crucial challenge – how can I effectively prevent users from continuously refreshing the form, causing the image to be repeatedly uploaded until my disk space allocat ...

phphtmlcssimageupload

Trouble with connecting CSS files

Can anyone explain why my CSS file isn't linking properly when the HTML file is located in a subfolder within the directory that contains both the CSS and HTML folders? I attempted to remove the main folder path from the link, but the issue still pers ...

htmlcssfilefile-link

Exploring Angular 2 Tabs: Navigating Through Child Components

Recently, I've been experimenting with trying to access the HTML elements within tabs components using an example from the Angular 2 docs. You can view the example here. Here is a snippet of my implementation: import {Component, ElementRef, Inj ...

javascripthtmltypescriptangularangular2-template

What is the best way to place content in a single div without it being divided into several separate boxes

Here is my code snippet: <div class="col-md-9"> <div id="statbox"> {% for obj in product_type %} {% for obj1 in vastu %} <script type="text/javascript"&g ...

javascripthtmlcssdjango

The height of the ReactPlayer dynamically adjusts to accommodate content beyond the boundaries of the page

I have a video on my webpage that I want to take up the entire screen, but currently, users have to scroll a bit to reach the bottom, which is not ideal. This is my JavaScript: <div id="page"> <div id="video-container"> ...

javascriptcssreactjsreact-player

The button remains in a pressed state when viewed on a mobile device

This button is functioning properly in desktop view, but in mobile view the button remains pressed down. :root { --green: #4285f4; --black: rgba(9, 13, 25, 0.752); --box-shadow: .4rem .4rem 1rem #ccc, -.4rem -.4rem 1rem #fff; --box-shadow-inset: ...

htmlcss

I am trying to retrieve the class name of each iframe from within the iframe itself, as each iframe has a unique class name

My index HTML file contains multiple Iframes. I am trying to retrieve the class names of all iframes from inside an iframe. Each iframe has a different class name. If any of the iframes have a class name of 'xyz', I need to trigger a function. I ...

javascriptjqueryhtmliframe

How wide should the website layout be?

What is the perfect size for a standard portal website? I've seen many sites with widths ranging from 960px to 1000px. ...

css

Which font file format is the most suitable for my website?

I've been doing some research on fonts for my website, and I've come across various formats available. Now I'm curious about what the standard format is or if there are multiple standard formats. .TTF (True Type Font) .EOT (Embedded OpenTyp ...

cssfonts

Stopping Accordion Title from Moving Vertically in Material-UI

Just finished creating this accordion which will be used as a menu item. However, I've encountered an issue where clicking on the Main title causes the accordion summary to move downward vertically. Any suggestions on how to keep the Main tile fixed ...

cssreactjsmaterial-ui

Enhancing the Appearance of MUI Date Calendar

I'm in the process of creating a calendar similar to mui's <DateCalendar />, and I want to customize the header from 'S M T W T F S' to 'Sun Mon...' as well as adjust the position of the arrows. Before: After: Code : ...

cssreactjsmaterial-ui

The error message "Your session has expired" is displayed by the Wysiwyg

The WysiwygPro editor displays a dialog error message stating, "Your editing session has expired. This is usually caused by a long period of inactivity. Please re-load the page," when clicking on any controls such as Image, Media, Emoticon, etc. This iss ...

phphtml

Menu with dropdown navigation

Looking to create a dynamic and responsive navbar menu with items and subitems on my website. Bootstrap has proven to be challenging when adding submenus. Are there any tools, frameworks, codes or plugins that could assist me in achieving this? It's ...

angularjshtmltwitter-bootstrap

Ways to create a downward expanding navigation menu when collapsed

Trying to accomplish the following, please refer to the image below. I am looking to have the yellow bar extend down when the collapsed menu is open. Currently, the navigation links are hidden behind the logo as shown in the second image below. Is there a ...

cssbootstrap-4

Angular Material Spinner with Custom Image Icons - (mat-spinner)

I have successfully implemented the mat-spinner in my project with configurable changes like color and mode of spinning. However, I am now looking to add an image icon, specifically the logo of a brand or company, inside the spinner. How can I achieve this ...

cssangularangular-material2

Is there a way to trigger a function for both a left and middle click at the same time?

Check out this code snippet: $('a').on('click', function(){ myfunc($(this)); }); function myfunc(el){ console.log('Either left or middle click clicked on the link'); } a{ cursor: pointer; } <script src="https://aj ...

javascriptjqueryhtmlcss

Issues with Contenteditable functionality in JavaScript

My goal is to make a row editable when a button is clicked. $(":button").click(function(){ var tdvar=$(this).parent('tr').find('td'); $.each(tdvar,function(){ $(this).prop('contenteditable',true); }); }); <s ...

javascriptjqueryhtml