I have found a code pen example of a card carousel that I want to use. However, the bootstrap stylesheet is making the carousel not work properly. When I remove the style sheet the carousel works but it changes the style of that page which I need it to be consistent with my other pages.
This is the code pen example I used for the carousel card. https://codepen.io/kreigd/pen/ybYNoN
I used codes exactly that is shown in the example in the link above
<!-- I can only keep the 2 style sheet below and maintain my personal styling
but the card carousel will not work-->
<link href="bootstrap/css/bootstrap-grid.min.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- or I remove the 2 above and add this. This makes the card carousel
work but my personal styling will be changed and not consistent with my
other pages -->
<link rel='stylesheet'
href='https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/4.0.0/css/bootstrap.css'>
I would need help in allowing me to keep my original styling and at the same time get the carousel card to work.
Which ever is declared or called the latest, the style property depends on it. Some properties you have in <link href="bootstrap/css/bootstrap-grid.min.css" rel="stylesheet" /> and <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> will be the same as the on you're using for you Carousel.
There can be only one solution, either you have to provide the css properties that are meant for the carousel to work by picking them from the bootstrap or you've to delete the unnecessary properties from the carousel bootstrap which are affecting the main design of your page.
Related
See this demo
I'm using the fixedheadertable plugin available here
For some reason my sample table is not scrolling, what am I doing wrong?
Initialization is done at the bottom of the javascript code:
$("#fixed").fixedHeaderTable();
$("#fixed").fixedHeaderTable("show");
It looks like you were missing the required CSS from the demo files, I've added them to this fiddle and it seems to work for me now.
If you look at the Github page for the project, there's a demo folder, in there I had a look at test.html it included the following CSS references:
<link href="../css/defaultTheme.css" rel="stylesheet" media="screen" />
<link href="css/myTheme.css" rel="stylesheet" media="screen" />
I'm not sure specifically which styles are required for it to work as opposed to styles that are there just for cosmetic purposes as I don't have time (I just dumped all the CSS from those two files in the fiddle) but hopefully you should be able to figure that out :)
So I just discovered the bootstrap and I'm trying to implement it into my small webpage/app so that I can make my form/console box more visually appealing.
After integrating bootstrap as an external resource in jsfiddle, the prototype of my app/page still works. See:
code to make the red box go away
jsfiddle
As you can see, the jsfiddle version of my app is working properly
But when implementing bootstrap into the actual site, everything is out of wack...
Actual site
As you can see, the main image and output of text is completely gone and the structure of the form/console is also gone.
Can anyone explain what's going on here?
Am I integrating the CSS file incorrectly or am I just implementing bootstrap incorrectly, in general? Here's some the of the HTML file uploaded to the server:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
...
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="textualizer.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Or does it have something to do with the CSS selectors and maybe they get altered after integrating bootstrap and that's why it's not working in the actual site? I'm totally lost here as to why it works in the jsfiddle but not with the actual site. (usually when I'm completely lost on something of this magnitude, the answer ends up being the most simple thing that I just happen to overlook)....
As you can see in bootstrap docs, it has some markup with css classes to get what you wanted. example, <div class="container"> </div>, <button type="button" class="btn btn-default">Submit</button> etc. It will not get applied automatically to your html page by just adding the css reference. Since you used your custom css styling in jsfiddle it works fine. However, since you have not used your custom css in your website, it will render as plain html markup without any styles.
Hence, please change the markup with bootstrap layout and classes for your website and see the result. If you wish to override colors, etc, you can use a custom css file just after the bootstrap core css file as:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mycustomstyle.css">
You can make overrides to the bootstrap core styles in mycustomstyle.css file. Just read bootstrap docs thoroughly to get an idea about using it in a website/web application.
I have a website that uses the bootstrap CSS/JS. I am suffering the problem when the bootstrap font conflicts with the font I would like to use. Example:
With my Font
http://i.stack.imgur.com/PiGGn.png
But When I use the bootstrap CSS, the font conflicts with mine (Uses bootstrap Font instead of the one I have set)
Bootstrap CSS - There Font
http://i.stack.imgur.com/04gck.png
Is there anyway to Remove the bootstrap Font ( Typography ) or some how make my font be used instead?
On a side note: The bootstrap CSS/JS was added to website for less coding for me. The website it self was coded not using any class from Bootstrap.
Try making sure you're loading your custom CSS file after the bootstrap one in your page header. Eg:
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/your-stylesheet.css" />
I'm trying to build dynamic CSS stylesheet changer, as simple as possible, for Bootstrap / Bootswatch. I've seen many sources, but I found that most examples relies on additional title attribute of link tag. And thus, doesn't work in all browsers or works wrong (mainly because of this problem).
I also noticed, that using title or rel="alternate stylesheet" isn't perfect idea, as though styles listed this way are "ignored" (not rendered) upon initial page load, they are somehow parsed, making browser unbelievable slow. I've added two or three Bootswatch styles next to default Bootstrap stylesheet and I nearly killed my Chrome, though page was rendered only with default styling.
Can someone show an example of dynamic stylesheet changer or proper use-case of title and rel="alternate stylesheet" attribute, that would not consume all my computer resources?
Turned out to be as simple as declaring "default" stylesheet using title attribute:
<link href="assets/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen" title="main">
Then adding some links in form of list (can be used for building Bootstrap's dropdown):
<ul class="dropdown-menu">
<li><i class="icon-fixed-width icon-pencil"></i> bootstrap.min.css (Default)</li>
<li><i class="icon-fixed-width icon-pencil"></i> bootstrap.cyborg.min.css (Cyborg)</li>
</ul>
with rel attribute poining with full path to additional stylesheet.
And then adding a very simple jQuery function:
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($)
{
$('body').on('click', '.change-style-menu-item', function()
{
$('link[title="main"]').attr('href', $(this).attr('rel'));
});
});
/*]]>*/
</script>
Works like a charm.
If you have only one stylesheet in entire page, you can omit adding title attribute to link tag and "catch" it using simple $('link') selector instead of $('link[title="main"]'). Since I had other stylesheets included (bootstrap-responsive.min.css), referencing "changeable" stylesheet with title attribute was obligatory.
I would take a look at the twitter bootstrap project, they in my humble opinion have extremely cleanly written code and also should be every browser compliant.
http://twitter.github.io/bootstrap/
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
and you should take a look at this page.
http://twitter.github.io/bootstrap/scaffolding.html#responsive
edit: I just realized the classes I was trying to have styled are NOT included in the ThemeRollers CSS. I was trying to style .ui-li elements, but these are not included in ThemeRoller. Very misleading and aggravating. I don't recall this ever being addressed on their website.
I have made my first custom theme through JQM's ThemeRoller. The JQM structure CSS that is to be included keeps overriding my custom ThemeRoller CSS. I've tried placing it in the <head> section of the HTML code above and below the JQM structure:
<link rel="stylesheet" href="myCustomTheme.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
or
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<link rel="stylesheet" href="myCustomTheme.css" />
I've also tried the !important thing in the custom CSS for the elements that have the incorrect style, but this still is overridden by the structure CSS. Not sure why this is so. How can I use my custom ThemeRoller css so that it overrides the unthemed JQM Structure CSS?
Seeing the clarification in your question.Have you tried giving data-role="none" with the elements you want to give the customized css?
It will prevent those element from getting applied the jquery mobile structure css.
And also you are always allowed to edit the jquery mobile css to your customized styling. We need to use unminified version of jquery mobile css for debugging purpose.