twitter bootstrap won't change my style - css
I have this website (java generate html)
I want to add twitter bootstrap for nicer design,
to look like this:
here is my try:
<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><h1>Delta Fresh Samples:</h1><p>save date: 12:28:21 31-May-02015</p><div class="jumbotron" id="distance_small"><h3>distance small</h3>0_1<br><img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)" height="100" width="200"><br><span> </span>editor:<span><a title="0_0" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969444,22950508,22946295,63734947,63734946,22945044,76103782,61849159,22943314,22945842,22949040,76952893,22958740,22955108,22963930,22963937,61487751,78453835,78453836,78190323,78190322,22966401,22963938,22955881,22952772,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704023,22959771,78100291,78100305,78100306,75676668,22959690,22947454,22940596,22961456,22958490,22948978,22961457,22963582,65496487,22946251,22964699,74195770,75079286,22964701,22965880,62248964,78100492,78100491,22962630,22951570,22948096,22954294,66161229,66147839,22960015,22949762,22945545,22946824,22951606,22951605,22948122,22946840,22960419,22965961,22960420,22962680,22962685,22962684,22962683,22947641,22961812,22964726,22965877,22965967,22965964,22951601,22946847,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 0</a></span><br><span><a title="0_1" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969776,83970667,83970668,83970679,83970678,83969787,83969884,83969791,83969889,83969965,62003149,22966553,22966554,22946589,22954701,22948771,22960706,22952457,22952456,69823920,67646833,22956976,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704067,61704043,22957408,61704040,72391451,72391452,61724192,61975137,61975144,57602828,61541078,22965716,22949679,22964912,22943804,22965887,22943805,81603700,81603658,22960396,22960397,22965904,22959154,22965764,22964822,22946555,22954865,22962698,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 1</a></span><br><span><a title="0_2" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,22551059,22540619,22540617,22521289,22531355,22531357,22523497,77460394,77460392,61690687,67007203,67007202,22959509,22952362,22947304,22946552,73617242,77749675,73617397,22961888,22941066,62110860,83482398,83482876,83482875,22946605,74542235,83482565,83482564,61713972,74882174,74882173,69051742,61975892,65179805,65179806,61713939,77541139,77541140,61975883,22952799,61539504,57601394,22959961,22947692,22959735,22958946,22958947,22958607,22951490,22961077,22964301,22954627,22946241,22963491,76369581,22950499,22966864,22965699,22949657,22962492,22962497,22962496,22946416,22948460,22951483,22948007,22946064,22951140,61459698,22957970,22965738,22954249,22954934,22960321,78858435,22958543,69824727,69824726,22945987,22945859,67102730,77869444,77869443,22966245">alt 2</a></span><br><br></div><div class="jumbotron" id="distance_large"><h3>distance large</h3>0_0<br><a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)">
However, as you can see I cannot make class="jumbotron" apply as seen in this example. (gray bg color. center of the page)
What am i missing?
In Addition, if i would want to style this without twitter bootstrap
how would you advise me to do this?
You need to include the bootstrap stylesheet inside your <head> tag.
you can use the bootstrap CDN :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
More info and options : http://getbootstrap.com/getting-started/
Related
Overriding Mudblazor expansion panel's padding
I'm new at Mudblazor and trying to override the default padding of the expansion panel header. Here is what the html looks like: html mudblazor Mudblazor creates a div with a .mud-expand-panel-header in the background and that's the element I want to change the bottom padding on. I tried inline css and change the styling from the css file without success. I also tried to use pb-1 on the TitleContent tag but that element doesn't take classes. Any ideas on how to change that?
Solution 1: How to apply custom CSS (directly)
If you wish to override the mud-expand-panel-header style directly, create a new CSS file, include it in the index.html file and make sure it's loaded after MudBlazor.min.css to ensure it takes a priority.
Once that's done, add the following code inside the new file:
.mud-expand-panel-header {
padding: 4px;
}
Solution 2: How to apply custom CSS (indirectly)
Instead of modifying mud-expand-panel-header class directly, apply the CSS you need to any mud-expand-panel-header that's inside an element with a custom CSS class of your own.
Example
https://try.mudblazor.com/snippet/wumGaiveVFPlBBEe
<style>
.custom-expansion-panel .mud-expand-panel-header {
padding-bottom: 4px;
}
</style>
<MudExpansionPanel Class="custom-expansion-panel">
<TitleContent>
<div class="d-flex">
<MudIcon Icon="#Icons.Filled.CheckCircleOutline" Color="Color.Tertiary" class="mr-3"></MudIcon>
<MudText>Title</MudText>
</div>
<MudText Typo="Typo.subtitle1"><b>Price</b></MudText>
</TitleContent>
<ChildContent>
<MudText>Age</MudText>
<MudText Typo="Typo.body2">Notes</MudText>
</ChildContent>
</MudExpansionPanel>
Solution 3: How to get Bootstrap working
If you wish for the pb-1 bootstrap class to work, go to the index.html file and make sure that bootstrap.min.css is loaded a̲f̲t̲e̲r̲ MudBlazor.min.css.
That's what you may currently have:
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
That's what you should have for the Bootstrap class to work:
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
Can I use external css in eBay.co.uk custom description for a listing?
I'm making custom description in one listing on ebay.co.uk with just html/inline css. I tried to use external css link, but it's not working. Any help will be appreciated. Inline css is working. External and Internal not working. <link rel="stylesheet" href="https://github.com/....../css/style.css"> <p>some paragraph</p> Please note ebay cut head and body tags, so I skipped them in the example.
You can't use a stylesheet or <style> tags, but you can use inline styles on divs. <div style=""></div>
How to do a 'gray box' or inline panel?
I'm working on a site using Twitter Bootstrap, and want to put some content in a gray box or panel. I mean much like the 'Basic block' example from bootstrap's own docs. Small screenshot cutout to display what I mean: Except it's supposed to contain normal HTML content, no code or <pre> stuff or anything.
You can use a well for this. See docs. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="well well-sm">Well well well</div>
How to remove/disable styling on some bootstrap elements
I want to know if it is possible to disable styling on a specific html element. In my case it is a input text. I cannot resize it. I went through the bootstrap css and found it has padding. I tried to use padding: none and 0 0 0 0 plus !important and it did not work. Is possible to disable the styling for that specific item?
As of Bootstrap 3, you'd use the list-unstyled class to achieve this. Example: <ul class="list-unstyled"> <li>...</li> </ul> Hope this solves your problem.
Yes it is possible. You can achieve it in following way:
Load your own stylesheet definition after the bootstrap.css. For your case define input[type=text]{padding:0px;} must call after the bootstrap's css file(s).
If you want to use in-line css you can try: <input type="text" style="padding:0px" />
Hope it helps.
in the 'head' of your HTML change the order of the local css file and bootstrap css, the local css should be the after the bootstrap css: <head> <!-- bootstrap css is the first here --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- bootstrap css is the last --> <link rel="stylesheet" href="style.css"> </head> now if you applied !important in your css it should work. another solution is to apply your css inline <element style="padding:0"></element>
Set it in the style of the element in the style attribrute if an item is there it has priority. Also if you want to be double sure add !important as well
Would Javascript be of any help to you? If so the .setAttribute native javascript function can help: http://jsfiddle.net/nMJjS/1/ Just replace the id that I made up with the id of input element you want to change
Apply styles to only to one element
I am including styles in normal way like this: <link rel="stylesheet" href="/css/boostrap.css" type="text/css" /> this styles has a lot of styles which destroy my main view, it applies to body element, is it possible to applay the style only to one particular div?
Put that <div> into a separate page and include bootstrap CSS only in that page. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/css/boostrap.css" type="text/css" /> </head> <body> <div>This is your DIV</div> </body> </html> Your main page won't be touched by that and you'll be able to display that div inside your main page simply using an iframe, change (for example) this: <div>This is your DIV</div> To this: <iframe src="url of the other page"></iframe> Of course you may need to change little bit the logic of your page to accommodate this (primary I guess because of server side C# code, for client side JavaScript code it should be easier because the come from the same domain).
Yes, you can do that by ID:
<div id="myDiv"></div>
and then the CSS would be:
#myDiv { ... }
and that will apply that style to anything named myDiv. You could also use classes:
<div class="someClass"></div>
and then the CSS would be:
.someClass { ... }
and that will apply that style to anything with that class attached.
Based on what you're describing, surrounding the generality of the CSS that's breaking the already defined CSS, you're going to want to get rid of those general element styles and use ID's because it sounds like you're trying to merge some CSS.
You try to remove all styles of body with javascript code, and after that, after you add a name/id to the body style in your correct css, set this as class attribute of your body. (js code too after the document is completely loaded) Another (stupid) solution depends on what do you have in the css file. Do you can edit the /css/boostrap.css, simply replace all body word with ".body1" (fe => make a class from it)?