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

What are the steps to turn off the rule .MuiInputBase-inputType-121 in Material UI TextField for email input field because of a display problem?

Here is a snippet of JSX code: import TextField from '@material-ui/core/TextField/TextField'; <Col xs={6}> <TextField pattern=".{3,}" name="fullName" ...

javascripthtmlcssmaterial-uimui

Issue with IE7 causing rollover navigation blocks to disappear when hovering over content

While conducting browser testing on the website The website's top navigation menu includes rollover effects for building services, exterior services, and commercial categories. The CSS-triggered navigation works seamlessly in all browsers except for ...

htmlcssinternet-explorer-7navigation

Using AngularJS in conjunction with Ruby on Rails is causing compatibility issues

Trying to implement Angular with Ruby on Rails is presenting some challenges. While simple expressions like 1+1 work fine, binding a number or string to a scope seems to be causing issues. I am looking for suggestions on how to resolve this problem. app. ...

javascriptruby-on-railsangularjsruby

Resource loading unsuccessful: server returned a 405 status code, indicating method not permitted

An error occurs when attempting to send an email using PHP. Failed to load resource: the server returned a 405 (Method Not Allowed) status for sendmail.php This is the form: <form action="sendmail.php" method="post" id="contactform" > <div ...

phpjqueryhtml

It's impossible for me to align two blocks at the same level

Check out the following code snippet. I am trying to group mid_left and mid_right within a single mid div tag, but struggling with positioning mid_right correctly - either outside of the mid tag or not at the same level as mid_left. I have experimented wit ...

htmlcss

Exploring the techniques for displaying and concealing div elements with pure JavaScript

Here's an example of code I wrote to show and hide div elements using pure JavaScript. I noticed that it takes three clicks to initially hide the div elements. After that, it works smoothly. I was attempting to figure out how to display the elements ...

javascripthtmlcss

What is the method for displaying text and icons as black in a sticky header design?

Having trouble making the menu text and icons in the sticky header black on my website. I've been searching for the correct class in the CSS styles, but haven't been able to find it. I tried using this CSS: .header-wrapper .stuck { color: #000 ...

csscolorsheader

What is the best way to execute a function based on the width of the screen?

Two functions need to be called based on the screen width. Here is one attempt: var winWidth = $(window).width(); var sections = function() { $('.image').each(function(){ var $this = $(this), x = $this.find('img'). ...

javascriptjquerycssmedia-queries

Include a JSON attribute containing the URL of a specific object found within the response data

I am currently working on an API project (without the use of any gems) and I am hoping to enhance the responses it provides. Specifically, When the API consumer requests a list of objects: the API will reply with a list of objects displaying only sele ...

ruby-on-railsjsonapiroutesdry

The sidebar on the right side of the screen is content to relax beneath my

The positioning of my sidebar is currently below the content on the left side of the page, but I want it to sit beside the content on the right side. I've tried various solutions from similar questions without success. Here is an example of how I woul ...

csshtmlcss-floatsidebar

Python allows for the retrieval of the aria-label attribute as text based on the div id with the help of libraries like Beautiful Soup

<div id="i19" class="quantumWizTogglePapercheckboxEl appsMaterialWizTogglePapercheckboxCheckbox docssharedWizToggleLabeledControl freebirdThemedCheckbox freebirdThemedCheckboxDarkerDisabled freebirdMaterialWidgetsToggleLabeledCheckbox isC ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

When a form contains a ViewChild element, changes to the ViewChild element do not automatically mark the

Let's set the stage: MainComponent.html <form #someForm > <input type="text" name="title" [(ngModel)]="mainVar" /> <child-component /> <input type="submit" [disabled]="someForm.form.pristine" /> </form> ChildComp ...

javascripthtmlformsangularangular2-forms

What steps can I take to create a textbox that expands as more text is

Looking to create a unique textbook design that starts out with specific width and height dimensions, but expands downward as users type beyond the initial space. Wondering if CSS can help achieve this functionality? In a standard textbox, only a scroll ba ...

javascripthtmlcss

Incorporating smooth sliding animation to ng-repeat elements

Our team has developed a custom widget in ServiceNow that displays a row of icons and reveals or hides additional details in a div when icons are clicked. Below is the structure of our html and client controller: <div class="icons"> <ul class=" ...

cssangularjscss-transitionsservicenow

fragment of the visual display

Are you aware that by utilizing the canvas tag in HTML5, it is possible to load a small portion of a large image with minimal load times? This can be advantageous when creating a game with just a few tiles but of considerable size, as it reduces the numb ...

htmlcanvashtml5-canvas

Maintain an equal distance between 2 out of 3 elements while resizing the window to ensure responsiveness

There are two image divs stacked on top of each other, positioned beside a fluid header logo (.svg) also contained in a div. The HTML: <header class="site-header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader"><div cla ...

javascriptjqueryhtmlcssresponsive-design

What is the best way to maximize the size of an image without causing the parent div to expand in height?

I have utilized the code below directly from the example provided at https://getbootstrap.com/docs/5.2/utilities/flex/#media-object. This code is meant to generate a box containing an image on the left and text on the right: <div class="mycard bord ...

csstwitter-bootstrapbootstrap-5

Guide to extend the width of h1 container to fill the entire parent div

Here is a snippet of code showcasing parent and child elements along with their current styling main #main-content-wrapper div { padding: 0; margin: 0; } img { border-radius: 8px; } .overlay1 { position: absolute; top: 0; right: .1px; bo ...

htmlcssbootstrap-5

Tailored alignment of checkboxes and labels

I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...

csscheckbox

Creating an HTML form that submits data to a PHP script, which then saves the

Looking for some assistance with a PHP issue I am having. I know my way around PHP, but I wouldn't say I'm an expert. Here's the problem: I have created an HTML form (form.html) and now I want the output from formular.php to be saved as a u ...

phphtmlformsfilesave