I wanna change the style of some elements which are affected by the bootstrap classes of the parents element.
-I put the link of the stylesheet below the one of bootstrap
-I even moved the .css file outside the html's folder as adiviced in a similar topic but it still doesn't work
(IF I PUT THE CODE IN THE INTERNAL STYLESHEET IT WORKS INSTEAD)
For now I'm just trying to remove the style from the list
BE AWARE: running this code from the snippet is gonna show you no issues, however on the browser it doesn't actually work
Here's the code
ul {
list-style-type: none;
}
<!doctype html>
<html lang="en-us">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../style.css">
<!--
<style>
ul{
list-style-type:none;
}
</style>
-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul>
<li>
<a class="active" href="/home.html">Home</a></li>
<li>
Blog
</li>
<li>
Digital Nomad
</li>
<li>
About
</li>
</ul>
</div>
</nav>
</div>
<div class="col-sm-4">
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
You need to look at CSS Specificity rules. Just because you define a rule doesn't automatically mean it overrides a rule declared earlier.
Specificity is calculated on 4 factors abcd:
a (1 if inline, 0 if in a file),
b number of IDs in CSS rule
c number of attribute selectors, classes and pseudo-classes,
d number of element names and pseudo-elements.
The rule with the largest 4 digit number abcd wins and overrides lesser declarations, so inline declarations will override anything declared in an included CSS file.
Other CSS Specificity articles
CSS Tricks
Specificity calculator
Possible Solutions
It's generally not a good idea to change 'base' styles or to override Bootstrap styles directly.
You can override other declarations by adding !important to your rules, but this is generally regarded as a poor solution.
Add your own class and/or id to elements which you wish to customise.
If you wish to have a quick effect, then you can add your own specific id or class to the body element and then declare your rules relying on descendents of that id or class. Using an id in this way will give your rules a specificity of 01xx in a file, which will probably be enough to override Bootstrap rules.
e.g
CSS in file:
#mypage ul {
list-style-type:none;
}
HTML:
<body id="mypage">
...
<ul>
</ul>
</ul>
Can you verify that your external style sheet is actually being loaded? If it works when written in the internal style tag, but not in an external file, it sounds like that file isn't loading properly. That could be an issue with the file name, the path to the file, or even an invalid structure of the file itself.
Include your own stylesheet above the bootstrap link
<link rel"stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
I had this problem a lot of times, this works for me every time since the CSS stylesheet above is preferred over the one below
Further to my last answer, this works fine in Chrome:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/myrule.css">
<meta charset="UTF-8">
<title>Tests</title>
</head>
<body id="mypage">
<div class="container-fluid">
<!-- rest of your html here -->
myfile.css just contains:
#mypage ul {
list-style-type:none;
}
Related
So I am using Bootstrap to create my collapsable elements. I am also using a range selector cdn, and I'm thinking there might be some styles from the BS CSS, specifically to the collapse elements, that are causing the error in UI.
When I place the range selector outside of the collapse element, it looks and works perfectly.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!--Slider documentation: https://maxshuty.github.io/accessible-web-components/-->
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div id="container">
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
</div>
<div id="power-range" class="collapse" data-bs-parent="#container">
</div>
<range-selector min-range="0" max-range="15" inputs-for-labels />
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
</body>
</html>
But when I try to put it inside the collapse element, it throws the slider off the page.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!--Slider documentation: https://maxshuty.github.io/accessible-web-components/-->
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div id="container">
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
</div>
<div id="power-range" class="collapse" data-bs-parent="#container">
<range-selector min-range="0" max-range="15" inputs-for-labels />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
</body>
</html>
I can't seem to pinpoint where its occuring.
Will work with 2 minor modifications
The range slider initializes itself when the page loads and calculates it's size.
When you enclose the slider in a hidden element, like a Bootstrap collapse, it can't calculate the size correctly. And that's why it looks messed up.
There are a couple of ways we could fix this problem. For example, we could call the slider's reset method to force it to resize correctly. Yet, the simplest solution is to show the collapse on page load, allow the slider to initialize, and then close the collapse. And all this happens without the user noticing anything.
In the markup we add the show invisible class:
<div id="power-range" class="collapse show invisible" data-bs-parent="#container">
And then in a script tag at the end of the page (or a DOMContentLoaded event handler) we remove show invisible class.
<script>
document.querySelector(".show.invisible").classList.remove("show", "invisible");
</script>
The selected answer
The selected answer "fixes" the problem by breaking the Bootstrap collapse control. It doesn't work like OP's original code and has some visible UI problems after the page loads.
Try it
Run the code snippet to understand how it works.
// hide the collapse after range control has initialized
document.addEventListener("DOMContentLoaded", function() {
document.querySelector(".show.invisible").classList.remove("show", "invisible");
});
<div id="container" class="mb-2 p-2 border">
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
</div>
<div id="power-range" class="collapse show invisible" data-bs-parent="#container">
<range-selector min-range="0" max-range="15" inputs-for-labels />
</div>
</div>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
I fixed the code by defining a custom class, You are using Bootstrap 5.1.0 where 5.1.3 is the latest so I have used it although it works perfectly on both.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapse" role="button" aria-expanded="false" aria-controls="collapse">
Link with href
</a>
</p>
<div id="collapse">
<div class="card card-body">
<range-selector min-range="0" max-range="1000" />
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-->
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
</body>
</html>
So I'm trying to get full calendar installed on my website, and after a few issues, I managed to get to a point where I have no errors but the calendar itself isn't displaying correctly (like it doesn't have css).
I checked, and as far as I can tell, all of the files that need to be referenced are.
Any help would be greatly appreciated!
<!DOCTYPE html><head> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS -->
<link href="src/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- FullCalender files references -->
<script src="src/jquery.js"></script>
<script src='src/moment.min.js'></script>
<script src='src/fullcalendar.min.js'></script>
<script src="src/gcal.js"></script>
<!-- Custom styles for this template -->
<link href="components/style.css" rel="stylesheet">
<link src="src/fullcalendar.min.css" rel="stylesheet">
<link src="src/fullcalendar.print.css" rel="stylesheet">ipt>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'KEY',
events: {
googleCalendarId: 'ID#group.calendar.google.com'
}
});
});
</script><title>Western PA ARML</title></head> <nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Western PA ARML</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!--<li>Home</li> -->
<li>Calendar</li>
<li>Join the Team</li>
<li>People</li>
<li>Archive</li>
<li>Links</li>
<li>About</li>
<!--<li>Photos</li>-->
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<body>
<div id="content"><div class="section">
<h1>Calendar</h1>
<div id='calendar'></div>
</div> </div> <!--Content-->
<div class="footer">
Ⓒ 2017 Western Pennsylvania ARML Team
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>-->
</body>
</html>
This is how it looks -
A few things which are issues with your code (starting from the original edit up to the current version):
1) You need to make sure your CSS and JS files are all based on the same version of fullCalendar, and also that your jQuery and momentJS files are compatible versions, and loaded in the correct order (see https://fullcalendar.io/support/ and https://fullcalendar.io/docs/usage/ respectively).
2) Don't use fullCalendar.io as a CDN. Either use the recommended CDNJS site (as per https://fullcalendar.io/download/) or download and host the files yourself.
3) <script>window.jQuery || document.write('<script src="src/jquery.js"><\/script>')</script> seems to be redundant, since you already included jQuery just above.
4) gcal.js needs to be loaded after fullCalendar.js, because it depends on it in order to work properly.
5) I realised your <link> tags are specified incorrectly. You need to put the URL in a "href" attribute, not a "src" (that's used for script tags). See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link fpr the spec.
6) You're loading the "print" CSS and the regular CSS both into the code, but the "print" style will override the regular style (because it's loaded later). You need to put a media query in the "print" one to ensure it only gets used when the user tries to print the page. e.g.
<link href="src/fullcalendar.print.css" rel="stylesheet" media="print">
Additional side comments:
1) You don't need jQuery-UI for this to work, and nothing else on your page seems to make use of it, so you can remove it.
2) You have HTML which is outside both the <head> and <body> tags. This is not valid. Anything you want to display should be inside <body>. Many browsers might be tolerant of this problem but it's messy and technically invalid HTML, so you can't expect it to always work properly.
You're placing your css in the wrong place.
<link href="components/style.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.min.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.print.css" rel="stylesheet">
Placing the code like this will cause external css resources to override your custom css.
Instead place it like this:
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.min.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.print.css" rel="stylesheet">
<link href="components/style.css" rel="stylesheet">
While designing I came across some problems with all of the fonts I have.
First, none of my fonts are loading. I have cdn's in the head tag of all of the fonts I need and they show up as colorful squares.
Second, I cant change any fonts for the text in the html, it just reads: font-family: 'Abril Fatface';, I added the font family of anything else in my scss *{} tag, but it did nothing, tried to add the font straight in the html tags but that also did nothing.
I amusing newest Bootstrap-4.0.0-alpha.6
Here's my head tag
<head>
<title>Q-bit</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap-4.0.0-alpha.6-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--Font awesome-->
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<!--devicon icons-->
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
<!--Baguetteox for the gallery-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
<!--jquery-->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./styles/jquery.ba-throttle-debounce.js"></script>
<!--floating icon slider-->
<script src="./styles/floatingcarousel.min.js"></script>
<!--My Styles-->
<link rel="stylesheet" href="./styles/styles.css">
<!--LoadData-->
<script src="./styles/loadData.js"></script>
</head>
And here's the call to font-awesome style:
<button class=" navbar-toggler navbar-toggler-right " type="button" data-toggle="collapse" data-target="#collapseNav" aria-controls="collapseNav" aria-expanded="false" aria-label="Toggle navigation" id="toogleIcon">
<span class="fas fa-angle-down my-toggler" id="faToggler"></span></button>
the devicons are listed in the floating carousel, but they all are defined in this style:
<li><span><i class="devicon devicon-angularjs-plain-wordmark colored"></i></span></li>
In my scss file, I had:
*{
background:#ffffff;
}
and I'm not sure why, but it blocked all fonts.
#s1{
background-color:red;
height:100px;
}
#s2{
background-color:blue;
height:100px;
}
#s3{
background-color:orange;
height:100px;
}
#s4{
background-color:yellow;
height:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- icons script -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<div class="container">
<div class="row" id="s1">Section1</div>
<div class="row" id="s2">Section2</div>
<div class="row" id="s3">Section3</div>
<div class="row" id="s4">Section4</div>
<div>
</body>
</html>
How to use css and javascript in these sections to make them act like separate webpages with on scroll function.
Example: During my first scroll, I want to navigate to section 2 with it's separate url.
During my 2nd scroll, I want to navigate to section 3 with it's separate url.
During my 3nd scroll, I want to navigate to section 4 with it's separate url.
You can't do this with the scroll bar. The next best thing is anchor links.
When you click these it'll scroll to the specific iframe because we tied them with the iframe IDs:
Section 1
Section 2
Section 3
Section 4
And further down your frames...
<iframe id="F1" src="URL 1"></iframe>
<iframe id="F2" src="URL 2"></iframe>
<iframe id="F3" src="URL 3"></iframe>
<iframe id="F4" src="URL 4"></iframe>
I would recomend you to use scrollify its a fantastic plugin that will save you a lot of time and you will have everything you need. Below is the link
https://projects.lukehaas.me/scrollify/#home
I have the following html markup currently just displaying simple text "HELLO STACKOVERFLOW" with some styling. The markup was taken from illustrator and I am trying to incorporate bootstrap to make a more responsive page. I cannot figure out why the text will not change with the browser size. It seems fixed. The browser shows the bootstrap scripts are working but I can't figure out what is overriding bootstrap. The style in the code are just text size and color.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=1190,height=792" />
<title>5707.CC2014.R30TEST2-1</title>
<link href="css/idGeneratedStyles.css" rel="stylesheet" type="text/css" />
<script src="script/idGeneratedScript.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body id="x5707.CC2014.R30TEST2-1" onload="RegisterInteractiveHandlers();" lang="en-GB" xml:lang="en-GB" style="width:1190px;height:792px">
<div class="container">
<div class="row">
<div class="col-lg-6" style="width:13883.54px;height:2339.22px;position:absolute;top:0px;left:0px;-webkit-transform-origin: 0% 0%; -webkit-transform: translate(0px,45.2px) rotate(0deg) scale(0.05);transform-origin: 0% 0%; transform: translate(0px,45.2px) rotate(0deg) scale(0.05);">
<p class="Basic-Paragraph ParaOverride-1"><span id="_idTextSpan000" class="CharOverride-1" style="position:absolute;top:-470.32px;left:0px;letter-spacing:15.4px;">HELLO STACKOVERFLOW</span></p>
</div>
</div>
</div>
</body>
</html>
The two comments are just right. You got this code from a generator (Illustrator as you wrote above, though style stylesheets are InDesign stylesheets). Generators often add inline styling. That's what happened here, too. Just delete all the style="[css-rules]" attributes from your body elements and it will be working.
See the rules for the cascade and specificity.
The sizes set by Bootstrap's stylesheet using the .col-lg-6 has a specificity of 0010 while the sizes set by Illustrator's style attribute have a specificity of 1000.
The style attribute is more specific, so it overrides the CSS rather than the other way around.