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.
Related
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/
I tried to add some buttons under posts on my tumblr page but they are displaying incorrectly. Like button has right position but reblog appears at the beginning of the post (and on the next posts reblog appears even outside post block). Also after first post text in the other posts moves to the left side. I don't know how to solve this problem.
Blog with problem: http://rkhmlvch.tumblr.com
Original code:
https://github.com/xSOADx/The-Default-Network/blob/master/Theme%20code
Fragment with needed code:
<div id="buttons">{likebutton}</div>
<div id="buttons">{reblogbutton}</div>
Images
First, if you're planning to use styles in a specific element, use ID. If you're planning to use styles repeatedly in multiple elements use Class. I will recommend that you change the ID's to class instead.
Example: <div id="post">...</div> to <div class="post">...</div> same goes to <div id="buttons">...</div>.
Anyway, back to your question.
Your first <div id="post">...</div> is inside <div id="wrapper"> then the rest are outside it. Put the rest of your post inside <div id="wrapper"> and all of them will be the same.
Next, for your buttons. Change it to this <div class="buttons">...</div> instead of <div id="buttons">...</div> then add styles to your CSS:
.buttons { display: inline-block; margin: 5px; }
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>
I pasted this code into my header.php file to get an opt-in button:
<div class="createsend-button" style="height:27px;display:inline-block;"data-listid="r/72/191/0E3/389738A3FFEDFFA8">
</div>
<script type="text/javascript">....</script>
I can't seem to control the placement - if I add .createsend-button to css there's no effect. When I look at this in Firebug it says this div class is actually .subscribe-button-inner but customizing that class in css has no effect either.
What am I missing here?
My site is at : http://tinyurl.com/c5eujcj
The iframe for the createsend button has inline CSS including position: absolute. If createsend offers an option to change the button, that would be your best option. If not, use this:
<div class="applyStylesToThis">
<div class="createsend-button" style="height:27px;display:inline-block;" data-listid="r/72/191/0E3/389738A3FFEDFFA8"></div>
</div>
I have a jqGrid which works fine when displayed on a page on its own.
If I try to display the same grid inside jQueryUI tab, it still works fine – except that font size is wrong. What is happening is this:
When everything is working on a standalone page, the font size is picked up as follows:
Inherited from div#gbox_datatable.ui-jqgrid.ui-widget.ui-widget-content.ui-corner-all, in file ui.jqgrid.css line 2
.ui-jqgrid{
font-size:11px;
}
When the grid is placed inside a jQueryUI tab, howerver, it is overridden by a higher priority CSS command as follows:
Inherited from div#gbox_datatable.ui-jqgrid.ui-widget.ui-widget-content.ui-corner-all, in file jquery-ui-1.8.9.custom.css line 60
.ui-widget .ui-widget{
font-size:1em;
}
In other words, the fact that I have a ui-widget inside another ui-widget is overriding the desired font specifier.
How can I avoid this overriding?
I found same question at here without any answers.
Any help will be appreciated...
ui.jqgrid.css has the following definition
.ui-jqgrid {position: relative; font-size:11px;}
So if you add class "ui-jqgrid" to the div which holds the tabs the problem will be solved:
<div id="tabs" class="ui-jqgrid">
<ul>
<li>Results</li>
<li>Software</li>
</ul>
<div id="results" class="tabcontain"></div>
<div id="log" class="tabcontain">
<table id="grid"><tr><td></td></tr></table>
<div id="pager"></div>
</div>
</div>
In the example above div with two tabs will be used: one with some general information and another with the the id="grid".
One more simple way will be just set
html, body { font-size: 75%; }
which set will reduce default font size of the page (1em) to the same which jqGrid uses (11px).
See one more way in the resent question.