I am new with bootstrap. I have the following problem with responsive image using bootstrap. My image doesn't seem to scale. I have no idea what might have gone wrong.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body>
<div class = "container">
<div class = "col-small-12">
<div class = "row">
<img src="images/web.png" class="img-responsive" alt="Responsive image">
</div>
</div>
</div>
</body>
Bootstrap's responsive image class sets max-width to 100%. This limits its size, but does not force it to stretch to fill parent elements larger than the image itself. You'd have to use the width attribute to force upscaling.
http://getbootstrap.com/css/#images-responsive
Related
I'm obviously doing something wrong but this is my Day 2 with Bootstrap. I have a fluid container with two rows. On the first row I've got a title and an image. That image - even though I reduced the height and have it set to responsive, causes that second column in the first row to basically extend to almost the whole page. When I remove the image, the world makes sense. When I put the image back, the container blows up. Happens with any image so it isn't the image, it is my bad bootstrap.
`<!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.0">
<title>A basic website with Bootstrap #1</title>
<!-- Including Bootstrap here-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid bg-secondary">
<div class="row">
<div class="col">
<h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
</div>
<div class="col">
<img src="masterchef.png" class="img-responsive h-25" alt="">
</div>
</div>
<div class="row">
<div class="col">
<h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>`
Tried using the thumbnail class, tried looking through Bootstrap docs, tried reordering to see if that helps. Did not help.
To fix these kinds of errors you need to learn how columns work in bootstrap:
You can read more about the columns here
The bootstrap columns are divided in this way, currently in your code you have entered only col which means they are columns that do not specify their size but fit the next columns;
Instead, in this example, the columns are expressed and you can command the display from mobile to desktop:
<!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.0">
<title>A basic website with Bootstrap #1</title>
<!-- Including Bootstrap here-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid bg-secondary">
<div class="row">
<div class="col-6 col-md-12">
<h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
</div>
<div class="col-6 col-md-12">
<img src="https://e7.pngegg.com/pngimages/526/683/png-clipart-take-out-chef-s-uniform-cafe-yuva-indian-cuisine-master-chef-thumbnail.png" class="img-responsive" alt="">
</div>
</div>
<div class="row">
<div class="col-12">
<!--col-12 means that on all devices it will be 100% width magnitude-->
<h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
</div>
</div>
</div>
<!--<div class="container-fluid menu-options">
<div class="col">
<button type = "button" class="btn mx-1 btn-primary">Home</button>
<button type = "button" class="btn mx-1 btn-primary">Men's</button>
<button type = "button" class="btn mx-1 btn-primary">Women's</button>
<button type = "button" class="btn mx-1 btn-primary">Clearance</button>
</div>
</div>
-->
</body>
</html>
(Did you see that? with the simple addition of the md class, but there are many others!)
In this case I inserted two columns in the row, so that from mobile the view would be split in two and after the tablet (md) would display
read more about bootstrap breakpoints
I got help offline. The main issue isn’t with Bootstrap, but with how percentages work. I had the h-25 class on the element. The h-25 class attempts to set the height of an element to 25% of its parent. However, percentages only work properly when the parent has a well-defined/fixed height. When the parent doesn’t have a well-defined height, the browser enters a kind of feedback loop as it tries to adjust the set the height to a percentage while also adjusting the parent height to contain it.
Solutions
The easiest solution is to remove “h-25” and set a fixed height on the
Another option is to set a fixed height on the parent so that the percentage can be calculated definitively.
I went with the first option as putting a size on the image made it responsive where it doesn't overflow the container on smaller viewports.
I have trouble using bootstrap in reactJS. I installed bootstrap using npm, and included the bootstrap css in public.html, but I can only get a button without any style.
public.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="/js/bundle.js"></script>
</body>
</html>
APP.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import{Button} from 'react-bootstrap';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<button bsSize="large" bsStyle="danger">Test</button>
</div>
);
}
}
export default App;
I appreciate your ideas!
Try changing
<button bsSize="large" bsStyle="danger">Test</button>
to
<button type="button" class="btn btn-danger">Test</button>
Reference: http://getbootstrap.com/css/#buttons
As an aside, I noticed you have both installed and linked a local copy of bootstrap, as well as from CDN. The CDN version shows last, so that will take precedence.
I've a simple main layout:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
#yield('style')
</head>
<body>
#include('layouts.frontend.partials.slider')
#yield('javascript')
</body>
</html>
layouts.frontend.partials.slider
#section('style')
<link rel="stylesheet" type="text/css" href="mystyle.css">
#append
#section('javascript')
<script></script>
#append
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-swiper-autoplay="1000">Slide 1</div>
<div class="swiper-slide" data-swiper-autoplay="1000">Slide 2</div>
<div class="swiper-slide" data-swiper-autoplay="1000">Slide 3</div>
</div>
<div class="swiper-pagination"> </div>
<div class="swiper-button-prev"> </div>
<div class="swiper-button-next"> </div>
</div>
The #section('style') will be ignored while the #section('javascript') is working fine within the include file...
I've reduced both files (main and include) to a minimum and swapped the position of style and javascript without any difference
What seems to be working is to change to position from the #yield('style') to the body, like:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
#include('layouts.frontend.partials.slider')
#yield('javascript')
#yield('style')
</body>
Maybe it's not allowed to have #section in an include file?
What i want to archive is to have multiple partial includes with it's own css and javascript includes
Thanks
Here is another way to do, it's good because you have some flexibility.
You create a master template, put your main files
master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="">
#section('css')
<!-- some master css here -->
#show
</head>
<body>
#section('navbar')
#include('common.navbar')
#show
#yield('content')
#include('common.footer')
#section('js')
<!-- some js here -->
#show
</body>
</html>
The others childs extends the master, you'll have all your layout and can customize what you want:
Child blade
#extends('master')
#section('css')
#parent
<!-- more css -->
#endsection
#section('navbar')
#parent
#endsection
#section('content')
<!-- Main content goes here -->
#endsection
#section('js')
<!-- replace js and add my own -->
<!-- others js -->
#endsection
Did you try extending your child blade file to use the master template?
At the top of layouts.frontend.partials.slider did you put #extends('layout.master') (or whatever the path to your master template is?)
It could be an issue caused by the order in which you are including files. Wouldn't a simpler solution be to have a #yield('slider') in your master template and simply wrap the slider content in #section('slider') and drop the #include...?
I'm working on a microsite for a client, and things are working almost fine, except when I tried viewing it on firefox, I was surprised by how mis-placed things looked like..even though I disabled horizontal scrolling, in firefox u could still do it ( dont see the horizontal scroll but if you scroll horizontally it shows), even the webfont is different, although the webfont displays perfectly on firefox in other pages..and the third problem is the page top-margin, in the page properties I specified the margin to be 0 and in safari it worked, but in firefox it doesn't. could anyone please tell me what to do..I only have a spry menu bar and easing (animate2id) plugin which could be causing the problem maybe? in Safari it looks the way I want it to look..thanks in advance..
maybe I should mention that I'm a novice and I know what I know by self-learning.
here's the code in case..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Annual Report 2012</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href="micro-site.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #39949C;
overflow-x: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<link href="muli-fontfacekit/stylesheet.css" rel="stylesheet" type="text/css" />
<body leftmargin="0" topmargin="0">
<div id="rotator-controls" class="panel span2">
<div id="rotator-slides">
<a class="" href="micro-site.html" onclick="Animate2id('.slide-content'); return false" title="Go to 1st content with the default easing">1</a>
<a class="" href="#slide-content2" onclick="Animate2id('#slide-content2','easeInOutExpo'); return false">2</a>
<a class="" href="#slide-content3" onclick="Animate2id('#slide-content3','easeInOutExpo'); return false">3</a>
<a class="" href="#slide-content4" onclick="Animate2id('#slide-content4','easeInOutExpo'); return false">4</a>
<a class="" href="#slide-content5" onclick="Animate2id('#slide-content5','easeInOutExpo'); return false">5</a>
</div>
<div id="rotator-nav">
‹
›
</div>
</div>
</div><!--end of header -->
</div><!--end of slide-container -->
</div><!--end of body -->
<div id="Sitemap"></div>
</div><!--end of container -->
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
function Animate2id(id,ease){ //the id to animate, the easing type
var animSpeed=2000; //set animation speed
var $container=$("#slide-container"); //define the container to move
if(ease){ //check if ease variable is set
var easeType=ease;
} else {
var easeType="easeOutQuart"; //set default easing type
}
//do the animation
$container.stop().animate({"left": -($(id).position().left)}, 2000, easeType);
}
</script>
IE is a mystery to me. My web app is working on Safari, Firefox, Chrome, even iPhones and iPads, but when it comes to IE, I simply can't comprehend how hard it is to comply to the given standards. Anyway enough ranting.
My Twitter bootstrap buttons are completely ignored in IE8. Absolutely nothing happens when I click on any button. I couldnt find anything on google, has anyone come across this?
Many Thanks,
#Kave You uploaded only plain html to jsfiddle - which includes links to js which doesn't exists (so its kind of hard to debug when js is not attached)..
Try using a href instead of so many buttons.. twitter bootsrap supports styling of links to look like buttons, example is at first page of twitter bootstrap like this: (source copied & bit of modified):
<a class="btn btn-success btn-large" href="http://twitter.github.com/bootstrap/base-css.html">Example link with button styles</a>
Edit: Alternatively, full example with twitter bootstrap (modified from demo templates - link with button styles inside a hero unit) - copy & paste to file, save as testing.html and open with browser - enjoy!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="http://getbootstrap.com/2.3.2/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-success btn-large" onclick="alert('its working :)')">Learn more »</a></p>
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div><!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-alert.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-popover.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-button.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-collapse.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
IF still not working, make sure when you restart IE that you click "Allow blocked content" if pop-up for asking it is shown.
Allow blocked content referes to javascript content,the buttons are purelly CSS code,the problem is that IE 6....8 don't have a very good support for CSS3.
If you look on the getbootstrao.com website you dont see them using their own buttons :))
the best solution is create buttons using simple CSS,if someone using IE is browsing your website they might not see the border-radius effect but they will find actual square but working buttons.
I had the same problem and solved it using this jQuery/js:
<a href="http://www.example.com">
<button class="btn"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Button text</button>
</a>
<!--[if lt IE 9]>
<script>
$(".btn").click(function() {
var t = $(this).parent();
window.location.href = t.attr("href");
});
</script>
<!--[if lt IE 9]>