i have a server with nginx + spdy + module_pagespeed installed and i'm making page speed test from google.
This is my current template for the test which obtain 76/100, a basic template with only 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">
<title>Welcome!</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
</div>
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
I obtain 76/100 and an alert that say render blocking,
page speed test
When i remove the bootstrap.min.css i get 100/100, ¿is there any way to fix this issue?
Regards,
You only seem to have an issue in the mobile test and not the desktop version. Google has different guidelines for the different cases since usually the mobile connection is slower, less content is shown (which means not as much CSS is needed) and so on.
Some things I’d look into:
Is your version of Bootstrap the complete Bootstrap? Try to only include the parts that you actually need. In 90% of the cases there is something you can remove.
Does your mobile site need exactly the same CSS as the desktop version? Try to identify elements that you maybe don’t even use on smaller screens and ship a seperate file that you use only on small screens (and don’t use the big one)
If you use the mod_pagespeed module (either on Apache or NGINX) there is a setting to dynamically inline certain parts of the CSS into the <head> which is what Google recommends you do for big stylesheets. I haven’t used this setting yet though so I can’t provide any help there.
Hope that helps.
Related
I'm using bootstrap 4, and I have a navbar at the top of the screen, fixed-top class, and it works completely fine, except when I link to something on the page.
So if I have an element that I target away down the page in one of the navbar links, using href="#introduction", the page will jump to that section, but the top of the targeted element will be cut off by the navbar. This only seems to happen when I target the element from a dropdown item. I've tried with a normal navbar link and didn't experience this behaviour.
See this fiddle to see what I mean - if you click on the dropdown button, then click "Introduction", you'll see how it's being cut off (cuts off the title of the jumbotron):
<nav class="navbar navbar-expand-md navbar-dark navbar-default sticky-top bg-dark">
<a class="navbar-brand" href="#">Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Test</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#introduction">Introduction</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<main role="main" class="container-fluid">
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<p style="margin-bottom:1300px">
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
<div class="jumbotron jumbostyle" id="introduction">
<h2>
Hello, world!
</h2>
<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-primary btn-large" href="#">Learn more</a>
</p>
</div>
<p style="margin-bottom:1300px">
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
<div class="col-md-1">
</div>
</div>
</main>
Does anyone have any ideas how to solve this?
You can solve this issue by adding 3 or 4 <br> after
<div class="jumbotron jumbostyle" id="introduction">
This can solve the problem for now.
For the best practices you can check for each class style like jumbostyle to see what exactly casing this issue.
But you can just add 3 or 4 <br> and it will work fine.
Check this : Example
I assume you have control over the content displayed on the page. In that case you can give the content div with the target id #introduction a padding-top with the height of your navbar (about 100px).
<div class="jumbotron jumbostyle" id="introduction" style="padding-top:100px">
To make it even better, you could consider creating a custom class for this styles or using the bootstrap spacing utilities. Please do not add this styles to the #introduction tag!
Found the answer:
Instead of sticky-top, I used fixed-top, then added
body {
padding-top: 70px
}
to the CSS and
window.addEventListener("hashchange", function() { scrollBy(0, -70) })
to the script.
See here: https://jsfiddle.net/ao3b0m95/
Edit: I don't think I need the CSS, just the JS will do the job.
I have placed a button in my page. But when I make it to small screen then the button overlaps with the text (see picute).
This is my code for button:
<div class="row featurette" id="v1">
<div class="col-md-7">
<h2 class="featurette-heading">Title. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis
euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus,
tellus ac cursus commodo.</p>
<button type="button" class="btn btn-outline-secondary" id="btn1">mehr Erfahren</button>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="500x500"
src="https://i.stack.imgur.com/amo0f.png" data-holder-rendered="true" style="width: 500px; height: 500px;">
</div>
</div>
Regarding the input-groups-buttons bootstrap 3 feature :
https://getbootstrap.com/components/#input-groups-buttons
I would like to know how can I create a CSS that reproduced the same feature for panel-heading.
At this time, I have a button inside the panel heading (which I had to change a little CSS so it can fit in the panel-heading).
http://www.bootply.com/TjI7cyaYIu (without my little CSS hack)
So I want this button to be displayed the same way an input-group-button is.
A similar question may have been posted here : Bootstrap input-group-addon icons for non-inputs but without any relevant answers.
I know this is not a bootstrap feature and my CSS skills are pretty low so I hope someone can help me !
Try something like this :) should work for u.
<div class="panel panel-default">
<div class="panel-heading">
<div style="display: flex;">
<div style="width: 80%;"> Title goes Here </div>
<div style="width: 20%;" class="text-right"> ICON </div>
</div>
</div>
<div class="panel-body">
Panel content
</div>
</div>
http://www.bootply.com/RR1vUVQh97
If you want to learn easily some CSS-Basics and how to use bootstrap, try codecademy ;)
------------------------------------------------------------------ EDIT:
Here is the solution including your button:
<div class="panel panel-default">
<div class="panel-heading" style="display: flex;">
<div style="width: 80%">
<h4 class="panel-title" style="margin-top: 7px;">MY TITLE</h4>
</div>
<div style="width: 30%" class="text-right">
<button class="btn btn-sm btn-danger pull-right">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh lorem, ultricies a luctus ac, congue et dui. Suspendisse a neque augue. Ut laoreet elit pretium dolor ullamcorper feugiat. Curabitur scelerisque, diam in tristique consequat, lacus quam sagittis lorem, ut gravida enim arcu ultricies mauris. Maecenas convallis pretium diam sed malesuada. Donec eget nunc id ligula elementum interdum vel vitae est. Morbi ut magna vulputate dui condimentum lobortis. Curabitur commodo eget lectus a mollis. Vestibulum eget fermentum enim, id commodo diam.
</div>
</div>
http://www.bootply.com/RltWAo76Bq
With edited border-radius: http://www.bootply.com/eYpYJz9BcW
I'm trying to customize Bootstrap's modal by adding another class and targeting another div class inside it. However, I have no idea why any styles aren't applied.
<div id="myModal1" class="modal custom-modal fade">
<div class="modal-content text-center">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<img src="img/proj1.jpg" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div><!-- /.modal -->
CSS
.custom-modal .modal-content {
padding:20px 0;
}
Any idea? Any help would be appreciated!
This is how you define a modal, style it and fire it:
$(document).ready(function() {
$('#myModal').modal();
});
.modal-body {
padding: 70px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.css" />
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut erat diam. Aenean tempus diam facilisis, sollicitudin augue quis, ultricies nibh. Maecenas molestie augue eu risus vulputate luctus. In vestibulum ac nibh quis accumsan. Praesent fermentum risus id sodales sagittis. Mauris non neque porttitor, congue tortor nec, tincidunt sapien. Suspendisse vel condimentum ligula. Praesent at semper risus. Fusce vel ex in eros tempus porttitor nec in nisi. Vestibulum vel justo eget odio fermentum maximus vel ut nisi. Nam consectetur vehicula nisi, ut pellentesque leo pharetra in. Vestibulum nunc lectus, vulputate a odio tempus, euismod dictum dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam interdum lacinia urna at convallis. Quisque in metus id turpis mattis pretium.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Please note: using !important might not be necessary, try without.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
twitter bootstrap, fluid vs fixed, then add in responsive, how does it all fit together?
Here is the demo of the design on which I am working
http://jsfiddle.net/U8HGz/1/show/#about
but this design is coming as fluid.. how can I make this design as fixed?
Below is the source for the page
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> web page</title>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<style type='text/css'>
body {
padding-bottom: 40px;
padding-top: 60px;
}
.sidebar-nav-fixed {
padding: 9px 0;
position:fixed;
left:20px;
top:60px;
width:250px;
}
.row-fluid > .span-fixed-sidebar {
margin-left: 290px;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
}//]]>
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<p class="navbar-text pull-right">Logged in as username</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid row">
<div class="span3">
<div class="well sidebar-nav-fixed">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="nav-header">Sidebar</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="nav-header">Sidebar</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9 span-fixed-sidebar">
<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-primary btn-large">Learn more »</a></p>
</div>
<div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div><!--/.fluid-container-->
</body>
</html>
You're using the container-fluid and row-fluid classes in your HTML.
The Bootstrap docs specifically explain how to use both the default and fluid grid systems; you want default, i.e. container and row.
Excerpt:
The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled.
Twitter bootstrap is meant to be responsive. If you want to change that you'll need to download the css and put it on your server for you to be able to modify it. After that go step by step and eliminate all that makes your site to resize. Like percentage width (other than 100%) and so on.
There's no easy solution to that.