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" />
Related
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.
I have been developing basic website for a final year project, i added module popup but as soon as i started to add Bootstrap min.css files for my navigation bar jQuery is not working even though i have but it first the jQuery links before any other bootstrap links. if i removed the bootstrap.min.css link is working fine but i need for my navigation bar.
below is how i linked. am using version 3.3.7
<script src="Scripts22/jquery-1.8.2.js"></script>
<script src="Scripts22/bootstrap.js"></script>
<link href="css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
Below i have attached how it is function when all the links are there.
I am beginner to bootstrap and building a website using HTML5 and bootstrap.
It was working fine. After 2 days, some page contents are not displaying. That particular section and container is not displaying.
What may be the issue and solutions?
enter image description here
I think you are using some online css file. In this case if you are offline, your browser can't loud the css files.
for example: if you are using css like this,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
please download bootstrap file and put in your project folder and use like this to can use this in offline mode too;
<link rel="stylesheet" href="../css/bootstrap.min.css">
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.
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.