Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!--font awesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<title>Hello, world!</title>
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./test.css">
</head>
<body>
<!--scripts-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./test.js"></script>
<!-- <button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span> -->
<div class="row justify-content-center test" id="button1">
<h1 class="status">Status of program</h1>
<div class="col-xs-offset-1">
<button type="button" class="btn btn-md" onclick="show(this)">Just an Idea</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">In Development</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">Being Polited</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">Proof Tested</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">Operationals</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</div>
</div>
<div class="row justify-content-center">
<div>
<h2 class="status">Rate the value of Your Idea will Provide</h2>
</div>
<div class="row">
<table class="table table-responsive" id="table">
<tbody id="tbody">
<tr class="test">
<td>
Client Experience
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Collaboration
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Money
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Time
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Quality
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Hi
I have written a small html page using bootstrap version 3.3.7 using BootstrapCDN
it just looked fine like this
After I thought to change to version 4.1.0
I just changed the CDN version from 3.3.7 to 4.1.0 from bootstrap official site but it changed whole alignment of my page like this
please help me
Thanks in advance
It's because some bootstrap 3 classes are different in verison 4. You didn't provide any code so it's hard to tell which specificly are causing the problem. You can read in more details about changes here https://getbootstrap.com/docs/4.0/migration/
Related
I have an html file in which I want to display icons in button.
I am using 3 different images of by Awesome Font i.e
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fa fa-user-plus" aria-hidden="true"></i>
<i class="fa fa-user-times" aria-hidden="true"></i>
I have included its library in my project.
Only first image tag i.e <i class="fa fa-user" aria-hidden="true"> is working rest are not displaying the icon. Need Help!
Thanks in advance.
<div class="col-md-6" style="text-align:center">
<button class="btn btn-primary" type="button" ng-click="onUnAssignUsers()"><i class="fa fa-user-times" aria-hidden="true"></i>Unassign Users</button>
<button class="btn btn-primary" type="button" ng-click="onAssignUsers()"><i class="fa fa-user-plus" aria-hidden="true"></i>Assign Users</button>
<button class="btn btn-primary" type="button" ng-click="onUsers()">Users</button>
</div>
Make sure you are using latest version of Font-Awesome.
Here is the link i used for fiddle and is the latest CDN from bootstrapcdn.
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
You missed out <i class="fa fa-user-times" aria-hidden="true"></i> on Users Button.
Check https://jsfiddle.net/luzan/det1ovqa/
you are not using the latest version. Those icons are included in version 4.
Try this one. I think there is <link rel="stylesheet" href="path-to-your-fontawesome-css-file/css/font-awesome.css">
<link rel="stylesheet" href="http://fontawesome.io//assets/font-awesome/css/font-awesome.css">
<div class="col-md-6" style="text-align:center">
<button class="btn btn-primary" type="button" ng-click="onUnAssignUsers()"><i class="fa fa-user-times" aria-hidden="true"></i> Unassign Users</button>
<button class="btn btn-primary" type="button" ng-click="onAssignUsers()"><i class="fa fa-user-plus" aria-hidden="true"></i> Assign Users</button>
<button class="btn btn-primary" type="button" ng-click="onUsers()"><i class="fa fa-user" aria-hidden="true"></i> Users</button>
</div>
I'm trying to put all the controls on the same row without using the class row 'cause this controls are near a column, that also have other controls. So my structure is actually this:
<div class="col-xs-12 col-md-4">
<button class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
Add</button>
<button class="btn btn-default" >
<span class="glyphicon glyphicon-plus"></span>
Remove</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-repeat"></span>
Refresh</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-fullscreen"></span>
</button>
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Hello world">
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
</div>
and this is a jsfiddle
How you can see the buttons are on the same line but the textbox go ahead, I don't know wham is wrong. Someone could help? Thanks.
Use this type of grid section and http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp and adjust screen size according to this link
<div class="row">
<div class="col-sm-4">
<button class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
Add</button>
<button class="btn btn-default" >
<span class="glyphicon glyphicon-plus"></span>
Remove</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-repeat"></span>
Refresh</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-fullscreen"></span>
</button>
</div>
<div class="col-sm-4">
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Hello world">
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
</div>
</div>
I'm trying to have several input/buttons in a single input-group. I'd also like the first input to be smaller than the other one. For now, it re-sizes the input but the other element stay in place, creating a gap.
What am I missing?
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-fw fa-exclamation"></i></span>
<input style="width:150px" type="text" class="form-control" name="command">
<span class="input-group-addon"><i class="fa fa-fw fa-comment"></i></span>
<input type="text" class="form-control" name="message">
<div class="input-group-btn">
<button type="submit" class="btn btn-success" name="update"><i class="fa fa-fw fa-pencil"></i></button>
<button type="submit" class="btn btn-danger" name="delete"><i class="fa fa-fw fa-times"></i></button>
</div>
</div>
</div>
I am using fontawesome with my buttons but they are not the same size as shown in the pictures. I have tried fa-fw options but that makes things even worse. Any ideas what I can try ?
<td>
<span title="Personel" class="btn btn-default btn-sm fa fa-user" />
<span title="Belgeler" class="btn btn-default btn-sm glyphicon fa fa-inbox" />
<span title="Kayıtlar" class="btn btn-default btn-sm glyphicon fa fa-folder" />
<span title="Araçlar" class="btn btn-default btn-sm fa fa-truck" />
<span title="Güncelle" class="btn btn-default btn-sm fa fa-pencil" />
<a class="modal-link" href="#Url.Action("Delete", "Members",new { #item.MemberId })"><span title="Sil" class="btn btn-danger btn-sm fa fa-trash" /></a>
</td>
http://fortawesome.github.io/Font-Awesome/examples/
here's the link..To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
hope this works..
It's because of the glyphicon classes in your HTML. http://jsfiddle.net/q6bpdsmt/1/
Fixed HTML:
<td>
<span title="Personel" class="btn btn-default btn-sm fa fa-user" />
<span title="Belgeler" class="btn btn-default btn-sm fa fa-inbox" />
<span title="Kayıtlar" class="btn btn-default btn-sm fa fa-folder" />
<span title="Araçlar" class="btn btn-default btn-sm fa fa-truck" />
<span title="Güncelle" class="btn btn-default btn-sm fa fa-pencil" />
<a class="modal-link" href="#Url.Action("Delete", "Members",new { #item.MemberId })"><span title="Sil" class="btn btn-danger btn-sm fa fa-trash" /></a>
</td>
I have set of buttons aligned fine on desktop but on mobile, when buttons wraps, second row sticks with first set of buttons and starts a little inside.
Please see following fiddle for the problem;
https://jsfiddle.net/u4dq9x38/
HTML:
<div role="toolbar" class="btn-toolbar bottom-buffer">
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
</div>
Is there any way to fix this?
Remove the btn-toolbar class, seems like it adds a space before the first element, so not designed to work for wrapping
You may need to add a bottom and right margin to each button individually
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.btn-toolbar>.btn:nth-child(1){
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div role="toolbar" class="btn-toolbar bottom-buffer">
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
</div>