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.
Related
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.
I have a problem with the Bootstrap link which usually goes into the HTML file:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
It makes my navbar looks like:
(I need at least 10 reputation to post images, so I have to post the direct link)
https://i.imgur.com/dANnzzG.png
and after I remove the link:
(I need at least 10 reputation to post images, so I have to post the direct link)
https://i.imgur.com/EpnZCeK.png
But as you can see on the 2 picture, if I dont have the link, the stuff down the navbar ins't in the right position anymore. Please Help.
EDIT:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-6">
<app-list-employees></app-list-employees>
</div>
<div class="col-6">
<div><app-book-employee></app-book-employee></div>
<p></p>
<div><app-calendar-books></app-calendar-books></div>
</div>
</div>
That's the code for the component.
In the root of your project is the angular.json file.
If you want to use a CDN for bootstrap (like you use now), look for the styles object in this file (probaply between line 25 and 35), in there you can add your link. it should look like this:
"projects": {
"architect": {
"build": {
"styles": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
]
}
}
}
If you are using angular 6+ in your application it is best advised if you install bootstrap through npm as follows:
npm install --save bootstrap
After installing bootstrap add this line in your src/style.css file:
#import 'bootstrap/dist/css/bootstrap.min.css';
This will give you all the bootstrap styles so adding it in your index.html file or angular.json file is not needed
I've been trying to figure out why my ejs isn't including my css.
I've set up my header.ejs etc; but it isn't loading the css.
Please note that the header.ejs is indeed being included inside my index.ejs.
The only problem is that the stylesheets aren't being loaded.
I do realize that you need to tell ejs what you want to be loaded which I did. The directory is definitely correct. I used readdir to check whether the directory was outputting the contents of the folder which it did.
I'm wondering is it because it isn't under a static folder like public/css if that is the case how would I be able to change that?
server.js
app.use(express.static(__dirname + '/client/vanity/public/assets/css'));
header.ejs
<link rel="stylesheet" href="/../assets/css/normalize.css/">
<link rel="stylesheet" href="/../assets/css/skeleton.css/">
index.ejs
<% include views/header %>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 25%">
<h4>Basic Page</h4>
<p>basic template</a>.</p>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
If you were to serve your static files as such:
app.use(express.static(__dirname + '/client/vanity/public/assets/css'));
then, when the files are referenced, the path starts with /client/vanity/public/assets/css.
This means that you would reference a css file as the following (suggesting your css files are in the /css folder):
<link rel="stylesheet" href="/normalize.css">
Full path: /client/vanity/public/assets/css + /normalize.css.
dears,
i've followed these steps :
1) Download Bootstrap from http://getbootstrap.com/
2)Create a dynamic web project in eclipse.
3)Make sure that this dynamic web project could be run on the server.
4)Under WebContent folder, create a bootstrap folder.
5)Import files such as following from downloaded Bootstrap
resources into the newly created folder, “bootstrap” in step 3. css
folder consisting of bootstrap.min.css js consisting of
bootstrap.min.js img consisting of images Create an index.jsp and put
following within tag
But my html doesn't seem to see the css, i even wrote this line as a test but nothing appears
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
this is the whole index.html page:
<!DOCTYPE html>
<html>
<head>
<link href=”bootstrap/bootstrap.min.css” rel=”stylesheet” type=”text/css” />
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
</body>
</html>
Try to change your css link declaration to
<link href="bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
It has symbols with unsupported encoding.
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>