All I am trying to do is to get some text to begin in the middle of the screen.
Here is the code below. Note that I have included the minified bootstrap css and js files in my project directory along with my html file without subdirectories. I got those files from the precompiled Bootstrap 3.0.1 download. I also tried using the links to the CDN instead. Still didn't work. When I open this code in Firefox I don't see any positioning active at all. Other Bootstrap styles didn't work either, like I tried to do <p class = "large"> blah </p> and it didn't make the text large.
NOTE: To make it easier for people to test the page, I replaced links to local bootstrap files with a link to the bootstrap CDN file.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="span3 offset9">
<p class="large">This Text</p>
</div>
</div>
<h1>Hello, world!</h1>
</body>
</html>
in your jsfiddle, the bootstrap stuff isn't correctly used, all it needs is
<body>
<div class="row">
<div class="span9 offset3"><p>Seven thousand thousands of a thousand unique people</p></div>
</body>
and some externe resouces, http://jsfiddle.net/N5n4Z/1/, is a Bootstrap 2 skeleton, with your example in it, and it work. Well unless the preview window is to small. If the Window is to small, bootstrap, due to its media querys, automatically arrange all rows underneath, and ignore every offset.
On a side note, why not using the new Bootstrap 3? http://getbootstrap.com/
Update
Since you use Bootstrap 3 now, you have to change the markup a bit.
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>test loc</p>
</div>
fiddle
bootstrap docu
You forgot to import the javascript part of bootstrap.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
Related
I watched the video tutorial Laravel 9 and Vue 3 SPA online store 11. Transferring the html store template to App vue. In it, the server part is made on Laravel, and the client part on Vue.
I downloaded the layout of the client part of the online store - HTML template of the client part of the online store from Course Laravel 9 and Vue 3 SPA online store 0. Overview of the html store template and task priorities in the description under the video.
Copied the contents of the file C:\OpenServer\domains\karteecommerce\karte-fashion-multipurpose-ecommerce-html-template\index. html to the C:\Openserver\domains\clientpart\public\index.html file of the vue clientpart project (as in the video). Copied the folder (with styles, fonts and pictures) C:\OpenServer\domains\karteecommerce\karte-fashion-multipurpose-ecommerce-html-template\assets instead of C:\Openserver\domains\clientpart\src\assets.
The assets folder in the karte-fashion-multipurpose-ecommerce-html-template directory has the following location relative to the karte-fashion-multipurpose-ecommerce-html-template\index.html file
The structure of the project, as can be seen from the screenshot below, is as follows
Changed all paths starting with assets to ../src/assets (in C:\Openserver\domains\clientpart\public\index.html) and got the following file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title For This Document -->
<title> Karte - Multipurpose E-Commerce Html Template</title>
<!-- Favicon For This Document -->
<link rel="shortcut icon" href="../src/assets/images/logo/favicon-32x32.png" type="image/x-icon">
<!-- Bootstrap 5 Css -->
<link rel="stylesheet" href="../src/assets/css/bootstrap.5.1.1.min.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300;400;500;600;700&family=Roboto:wght#300;400;500;700&display=swap" rel="stylesheet">
<!-- FlatIcon Css -->
<link rel="stylesheet" href="../src/assets/fonts/flaticon.css">
<!-- Slick Slider Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/slick.css">
<!-- Ui Tabs Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/jquery-ui.min.css">
<!-- Magnific-popup Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/magnific-popup.css">
<!-- Nice Select Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/nice-select.v1.0.css">
<!-- Animate Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/animate.css">
<!-- Style Css -->
<link rel="stylesheet" href="../src/assets/css/style.css">
</head>
<body class="shoe">
<!-- ==========Preloader========== -->
<div class="loader"><span>Karte...</span></div>
<!-- ==========Preloader========== -->
<!--===scroll bottom to top===-->
<i class="flaticon-up-arrow"></i>
<!--===scroll bottom to top===-->
<div id="app"></div>
<!--==== Js Scripts Start ====-->
<!-- Jquery v3.6.0 Js -->
<script src="../src/assets/js/jquery.v3.6.0.min.js"></script>
<!-- Popper v2.9.3 Js -->
<script src="../src/assets/js/popper.v2.9.3.min.js"></script>
<!-- Bootstrap v5.1.1 js -->
<script src="../src/assets/js/bootstrap.v5.1.1.min.js"></script>
<!-- jquery ui js -->
<script src="../src/assets/js/plugin/jquery-ui.min.js"></script>
<!-- Parallax js -->
<script src="../src/assets/js/plugin/jarallax.min.js"></script>
<!-- Isotope js -->
<script src="../src/assets/js/plugin/isotope.js"></script>
<!-- Slick Slider Js -->
<script src="../src/assets/js/plugin/slick.min.js"></script>
<!-- magnific-popup v2.3.4 Js -->
<script src="../src/assets/js/plugin/jquery.magnific-popup.min.js"></script>
<!-- Tweenmax v2.3.4 Js -->
<script src="../src/assets/js/plugin/tweenMax.min.js"></script>
<!-- Nice Select Js -->
<script src="../src/assets/js/plugin/nice-select.v1.0.min.js"></script>
<!-- Wow js -->
<script src="../src/assets/js/plugin/wow.v1.3.0.min.js"></script>
<!-- Wow js -->
<script src="../src/assets/js/plugin/jquery.countdown.min.js"></script>
<!-- Main js -->
<script src="../src/assets/js/main.js"></script>
<!--==== Js Scripts End ====-->
<script type="module" src="../src/main.js"></script>
</body>
</html>
The page looks like this
And it should look like
The App.vue file contains the content and all images starting with ../src/assets/images are rendered normally, and the styles included in public/index.html with `../src/assets/ css' didn't work.
Tell me how to achieve the inclusion of css files and thus the correct display of the page.
P.S. In the video tutorial, the index.html file is located at C:\Openserver\domains\clientpart\index.html instead of C:\Openserver\domains\clientpart\public\index.html. I'm not sure if it affected, but I wrote it just in case.
P.S. Here are screenshots of the developer tools (in which you can see the connection of css files in the lower right corner) - as it should be and as it is
P. S. Add errors
Suggest solution for Vue, on Stackoverflow link given solution for Node.js.
I am trying to migrate my old mvc app to bootstrap 4 and admitedly I have little experience with scss files.
Lets say I have a simple _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Source/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Source/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
<script src="~/Source/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Source/Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>
a View:
<div>
<div class="row">
<div class="col-md-2">
-OOO-
</div>
<div class="col-md-3">
-WWW-
</div>
<div class="col-md-7">
-KKK-
</div>
</div>
</div>
and a Controller with method:
public ActionResult Index() => View();
Bootstrap v4.3.1
JQuery v3.4.1
As soon as the View renders the weird situation happens, the '.col-md-2' class is rendered with wrong width values because '_grid-framework.scss' appear twice in the styles list and the wrong one has precedence:
My questions are:
Why browsers see two different files with the same path??
How do I make bootstrap generate only the correct version of the file?
I tried the regular things with clearing cache, clearing/recompiling, removing content from the IIS and rebooting the IIS.
// EDIT 1
Actually the comment about bootrap 4 dropping .col-sm-*, .col-md-*, etc confused me and it turns out it is not really the case (they even added xl tier). So the problem stands, I am currently overriding .col-md-2 styling in the .css file but I don't really want to do that.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <!--Supporting All devices width-->
<meta name="description" content="Lowa State University Library">
<meta name="keywords" content="For a Web Design Assignment">
<meta name="author" content="Tharuka Dananjaya">
<link rel="stylesheet" href="./css/style.css">
<!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->
</head>
<body>
<header>
<div class="container">
<div id="head_top">
<h1>LOWA STATE UNIVERSITY | <span class="highlight"> LIBRARY</span></a></h1>
</div>
<nav>
<ul>
<li>
<li class="current">Home</li>
<div class="dropdown">
<button class="button_book">Books</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
</div>
<!--Login
Register-->
Student Info
</ul>
</nav>
</header>
<section id="search_bar">
<div class="container">
<form>
<input type="text" placeholder="Search">
<button type="search" class="button_1">search</button>
`I have external CSS file and Bootstrap. i already link my CSS style in my page and it's work perfect. so I'm try create a table using bootstrap. but after linking bootstrap files in page change every styles. ex. header fonts, everything. So how do i link both Styles and i need both styles.After Linking Bootstrap file
Please first add bootstrap style and then your style.css.
Like
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
in your index.html file in the head section.
The priority of css works from bottom to top.
If you're importing your custom styles BEFORE Bootstrap; as soon as you import bootstrap it will override the classes you may have created in your CSS file.
Try importing bootstrap before your own CSS and see if that makes a difference.
Without any code it's all I can help you at this moment.
Edit
<link rel="stylesheet" href="./css/style.css">
<!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->
As I can see you were indeed importing bootstrap after your own CSS rules. That way Bootstrap is going to override your classes in your CSS files. To get around this flip the order of these two statements so your CSS has prevalence over what Bootstrap states.
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
Also, if you're not providing any font-family attributes in your CSS it's going to use Bootstrap's default. Don't forget to override all necessary classes AND elements (body, p, div...).
Further info on how to apply theming in your own Bootstrap instance can be found here, in the official Bootstrap docs.
Extra tip while debugging: Check in the developer environment you're not getting any 404 in the network requests regarding your links to your own stylesheets since it feels like your styles are not working but actually they are never reaching the browser
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
Compiler tends to read code from line 1. If you put bootstrap.css after the style.css. Definitely bootstrap.css will overwrite style.css.
hi Tharuka Dananjaya,
the problem was totally made from bootstrap external css only.
how to solve?
1. first to check which section is breaking and inspect the element, you can see
the browser take the boostrap css not your style.
so what to do , make that particular css as !important
eg: color:red!important;
make your style high priority!
copy your whole code from style.css, and paste in your html page
as internal css styling way, which means put in b/w head and body.
I've been experiencing some problems trying to create columns for Rails using bootstrap. I installed bootstrap with "Integrating Rails and Bootstrap, Part 1 - the Installation". This is what I have so far:
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
</head>
<body>
<div id="main-container" class="container">
<div class="row">
<div id="A_Name_Title" class="col-md-6" style="background-color: LightSteelBlue">
<p>Test</p>
</div>
<div id="A_Time_Spent" class="col-md-6" style="background-color: LightSteelBlue" >
<p>Test2</p>
</div>
</div>
</div>
</body>
</html>
In the code, I am trying to create two columns stacked horizontally so I can use them as titles for the following rows. However, when I run the code I get:
I tried "Columns in bootstrap 3.0 only stacking vertically" but I still could not get it to work.
I am using Rails 5.0.1 with Bootstrap 3.3.7 and Ruby 2.2.6.
Edit - 02-16-17 - 5:00 PM
Moved the header into the correct place. Tried changing the "href="bootstrap.css" to "href="stylesheets/bootstrap.css" but RubyMine complained about that. Ignoring the complaint, the result was still the same. Followed the tutorial that #Fabrizio linked to and I still could not get it to work. With #Fabrizio's code, by replacing my link code with
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I do get the result I want but from what I understand, if that website goes down, I lose access to the bootstrap.css
This is what I have for my "application.css.sass" file:
#import "bootstrap-sprockets"
#import "bootstrap"
Edit - 02/18/17
Turns out I was having issues with coffee script and by adding "gem 'coffee-script-source', '1.8.0'" and then running bundle install, I was able to import bootstrap through the use of the sass gem and the application.html.erb file. Thank you for all the help.
I am not sure that you can load css files with Ruby on Rails without following the Asset Pipeline, basically you will have an application.css file inside app/assets/stylesheets, the html file should have this manifest file in the head tag with the following syntax
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>instead of
<link rel="stylesheet" type="text/css" href="path to your css file" />
The manifest file application.css will include link to all the css files with the following syntax:
#import "bootstrap-sprockets";
#import "bootstrap";
Additionally with Rails you can include Bootstrap with a gem, it is called bootstrap-sass and you can follow the instructions at https://github.com/twbs/bootstrap-sass
Just include the gem as by the instructions in your Gemfile, run bundle install and then include it in your application.css..
Hear your can read about the asset pipeline.
http://guides.rubyonrails.org/asset_pipeline.html
I included your css in my text editor and this is the result I get, two vertical columns, for me a red and blue column. I think this is the result you would like to reach with a col-md-6?
This is the code I used:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div id="main-container" class="container">
<div class="row">
<div id="A_Name_Title" class="col-md-6" style="background-color: LightSteelBlue">
<p>Test</p>
</div>
<div id="A_Time_Spent" class="col-md-6" style="background-color: red" >
<p>Test2</p>
</div>
</div>
</div>
</body>
</html>
Everything seem good, if nothing works out, try creating new file
custom.scss in app/assets/stylesheets
and move the contents from application.css to custom.scss.
Also check the css selectors you used don't override any styles.
I have a little problem with Angular2 and a CSS-Stylesheet.
I included boostrap in the index.html file of the Angular2-App.
It is no problem in the whole application...
Then I included another library (Bootstrap-switch) in the same way:
<!-- Load external Libraries / Modules -->
<!-- Bootstrap & JQuery -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Bootstrap Toggle Switch -->
<link rel="stylesheet" href="css/bootstrap-toggle.min.css">
<script src="js/bootstrap-toggle.min.js"></script>
<!-- eigener Stylesheet -->
<link rel="stylesheet" href="css/custom.css">
But now I have a little problem:
While the "normal" Bootstrap is functional over the entire application, the Bootstrap Toggle I can only use at the index.html.
If I use it there, no problem, but if I use it at any other page, the styles won´t apply...
Here is how I use the toggle-switch:
<div class="checkbox">
<label><input type="checkbox" data-toggle="toggle" value="">Passwort
speichern (Auto-Login)</label>
</div>
Can someone can help me? Thanks!