I'm using reactstrap in my React component. I want to float-right a button but this doesn't seem to work:
<td class="col-md-4 clearfix">
<Button className="float-right" color="warning" size="sm"><FontAwesomeIcon icon={faTrashAlt} /> Delete</Button>
</td>
I also tested as told here with clearfix in parent, but didn't work:
<td class="col-md-4 clearfix">
<button className="btn btn-danger float-right">Delete</button>
</td>
Is it reactstrap or is there anything I can't see?
UPDATE
I found out that text-right works for texts, but not for button.
table{
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<table>
<tr>
<td class="col-md-4">
<button class="float-right" >Delete</button>
</td>
</tr>
</table>
</body>
</html>
Related
I'm trying to figure out how to seperate buttons which shown below using some spaces like margin with Bootstrap 4.1. I tried btn-toolbar on the wrapper div also wrapped each button with btn-group but no way to get a result.
Is there an easy way to handle this with Bootstrap 4.1 or Should i use some css?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button _ngcontent-c5="" class="btn btn-success" type="submit">Add</button><button _ngcontent-c5="" class="btn btn-danger" type="button">Delete</button><button _ngcontent-c5="" class="btn btn-primary" type="button">Clear</button>
</div>
</body>
</html>
Use the spacing utils. For example mr-1 means margin right 1 spacer unit...
<div class="container">
<button _class="btn btn-success mr-1" type="submit">Add</button><button class="btn btn-danger mr-1" type="button">Delete</button><button class="btn btn-primary" type="button">Clear</button>
</div>
Related: How do I use the Spacing Utility Classes on Bootstrap 4
I am new to Twitter Bootstrap. I am working on a webpage. It works fine when I use Bootstrap CDN. When I remove the Bootstrap CDN and try to use Twitter Bootstrap plugin, it seems unable to access the Bootstrap plugin. The webpage becomes a blank page where only words are displayed.
I have two questions here:
How to check if I have installed the Twitter Bootstrap plugin successfully. Here is the link I have followed to install it. I also follow the instructions in the documentation provided on the webpage.
How to check if the Twitter Bootstrap plugin is loaded successfully?
Here is the HTML code in my sample.
It works partially (some parts are working) when i remove the comment for meta name="layout"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Comment Home</title>
<!--meta name="layout" content="main"/-->
<!--meta name="viewport" content="width=device-width, initial-scale=1"-->
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
<h3 class="text-muted">Online Library System</h3>
</div>
<div class="jumbotron">
<h1>Kowledge is everything!</h1>
<p class="lead">For the new member please sign up today to get the privilledge.</p>
<p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Top book</h4>
<div class="col-lg-6">
<table class="table">
<tr>
<td>
<g:img dir="images" file="index.jpeg" width="110" height="140px"/>
</td>
<td>
<g:img dir="images" file="index2.jpeg" width="110" height="140px"/>
</td>
<td>
<g:img dir="images" file="index3.jpeg" width="110" height="140px"/>
</td>
</tr>
</table>
</div>
<div class="col-lg-6">
</div>
</div>
<div class="col-lg-6">
<h4>Regulation & Rules</h4>
<p>Penalty charges will be required upon any overdue. </p>
<p><i> *Charges will be diffence based on the book access level.</i></p>
<hr>
<h4>Operating Day</h4>
<p>Monday - Sunday : 8:00AM to 10:00PM</p>
<hr>
<h4>Address</h4>
<p>Perpustakaan Negara Malaysia (Ibu Pejabat)</p>
<p>232, Jalan Tun Razak,</p>
<p>50572 Kuala Lumpur, Malaysia.</p>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
Here is my main.gsp
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><g:layoutTitle default="Grails"/></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="${assetPath(src: 'favicon.ico')}" type="image/x-icon">
<link rel="apple-touch-icon" href="${assetPath(src: 'apple-touch-icon.png')}">
<link rel="apple-touch-icon" sizes="114x114" href="${assetPath(src: 'apple-touch-icon-retina.png')}">
<asset:stylesheet src="application.css"/>
<asset:javascript src="application.js"/>
<g:layoutHead/>
</head>
<body>
<div id="grailsLogo" role="banner"><asset:image src="grails_logo.png" alt="Grails"/></div>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
<div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading…"/></div>
</body>
</html>
I have a problem with bootstrap 3.3.5
I created a simple web page to test a new bootstrap. This is the code:
<!DOCTYPE html>
<html lang="id">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>BS Test</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<script type="text/javascript" src="script.js" charset="UTF-8"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<form class="form">
<div class="form-body">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
</form>
</div>
</div>
</body>
</html>
The input text with class form-control width more than browser width so the scrollbar at the bottom show..
and when the <!DOCTYPE html> remove, all very normal width.
how I can solve this problem with <!DOCTYPE html>?
with doctype:
and this without doctype:
please help, thank you
use
<div class="container">
instead of
<div class="container-fluid">
The problem is not in <!DOCTYPE html>. The issue is due to the missing of col-*.
Try the below code
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form class="form">
<div class="form-body">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
</form>
</div>
</div>
</div>
I have a button in which I am using bootstrap css, I have used unicode text for the button, and I want the unicode text to be font size at 30px and the button height to be 34px; but it seems like the text is not centering within the button.
Can anyone please tell me some solution for this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" style="height: 34px;"><span style="font-size:30px;">⇉</span></button>
</div>
</body>
</html>
You can achive this in 2 ways :
with line height
remove height
Update: Update / Add this in your css file
.btn{
outline:none !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.btn{
outline:none !important;
}
</style>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" style="height: 34px; line-height: 16px; vertical-align:middle"><span style="font-size:30px;">⇉</span></button>
<button type="button" class="btn btn-primary" style=" line-height: 34px; vertical-align:middle"><span style="font-size:30px;">⇉</span></button>
</div>
</body>
</html>
I'm using Twitter bootstrap's bootstrap.min.css for styling my phonegap app. But I do not see the desired UI of DOM elements affected by bootstrap. For example, in Base CSS it is shown that btn btn-primary classed button is colored blue and has some gradient on it. Looks nice. But this thing looks so ugly gray colored if I run this on emulator. Why is that so? Isn't bootstrap good for phonegap?
ADDING CODE AND SCREENSHOT
<!DOCTYPE HTML>
<html>
<head>
<title>Call the cab</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/custom.css" type="text/css">
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/heartcode.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
</head>
<body onload="onLoad();initialize()">
<div id="wrapper" class="container row-fluid ">
<div id="headerdiv" class="span12">
<header style="vertical-align:middle;">
<h1>App Name</h1>
</header>
</div><!--End of header-->
<div id="inputs" class="row-fluid">
<form action="file:///android_asset/www/pickup.html" onsubmit="return saveInputs()" class="form-inline form-actions">
<input type="text" id="pickup" onblur="unlockDestiny();codeAddress(this.value)" class="input-block-level"/>
<input type="text" id="destiny" onblur="codeAddress(this.value)" class="input-block-level"/>
<label class="checkbox">
<input type="checkbox" value="">
Remember this
</label>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div><!--End of inputs-->
</div><!--End of wrapper-->
</body>
</html>
Have you double checked that the path to the CSS files is correct, and that there's nothing in css/custom.css that is overriding the Bootstrap button styling?