I want to implement the fluid layout. Shown as here http://twitter.github.com/bootstrap/scaffolding.html#global
What i did:
added gem 'twitter-bootstrap-rails + bundle install
layouts/applicationlayout
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
SIDEBAR
</div>
<div class="span10">
<%= yield %>
</div>
</div>
</div>
</body>
nothing took change. What did i forget?
The bootstrap-responsive.css file is only part of bootstrap. The main css file you need is called bootstrap.css
Try adding this line of code in your header and see if anything changes:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
Actually, it does work, look at the jsFiddle:
http://jsfiddle.net/persianturtle/sEywB/
Related
I'm trying to make a display heading with an image to the left and to the right of the heading. It works great om lg-display but when i make the display smaller the heading text seems to overflow the column to the right making it asymetrical. I would like the images and the text to stay even with smaller screens. Am I doing something wrong with the grid system?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>farfetch'd | Official Website ‐</title>
<!--CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- favicon -->
<link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col">
<img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
<div class="col">
<h1 class="display-4 text-center">farfetch'd</h1>
</div>
<div class="col">
<img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
</div>
</div>
</body>
I assume you want the text to always fit in the middle div, one way you can achieve this is using vw for length instead of rem
rem:
Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).
vw:
Equal to 1% of the width of the viewport's initial containing block.
Check length for more info on this.Final result would be:
.heading {
font-size: 5vw;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>farfetch'd | Official Website ‐</title>
<!--CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- favicon -->
<link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col">
<img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
<div class="col">
<h1 class="heading text-center">farfetch'd</h1>
</div>
<div class="col">
<img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
</div>
</div>
</body>
i think this is the default behavior of h1 tag
you can change this behavior with overflow-wrap overflow , etc in css
I am just trying to get a simple project started using foundation 6. My very simple html is:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="row">
<div class="large-2 columns">
<h1>test</h1>
</div>
<div class="large-2 columns">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
However, when testing the website, the column classes are not getting applied and the grid is not working as it should be. Is there something I am missing?
Unless you're using < foundation 6, you need to be using the XY-grid because the old float grid was deprecated.
Check this out: https://foundation.zurb.com/sites/docs/xy-grid.html
Your html would look something like this using the XY-grid:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="grid-x">
<div class="cell large-2">
<h1>test</h1>
</div>
<div class="cell large-2">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Just wanted to add that you can still use the float grid in Foundation 6. If you visit the download page, you can select "Float Grid" under "Grid" in the left column and download that custom build. You do not have to use the XY Grid.
If you do that, your existing grid markup will work.
I have a banner header that display's its banner image when in the main directory of the site but once I move the HTML file to a sub folder and update all the links to reflect the folder change the banner image no longer displays. In all of my code editors, the path to the image is set correctly. Below you will find the code in my header and also the section of code that isn't working properly. top-banner.jpg is the question at hand here. All other images on the page work and are in the same directory as the banner image. Any suggestions would be greatly appreciated.
<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>Products</title>
<meta name="description" content="">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/font-awesome.css" rel="stylesheet">
<link href="../css/flaticon.css" rel="stylesheet">
<link href="../css/fopen-sans.css" rel="stylesheet">
<link href="../css/raleway-webfont.css" rel="stylesheet">
<link href="../css/lato.css" rel="stylesheet">
<link href="../css/idangerous.swiper.css" rel="stylesheet">
<link href="../css/magnific-popup.css" rel="stylesheet">
<link href="../img/favicon.ico" rel="shortcut icon">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/responsive.css" rel="stylesheet">
</head>
<div class="wpc-top-header overlay img-bg">
<img src="../img/top-banner.jpg" alt="banner" class="hidden">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="wrapper">
<div class="heading">Our Products</div>
<div class="subheding">
home<span class="round"></span>
pages<span class="round"></span>
Our Products
</div>
</div>
</div>
</div>
</div>
</div>
remove class="hidden" in <img src="../img/top-banner.jpg" alt="banner" class="hidden">
Edit: As can be seen from the provided links, the file /htmltest/js/scripts.js contains:
/*-------------------------*/
/* ADD BACKGROUND IMAGE */
/*-------------------------*/
$(".img-bg").each(function(){
$(this).css("background-image", "url("+$(this).find("img").attr('src')+")");
});
However, the path js/scripts.js is not updated to ../js/scripts.js, and this script is not executed. So just replace all js/into ../js/ in the HTML file.
Your old version adds a style into the div tag with class overlay. Its adding:
style="background-image: url("img/top-banner.jpg");"
So add that to your new <div> but obviously with the new path. That fixes it for me, so to clarify the line should now be:
<div class="wpc-top-header overlay img-bg" style="background-image: url('../img/top-banner.jpg');">
Hi I'm new in using Polymer.js and I'm building my HTML custom tags in order to reuse them in my front-end work. The problem is that when I try to open my index.html in Safari and Firefox I see the only HTML without all the CSS. In Chrome everything works perfectly. I can't understand why it happens.
I use Polymer 1.0.0 and Firefox and Safari are in their latest versions.
Any suggestions?
Thank you all in advance.
Here is the code (As you notice I've included the webcomponents-lite.min.js):
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Polymer Project</title>
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="app/components/pd-dashboard/dashboard-articles.html" />
<div class="row">
<dashboard-articles> </dashboard-articles>
</div>
<div class="col-sm-2"></div>
</div>
</html>
dashboard-articles.html:
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="import" href="../../components/articles/article-2col/article-2col.html">
<link rel="import" href="../../components/articles/article-1col/article-1col.html">
<link rel="stylesheet" type="css/text" href="../../components/pd-dashboard/dashboard-articles.css" />
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Dosis:800,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Nunito:400,700' rel='stylesheet' type='text/css'>
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<dom-module id="dashboard-articles">
<template>
<div class="container-fluid">
<div class="row" style="margin: 5px">
</div>
<div class="row">
<hr>
<div class="row">
<div class="col-sm-5">
<article-1col></article-1col>
</div>
<div class="col-sm-7">
</div>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "dashboard-articles"
});
</script>
Problem solved!
The <link> to the .css file must be inside the tag <template> in each component you create!
My code is not working, it is not showing horizontal columns. I tried everything, using sublime text 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">col1</div>
<div class="col-xs-6">col2</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In your browser, right click on the page and View Page Source. Click on the link to css/bootstrap.min.css and see if it successfully loads the bootstrap styles. I'm wondering if this path needs correcting.
Your code works for me when I use the bootstrap CDN: http://jsfiddle.net/t2rbyj38/