simply i want to separate some part of MyCSS.css and Bootstrap4.css
because Bootstrap is breaking My CSS but i wanna use some part of Bootstrap4.
I know how to get part Bootstrap4 CSS code but searching one by one is so tire.
<link rel="stylesheet" href="Bootstrap4.css">
<link rel="stylesheet" href="MyCSS.css">
<body>
<!-- where i want to use only MyCSS.css -->
<div>
...
</div>
<!-- where i want to use only Bootstrap4.css -->
<div>
...
</div>
</body>
You can customize and download only the required bootstrap components from https://getbootstrap.com/docs/3.4/customize/
Download Bootstrap Sass and remove unwanted styles and compile only what u want
Related
So basically it looks like my carousel does not have any styling whatsoever. I copied the exact code from ng-bootstrap carousel example but mine looks like this when running.
This is ngbootstraps
result.
Steps I did before:
I installed #ng-bootstrap/ng-bootstrap, then I added bootsrap to my css and after that I imported ngModule and added it to my modules.
Any ideas why this does not work?
So, in my opinion, you added bootstrap incorrectly. When you are implementing bootstrap 5 to your html besides adding this in :
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
You also have to add this right before body closing tag:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
This script basically makes interactive elements possible without using js. Here is a link to doccumentation if you want to learn more:
https://getbootstrap.com/docs/5.2/getting-started/introduction/
Lemme know if this helped
All of the answers I've seen on here with respect to overriding Bootstrap (v4) with SCSS assume Bootstrap (or Bootstrap's CSS file?) is downloaded to a site directory.
I'm importing bootstrap via the CDN link into my layout.html page and have links to all other CSS files after it. The one linked to SCSS is listed dead last. I'd link to override Bootstrap with SCSS this way.
As a quick example, I couldn't change the font used as the title for every page. The section in layout.html is like so:
<head>
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- Fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="stylesheet">
<!-- Additional CSS use of static dir structure require w/ jinja-->
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
<div class="container siteTitle h-100">
<div class="row h-100 mx-auto">
<div class="col-md-12" >
<h1 id="siteName">Foo</h1>
<h3 id="siteSubTitle">Bar</h3>
<h6 id="siteTagLine">Baz</h6>
</div>
</div>
</div> <!-- end header container -->
</body>
And the SCSS looks like this at the moment:
$siteFont: 'IM Fell English SC', serif;
#siteName, #siteSubTitle, #siteTagLine {
$font-family-serif: $siteFont !default;
}
Other variations (e.g., ditching the $siteFont variable and placing the font name directly in the CSS rule) have been tried. How do I pull this off?
So the short answer to this is - you can't.
That is, you can't change any SASS variables and still use Bootstrap from the CDN. This is because that version of Bootstrap has already been compiled, so the variables (such as $font-family-base or $enable-responsive-font-sizes) have already been substituted in.
As in the discussion above, if you want to change any SASS variables, you need to compile your own version of Bootstrap.
For simple changes this does of course feel like overkill. So it's not wrong to continue using the CDN version and just override things at the CSS level instead. For more extensive changes, SASS is of course the way to go.
I am trying to use bulma icons following the docs here, but the icon doesn't show up:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div>
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>ICON</span>
</div>
Also see the fiddle here, what could be the problem?
You also need to include the bulma.min.css file, not just the .map.
Edit
Per the Bulma docs:
If you want to use icons with Bulma, don't forget to include Font Awesome:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Update 3/19/2019
As #Akshay has pointed out below, the documentation has changed and the proper way to include Font Awesome is now
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
Bulma icons won't show up unless you call fontawesome libraries, we can use a kit code for that. This will look like <script src="https://kit.fontawesome.com/xxxxxxxx.js"></script> in the <head>...</head> section of your code.
note: you can get the code "xxxxxxxx" for free usage of fontawesome icons from the website.
https://fontawesome.com/start
I am trying to get the foundation framework to link to my HTML page but when I try to use the grid system it does not do anything. I have been looked at a few different tutorials to make sure that I am linking things correctly but I still can not figure out why it wont work. Here is an image of my editor and display side by side. My index.html, css folder, and js folder are all contained within the same directory. Editor and Display
Also attaching my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta name="viewport" content="device=device-width, initial-scale=1.0"/>
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.min.css"/>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div class="row">
<div class="large-4 columns" style="background-color: lightblue"><p>Why u wont work.</p></div>
<div class="large-8 collumn" style="background-color: lightsalmon">Not displaying a grid system.</div>
</div>
<!-- include before </body> tag -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
First of all, you have a typo, it says collumn, should be column (or columns).
Second, please make sure you're using the proper grid, Foundation 6.4 has 3 grids available: XY (default), Float and Flex.
The code in your sample belongs to the "traditional" Float Grid, while the default grid in this new version (since June 27th) is XY Grid. So you have two options:
Change your markup according to the new XY grid (take a look to http://foundation.zurb.com/sites/docs/xy-grid.html )
Change the framework to use the Float Grid, now this depends on how you downloaded the framework in first place; if you used the precompiled package, you should go to http://foundation.zurb.com/sites/download.html/#customizeFoundation to customize (basically just selecting the Float Grid and download a new package); if you used the SASS version, go to app.scss remove comment to the line where shows #include foundation-grid;, and comment the one with #include foundation-xy-grid-classes;, then rebuild framework.
Hope this helps.
You have a typo on in your second column. 'large-8 collumn' should read 'large-8 columns' (one less 'l' and one 's').
Instead of
<div class="large-8 collumn" style="background-color: lightsalmon">Not displaying a grid system.</div>
Have:
<div class="large-8 columns" style="background-color: lightsalmon">Not displaying a grid system.</div>
For reference, here is a working pen.
I want to use twitter bootstrap for some site I am working on. This site requires a pre-set template to be used for certain parts of the page.
If I include the twitter bootstrap stylesheet it messes up the original template.
I want to include the external bootstrap.cc stylesheet but make it work only on tags which are a descendent of class="mycontent"
<html>
<link href="original stylsheet.css">
<link href="bootstrap.css">
...
...
<div class="header">
original stlesheet to be used here
</div>
<div class="mycontent">
bootstrap css to work for all descendents of my content
</div>
I know one way is to edit the css and add .mycontent before each and every tag. But I was wondering if there was a smarter solution
Scoped CSS
If scope attribute is present, then <style> applies only to its parent element.
<div>
<style scoped>
/* your css here */
<style>
<!-- content -->
</div>
It lacks of browser support, but there is a polyfill: jQuery Scoped CSS plugin.
Additional reading: Saving the Day with Scoped CSS.
Current browser support: http://caniuse.com/#feat=style-scoped
As you i can see your code :
<html>
<link rel="original stylsheet.css">
<link rel="bootstrap.css">
...
...
<div class="header">
original stlesheet to be used here
</div>
<div class="mycontent">
bootstrap css to work for all descendents of my content
</div>
you are using the wrong path.
you should try <link href="bootstrap.css">
I hope your problem will be solve with this