This is first time I am trying bootstrap. Everything seems to be in place except the class jumbotron is not working. Class container works and brings content in center but jumbotron which is suppose to give some background does not seems to work. (adding or removing this like class="jumbotron" has no effect on page.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
</div>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
I am attaching the of ide so you can see my file tree. I checked it myself also and seems I have loaded everything correctly.
Update: redownloading the bootstrap solved the problem with exact same code. somehow my first download was not working correctly.
Try:
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
without the ./ instead.
or the CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Try to use
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
in your HTML head.
Related
<html>
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<div class="header item"><i style="font-size: 20px;" class="edit icon"></i>Blog Site</div>
Home
New Post
</div>
</div>
<p class="sample"> I can style here with css in app.css</p>
Can anyone help with the css/semantic-ui problem, please?
When I use style tag in the file as above it is working but if try to style something in my app.css file it does not work. I can style something else that I did not use semantic-ui in but I cannot style anything that has something from semantic-ui.
For example: I can style the class "sample" in my app.css file but cannot style class "item".
Thanks!
Its because of your files precedence in header, it read line by line first come first serve.
Always add your custom file in the end of header so that your custom style's overwrite default styles.
Replace below code
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
</head>
Move semantic.min.css in top of app.css...
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
</head>
I am trying to learn Bootstrap. Would like to create simple 3 columns in 1 row.
My code looks like this (just copied it from example in Bootstrap Documentation).
<!DOCTYPE html>
<html lang="en">
<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 -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
</body>
</html>
I tried with all kinds of sizes - "col-sm", "col-xs", etc, tried also "col", "col-different sizes", "col-different sizes-different numbers from 2 to 12" and the columns always stack vertically.
None of the solutions on stackoverflow and the internet seem to work either.
Thanks in advance
Thank you guys for help.
The reason was not including Bootstrap's CSS properly.
I'm trying to link a css file into this blade header.blade.php
It doesn't work, and nothing I've tried so far would work, except if i put the into the same file of the *.blade.php that I'm using.
:::layouts/header.blade.php:::
#section('header')
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Help</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!-- Scripts -->
<script src="{{ asset('js/jquery.js') }}"></script>
</head>
<body>
#stop
////eof////
:::master.blade.php:::
#extends('layouts/header')
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
Register
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Master
</div>
<div class="links">
About
Work
</div>
</div>
</div>
#yield('footer')
Make sure your css file is in your 'public' directory, ie: 'public/css/styles.css'
Then try:
<!-- Styles -->
<link href="{{ url('css/styles.css') }}" rel="stylesheet" type="text/css" />
Include this code in your header.blade.php
<link rel="stylesheet" href="{!! asset('css/styles.css') !!}" media="all" type="text/css">
The problem wasn't the asset or url link
it was #section('header') and #stop in the first file -- layouts/header.blade.php.
Because using extend doesn't yield the content, yet it extends the html page -- I must've removed those from the html (or php) file (that is).
Best regards.
One other question.. to append to the current answer:
I've noticed that using #extends appends the HTML instead of inserting at the point where the function is called.
How to prevent this and so the html from the calling file goes where it's supposed to go (at the function call)?
SOLUTION
use #include instead
On my meteor project, I embed bootstrap CDN on the header. But due to the merged stylesheet is embedded right after the <head> tag, some of my styles are overwritten by the bootstrap. Here is the rough HTML looks like on browser
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?hash=e4358d3b8494bc13eda6b965c33b5902cd562a07">
<meta ..>
<title>...</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
...
</body>
</html>
How can I setup the merged stylesheet to be embedded after the CDN or right before </head> closing tag?
That's currently a Meteor caveat, discussions are on-going here: https://github.com/meteor/meteor-feature-requests/issues/24
The possibility to change it will probably come in a future release
I'm new to Bootstrap but i'm really confused here. I started new Maven Web Project and wanted to put Bootstrap into jsp file, but after running page on Tomcat columns appear on top of each other when they're supposed to be inline. What am I doing wrong?
<%# page language="java" pageEncoding="UTF-8" session="false"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/resources/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<title>Title</title>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/resources/js/bootstrap.min.js"></script>
</body>
</html>
Does this works for you?
JSFiddle
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
You can ignore the code above just a copy&paste
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
I think you have defined a wrong path location for bootstrap. This means the browser receives an HTTP 404 when it requests bootstrap files. You should have the name of the project/application before the path to your css. If you don't have the project name, Tomcat will direct the request to the ROOT folder. This is how bootstrap link should be:
<link href="/project/css/bootstrap.min.css" rel="stylesheet" type="text/css">
Also, you can dynamically get your project name, or the context path, using this code below:
<link href="/${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css">
A side suggestion... since you are using Maven, why don't you use WebJars? It is really powerful and well documented.