I'm trying to get some buttons to work in Bootstrap 5:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-12">
<a class="btn-primary">0000</a>
<button class="btn-primary">0000</button>
</div>
</div>
</div>
But the styles aren't being applied correctly, the buttons appear to be missing the rounded corners and the padding:
I'm only loading the styles from <link href="css/bootstrap.min.css" rel="stylesheet"> which I'm pretty sure is what I always do.
Change class class="btn-primary" to class="btn btn-primary"
Need to btn align with other custom bootstrap classes. Read about buttons here
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<a class="btn btn-primary">0000</a>
<button class="btn btn-primary">0000</button>
</div>
</div>
</div>
It misses the "btn" class.
asdasda
you forgot the btn class
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-12">
<a class="btn btn-primary" role="button">0000</a>
<button class="btn btn-primary">0000</button>
</div>
</div>
</div>
https://getbootstrap.com/docs/4.5/components/buttons/
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Button tags
The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).
When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.
Related
I have a 'right-float' classed div placed inside a 'w-100' classed div. Inside the right-floated div I want to display at the top a button with 3 points inside (...) and at the bottom another Icon (see images below). So I added 'h-100' class to the float-right div and created two divs inside it: the first one with the ... button inside and the second one with 'align-bottom' class.
Problemthe second div does not stay at the bottom, I think because h-100 is not working as expected
Observed behaviour
Expected behaviour
HTML Tree
Example snippet
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="clearfix w-100 border border-primary">
<div class="float-right h-100">
<div class="clearfix">
<div class="float-right">
<button class="btn btn-sm btn-primary">...</button>
</div>
</div>
<div class="align-bottom clearfix">
<div class="float-right">
<button class="btn btn-sm btn-primary">BTN2</button>
</div>
</div>
</div>
<div>
<div>FOO</div>
<div>FOO2</div>
<div>FOO3</div>
</div>
</div>
</body>
</html>
h-100 is working as expected, because the height is 100% of the childs inside. It is not usable to stretch a div to its parent height.
You could use flex, to make it work right
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="d-flex align-items-stretch border border-primary">
<div class="flex-grow-1">
<div>FOO</div>
<div>FOO2</div>
<div>FOO3</div>
</div>
<div class="d-flex flex-column bg-danger">
<div class="flex-grow-1">
<button class="btn btn-sm">...</button>
</div>
<div>
<button class="btn btn-sm">BTN2</button>
</div>
</div>
</div>
</body>
</html>
I have an incomprehensible problem in our web application. I have reduced the page to a minimum, here it is:
https://www.aschemeier.net/bug1.html
Everything works fine on the desktop. When I test the page either in the Firefox browser (screen size set to iPhone) or on an Android smartphone (Chrome browser), display errors occur when I open the drop-down menu at the bottom. In the mobile emulation on the desktop the touch input is registered after a few clicks about 200px further up, on the smartphone the picture jumps up and you can't scroll down anymore. If I reduce the height of the red framed container it works from a certain limit. If I don't open the menu to the left (dropleft) there are no problems either, but I need this function at this point.
I hope someone can help me. Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Alle globalen, externen Javascript Dateien -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>bug sample</title>
</head>
<body>
<div class="container mb-5 mt-4">
<div class="card">
<div class="card-body" style="height:1000px; border:2px solid #f00;"></div>
</div>
<div class="mt-4">
<div class="row">
<div class="col-md-1 col-4">AB</div>
<div class="col-md-2 col-4">AB</div>
<div class="col-md-1 col-4">
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I would handle it by assigning an expander class into the parent row and toggle expander class on each button click.
Sample CSS:
.expanded-row {
min-height:30vh;
}
Toggling the class:
$( ".dropdown-toggle" ).click(function() {
$( ".row" ).toggleClass( "expanded-row" );
});
I hope it helps.
I'm quite new to learning Bootstrap, but I have some trouble aligning my icon on the same line as my .
What it looks like right now..
I've been trying to fix it within the container, but also with rows, columns and several aligning methods.
This is my code right now:
<div class="container">
<div class="row">
<div class="col">
<h1 class="mb-3 ml-5">Products</h1>
<button class="filterIcon navbar-toggler float-right align-self-start" type="button">
<i class="fa fa-list"></i>
</button>
</div>
</div>
Can someone show me what I'm doing wrong? I can't really seem to find the answer in documentation as well. If someone does have documentation, please show me so I can learn from it :).
Thank you!
You can use a flex layout to get the items aligned side by side and in the center vertically. For bootstrap, this means using the classes d-flex and align-items-center
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<div class="container">
<div class="row">
<div class="col d-flex align-items-center">
<h1 class="m-0" style="flex-grow:1;">Products</h1>
<button class="filterIcon navbar-toggler" type="button">
<i class="fa fa-list"></i>
</button>
</div>
</div>
I have properly linked the online bootstrap style sheet in html, but when I open the link, the 'Click here!' doesn't come in a button. How do I solve this?
Here's my code:
using btn-primary
This is the output:
No button there
To get the button, the <button> tag is used. And type is set on the basis of necessary like button, submit.
<div class="container">
<button type="button" class="btn btn-primary">Primary Button</button>
</div
For further detail, you can visit to https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
set button not div
<button type="button" class="btn btn-primary">Primary</button>
see here:https://getbootstrap.com/docs/4.0/components/buttons/
BUT IT WORK WITH DIV check if you have bootstrap script
<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.0/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.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="btn btn-primary">Primary</div>
</div>
It should work with a div as well as button or anchor tag just try.
<div class="btn btn-primary">Primaray</div>
OR
<button type="button" class="btn btn-primary">Primary</button>
OR
Primary
I am trying to make a grid of buttons using bootstrap, however, when I change screen size on a desktop the layout jumps to the new position, i have seen in other questions that the answer was to change it to continer-fluid and row-fluid within the div, however this did not help.
My CSS and HTML is
.top-buffer
{ margin-top:10px;
margin-bottom: 10px;
}
<!-- Turn off zooming on Mobile page-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<p> This is the nav bar</p>
</div>
</nav>
<div class="jumbotron">
<div class="container-fluid">
<div class="row-fluid top-buffer"></div> <!-- this row is added in for iPhone Spacing. -->
<div class="row-fluid top-buffer"><!-- open the first row int he grid-->
<div class="col-md-4 col-md-offset-4"> <div class="col-sm-4 col-xs-4" >
<form action="page2JobMainMenu.html">
<button type="submit" class="btn btn-default center-block"> Job </button>
</form>
</div>
<div class=" col-sm-4 col-xs-4">
<form action= "page3CreateQuote.html">
<button type="button" class="btn btn-default center-block">
Quote </button>
</form>
</div>
<div class="col-sm-4 col-xs-4">
<form action="page4FinanceMainMenu.html">
<button type="button" class="btn btn-default center-block">
Finance</button>
</form>
</div>
</div><!--close off the cold md 4 div-->
</div><!-- Close the first row-->
</div><!-- Close the Fluid Container -->
</div><!--Close the Jumbotron-->
Any help is much appreciated.
Thanks
Your code basically works as is. Using col-xs-4 ensures that at even the smallest resolution the buttons will still retain their 3-column layout. It's not necessary to use col-md-4 in this instance, and .row-fluid has not been in use since Bootstrap 2. .center-block is also unnecessary as .btn-block is designed to treat Bootstrap Buttons as full-width elements.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<form action="page2JobMainMenu.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
<div class="col-xs-4">
<form action="page3CreateQuote.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
<div class="col-xs-4">
<form action="page4FinanceMainMenu.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
</div>
</div>
Note: If you can avoid using the <button> within a <form> you can make use of Bootstrap's .btn-group component for greater functionality.