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>
Related
im have a litle problem here, i want to make modal showing center.
i want to make it like this
instead of showing like that, im getting this
this is the code
<!-- The Modal -->
<div class="modal fade" id="modal-first">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
<!-- Modal body -->
<div class="modal-body d-flex align-items-center">
<div class="row">
<div class="col">
<img src="1x/lawang_sewu2.jpg" style="width: 350px; height: 500px; object-fit: cover;">
</div>
<div class="col">
<p style="font-size: 36px; width: 250px;">Lawang Sewu</p>
<p style="width: auto; height: auto; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget ipsum ex. Integer pulvinar elementum fringilla. Fusce sollicitudin sed enim non elementum. Etiam sit amet turpis massa. Sed id posuere magna, sed molestie dolor. Vivamus at mauris malesuada, porttitor arcu in, auctor arcu. Sed efficitur, purus a molestie cursus, eros sapien volutpat purus, id accumsan nibh massa vitae augue. Sed fermentum, ex ut sodales auctor, neque ante malesuada eros, consectetur volutpat urna orci eget felis. Donec euismod scelerisque nisi ac dignissim. Phasellus eros libero, interdum ac arcu nec, venenatis maximus tortor. Nunc blandit tincidunt nulla. Mauris efficitur tincidunt lacus at ultricies. Maecenas dignissim quam malesuada eleifend blandit. In hac habitasse platea dictumst.</p>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
.modal-content{
padding: 5%;
}
You can add this in your own css script
.modal-dialog {
min-width:300px; //Min width in pixel
max-width:800px; //Max width in pixel
}
Remember to keep your css script after the bootstrap.css
Your modal-dialog class set a maximum width to your modal. Remove the class or change the max-width property.
<div class="modal fade" id="modal-first">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
<!-- Modal body -->
<div class="modal-body d-flex align-items-center">
<div class="row">
<div class="col-6">
<img src="1x/lawang_sewu2.jpg" style="width: 350px; height: 500px; object-fit: cover;">
</div>
<div class="col-6">
<p style="font-size: 36px; width: 250px;">Lawang Sewu</p>
<p style="width: auto; height: auto; text-align: justify;">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Morbi eget ipsum ex. Integer pulvinar elementum fringilla.
Fusce sollicitudin sed enim non elementum. Etiam sit amet turpis massa. Sed id posuere
magna, sed molestie dolor. Vivamus at mauris malesuada, porttitor arcu in, auctor arcu.
Sed efficitur, purus a molestie cursus, eros sapien volutpat purus, id accumsan nibh
massa vitae augue. Sed fermentum, ex ut sodales auctor, neque ante malesuada eros,
consectetur volutpat urna orci eget felis. Donec euismod scelerisque nisi ac dignissim.
Phasellus eros libero, interdum ac arcu nec, venenatis maximus tortor. Nunc blandit
tincidunt nulla. Mauris efficitur tincidunt lacus at ultricies. Maecenas dignissim quam
malesuada eleifend blandit. In hac habitasse platea dictumst.</p>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
add col-6 to your modal.
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.
I've been trying to recreate a list like the one below (the checkbox and the x are just png images) but I can't seem to figure it out.
I have tried using two texted cols but I can't for the life of me figure out how to get the alignment and the text breaks correct.
Any help would be very much appreciated.
Right now, my code looks like this:
<div class="row">
<div class="col-md-6 col-md-6-offset-2">
<h4 style="text-align: center;">THEY LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
<div class="col-md-6" style="text-align: center;"><h4>THEY DON'T LOVE</h4></div>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
</div>
<div class="col-xs-10">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
DEMO: http://jsbin.com/faboze/1/
http://jsbin.com/faboze/1/edit?html,css,output
Look carefully at the html and the css so you can understand how to adjust the spacing and how a hanging indent is done with an un-ordered list. Also look at the grid classes used.
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-4">
<h4 class="text-center">THEY LOVE</h4>
<ul class="list-unstyled love">
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="text-center">THEY DON’T LOVE</h4>
<ul class="list-unstyled no-love">
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
</div>
</div>
</div>
CSS
.list-unstyled.love li,
.list-unstyled.no-love li {
background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
padding:0 0 5% 45px;
}
/* ======= change the no-love image ========== */
.list-unstyled.no-love li {
background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
}
You didnt close your tags properly. Check below code.
You can use text-center class from bootstrap for centering the stuff.
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
<div class="col-md-6 col-md-6-offset-2">
<h4>THEY LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
<div class="col-md-6"><h4>THEY DON'T LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
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.