I'm new to Bootstrap3, and I am trying to apply class to a button.
Here is part of my code:
<body>
<div id="page">
<header class="container">
<div id="menu" class="navbar navbar-default">
<button type="button" class="btn btn-primary btn-lg">Menu</button>
<div id="logo">
<h4>The Big Lebowski</h4>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
The problem is: the btn-lg class doesn't apply to the button, however btn-primary works fine.
You are applying "btn" wich is the same as btn-medium
It will work like this
<button type="button" class="btn-lg btn-primary">
Related
I have problem with positioning of buttons on bootstrap navbar. They are not aligned with website title and they are too close together. The code looks like this:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li><button type="button" class="btn btn-default" id="new-point"><span class="glyphicon glyphicon-plus"></span> </button></li>
<li><button type="button" class="btn btn-default" id="feature-info"><span class="glyphicon glyphicon-info-sign"></span> </button></li>
</ul>
</div>
</nav>
https://jsfiddle.net/mleontenko/poqbkxrt/
I need to align buttons to website name and add a little bit of space between the two buttons. CSS trick that solves this would be appreciated.
Here you go with a solution https://jsfiddle.net/poqbkxrt/1/
li {
margin: 10px 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li><button type="button" class="btn btn-default" id="new-point"><span class="glyphicon glyphicon-plus"></span> </button></li>
<li><button type="button" class="btn btn-default" id="feature-info"><span class="glyphicon glyphicon-info-sign"></span> </button></li>
</ul>
</div>
</nav>
Hope this will help you.
By default the .nav on the .navbar component relies on hyperlinks for its navigation. Those hyperlinks have padding defined by Bootstrap's CSS to properly space each item in relation to the .navbar-brand.
Since you are using <button> elements you will need to add your own CSS, such as the following:
.navbar-nav .btn {
margin-top: 8px;
}
This code is working for you !!
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
<ul class="nav navbar-nav ">
<li><button type="button" class="btn btn-default" id="new-point"><span class="glyphicon glyphicon-plus"></span> </button>
<button type="button" class="btn btn-default" id="feature-info"><span class="glyphicon glyphicon-info-sign"></span> </button></li>
</ul>
</div>
</div>
</nav>
HAPPY TO HELP !!
I have a minor css issue with my bootstrap footer found in the modal. There is a line that appears going across the top. It appears to be caused by the footer. I had the issue with header as well, but removed it and noticed its in the footer. Can someone take a peak to see what is going on?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Get Started</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content modal-lg">
<p>
<h3 style="margin-left:30px;">We've simplified our processes...</h3>
</p>
<div class="modal-body modal-lg">
<div class="container col-md-12">
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-info btn-circle btn-lg"><i class="glyphicon glyphicon-cog"></i>
</button>
</div>
<div class="col-md-11">
<ul>
<li>Spent xyz</li>
<li>Spent xyz</li>
<li>Spent xyz</li>
</ul>
</div>
</div>
<button type="button" class="btn btn-primary btn-block">Annual campaign planning</button>
<br>
<div class="row">
<div class="col-md-3">
<button type="" class="btn btn-primary">Plan It</button>
<br>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="col-md-3">
<button type="" class="btn btn-primary">Create It</button>
<br>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="col-md-3">
<button type="" class="btn btn-primary">Deliver It</button>
<br>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="col-md-3">
<button type="" class="btn btn-primary">Measure It</button>
<br>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
</div>
</div>
<div class="modal-footer modal-lg">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
overiding .model-footer class will solve the issue.
.model-footer{
border:none;
}
Please let me know if this helped.
The issue is the footer's border-top. You can use this CSS to turn off the border:
.model-footer {
border-top:none;
}
It will work definitely !!
I'm new to Bootstrap/CSS and I would like to know why every change on Bootstrap class works only with luck. This happens to me so much so any tip can be great.
example:
Failing to have drop-down on the left side and some text in the center- on the same line.
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-info">
<div class="dropdown" style="align-content: center">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span></button>
</div>
<div class="text-left">Contacts</div>
</div>
.center {
float: none;
margin-left: 500px;
display: inline-block;
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-info">
<div class="dropdown" style="align-content: center">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span></button> <h1 class="span7 center"> Contacts </h1>
</div>
</div>
<div class="panel panel-info">
<div class="dropdown" style="align-content: center">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret align-left"></span>Contacts</button>
</div>
Are you asking like this? Above code when executed give the result as a button that has drop-down on the left and some text. Please check and revert.
I've been trying to make a responsive navbar with columns but I can't manage to react well to the different sizes I've trying al lot of things: column-offset, contaniers, paddings... but I can't get a decent result. Here it is what I managed to do so far:
<nav class="navbar navbar-default ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" style="height: 0px;">
<div class="row show-grid">
<div class=" col-xs-8 col-md-6 col-md-offset-2" >
<ul class="nav navbar-nav" id="altre">
<li>Shop
</li>
<li>Style Guide
</li>
<li>Be a man
</li>
</ul>
</div>
<div class=" col-xs-4 col-md-4">
<ul class="nav navbar-nav hidden-xs" id="login">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Login</a>
<div class="dropdown-menu">
<form class="navbar-form" role="form">
<p><input class="form-control" type="text" placeholder="E-mail"></p>
<p><input class="form-control" type="password" placeholder="Contrasenya"></p>
<button type="button" class="btn btn-primary">Sign in</button>
<button type="button" class="btn btn-success">Log in</button>
</form>
</div>
</li>
</ul>
<form class="navbar-form text-center visible-xs" role="form">
<p><input class="form-control" type="text" placeholder="E-mail"></p>
<p><input class="form-control" type="password" placeholder="Contrasenya"></p>
<button type="button" class="btn btn-primary">Sign in</button>
<button type="button" class="btn btn-success">Log in</button>
</form>
</div>
</div>
</div>
</nav>
At first sight it seems to be working right but when you resize you see the difference between the right and left margin.
I'm very lost at this point, anyone knows a clean way to have a good result?
here the files if you don't want to download one by one:
https://drive.google.com/file/d/0BwOBDBZckmYwZ20tLTRQdFI3a3c/edit?usp=sharing
thanks
You need to use .container class in divs before rows, the problem that you have seems to be using percentages in margin-left.
<div class="container"><!-- container -->
<div class="row">
<ul>...
</div>
</div>
See: http://jsfiddle.net/uFwnU/
I have the following snippet:
http://jsfiddle.net/v9ec3/51/
<div class="row">
<ul class="thumbnails">
<li class="span3">
<button type="button" class="btn">
<img class="img-rounded" src="http://s15.postimg.org/gn3znajvf/img1.png">
</button>
</li>
<li class="span3">
<button type="button" class="btn">
<img class="img-rounded" src="http://s17.postimg.org/4wx50qtin/img2.png">
</button>
</li>
</ul>
</div>
A simple row of thumbnails. It looks good in Chrome, but somehow does not work in Firefox / IE.
Am I doing something wrong? I believe that everything in the page is supposed to be cross-browser compatible.
Your images are big and those images are inside .btn class which has display:inline-block - this means buttons will extend to accommodate your image.
Next thing, .span3 is responsive and this span width is being smaller/bigger depending on your screen size but not your .btn which has image.
Solution:
You can fix it by making your btn to block level. Apply class btn-block.
<body>
<div class="row">
<ul class="thumbnails">
<li class="span3">
<button type="button" class="btn btn-block">
<img class="img-rounded" src="http://s15.postimg.org/gn3znajvf/img1.png"/>
</button>
</li>
<li class="span3">
<button type="button" class="btn btn-block">
<img class="img-rounded" src="http://s17.postimg.org/4wx50qtin/img2.png"/>
</button>
</li>
</ul>
</div>
</body>
Demo: http://jsfiddle.net/shekhardesigner/Y7XE7/1/