Because Bootstrap 4 uses SASS for components like cards, I'm having trouble overriding it in CSS since I haven't used SASS before.
I see ways to override configuration files in a server node.js environment, but for a basic index.html file linked to Bootstrap and a custom CSS file, how do you go about setting margin bottom to 0?
HTML here:
<div class="card mb-3" id="sheet-footer">
<div class="card-header text-center">`=
<h3 class="card-title">
Content
</h3>
</div>
</div>
Chrome dev tools show the following:
.mb-3, .my-3 {
margin-bottom: 1rem!important;
}
Any attempts to override margin-bottom (even with the terrible HTML style tag) don't beat this rule - what's the proper way to override this?
Thanks in advance.
If you don't want a margin bottom remove the class mb-3
If you only want a margin bottom on specific breakpoints bootstrap 4 allows mb-md-3
see https://getbootstrap.com/docs/4.0/utilities/spacing/
Related
I'm trying to create a fixed Navbar using Project Clarity
I'm using it in my Angular project, they are using FlexBox, I have tried putting in position: fixed but it doesn't seem to work, anyone have any ideas ?
<clr-header class="header-6">
In order to fix the header so that content scrolls underneath it, your application needs to have the correct Application Layout. Our components work within this structure because A properly structured layout enforces an optimal, consistent experience across applications.
The general structure for A Clarity Application layout takes this form:
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
...
</header>
<nav class="subnav">
...
</nav>
<div class="content-container">
<div class="content-area">
...
</div>
<nav class="sidenav">
...
</nav>
</div>
</div>
Obviously, you can get rid of the parts that may not be relevant to your app like: alert-app-level, subnav etc ...
You can see this working in a quick demo I made with inspiration from Bob Ross. As you can see the content scroll underneath the application header.
if someone has also either very this problem, or another problem where some css does not work within Angular:
Since we mostly structure our UI code in multiple components in Angular, and since each component puts its own host-tag in the generated DOM between the actual html tags, the clarity library has some problems with it.
So as a workaround, if you still want to be able to keep your current htmls as they are, you can define this css in each your component's css file:
:host { display: contents; }
This causes the component's box not to render; means the host tags are still visible in DOM, but they will not have any effect regarding CSS. And any clarity CSS will work again.
I have made 2 Divisions out of bootstrap property <div class="col-md-12" > on the same page. In the first one, I have added a different Background and some hover property, now in the second one I have to make a "Sign Up" Div but with other properties with the same <div class="col-md-12" > ie. Full page width row. But the changes are happening on both the Divisions.
Can somebody Help ?
I am using Visual Studio 13 for aspx webpage.
Sorry if it is a silly question.
Thanks In Advance.
You can append another class to the ones you want to style:
<div class="col-md-12 styleme">
Content
</div>
CSS:
.styleme {
background-color: #000;
}
This way, you can style the div using your own custom class as opposed to overriding BootStrap's native one.
NOTE: ensure to place the custom style in your own custom CSS file and ensure it is referenced in your site AFTER the BootStrap CSS file.
I'm using multiple window on the same page and i want to apply
different styles on which window. I try to write a wrapper over the
window so it can be identified in the css by id but that does not work.
This is the source:
<div class="wrapper">
<div kendo-window="InitialisingApp">
</div>
</div>
This is the result:
<div class="wrapper"></div>
<div class="k-widget k-window....">
..........................
</div>
Any ideas about this problem?
Thank you! Have a nice day!
You can take a look at this:
Limit scope of external css to only a specific element?
Only other option that I see is to copy the theme and add a css selector in front of everything so that the theme only apply when wrapped with a specific class. Also keep in mind the CSS priorities to make sure the blue style gets applied over the default style.
Example:
<style>
.blueStyleWrapper .k-window {
/* Some kendo styles */
}
</style>
<div class="blueStyleWrapper">
<div class="k-window">
This window will be using the blue theme!
</div>
</div>
Currently I have this gallery:
[http://jsfiddle.net/52VtD/8912/][1]
What I want is this:
[http://prntscr.com/53wz9q][2]
If you are using bootstrap 3, I have some experience to share.
Firstly it's better for u to customize /control
css styles if you download them locally instead of using cdn(script loaded from other server);
2.Your question seems to override the default bootstrap 3 grid padding, margin;
Here is one live bootstrap 3 site for reference.
url: http://glow-raspberry.com/
by viewing the source code you can use below code block to remove default margin and padding after css override;
supposing u have created styles such as
<style>
.margin-0 { margin:0px;}
.padding-0 { padding:0px;}
</style>
and applies to bootstrap html grid;
<div class="row margin-0">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0">
</div>
</div>
"col-lg-12 col-md-12 col-sm-12 col-xs-12" the value in this line should be set according to your responsive needs, according to your demo case url: http://prntscr.com/53wz9q,
They should all be set to value 4 as 3 grid in a row (3*4=12) in all resolutions;
So in this way u balanced using responsive framework and apply your custom padding margin to remove spaces;
screenshot:
I solved it based on
http://www.bootply.com/122476
The result:
http://jsfiddle.net/L45dvek9/1/embedded/result/
I am a new developer with roots toolkit. How to edit default roots class css wordpress? My question is about the classes like wrap,content,main etc. I also found some default classes for header,footer,aside etc. In which less file I can found this css for editing. Are these classes also the part of bootstrap styles and variables in roots kit?
You edit those in the base.php file. Line 15-17:
<div class="wrap container" role="document">
<div class="content row">
<main class="main" role="main">
These are not Bootstrap styles, but more of classes that you can utilize if you want, or delete altogether. By having a wrap there, you can target everything in the initial container, rather than any other container in the site. Same goes for content, or main.