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
Related
I am trying to figure out how to do something with a Bootstrap 5 button. I would like to be able to have the text label of the button left-justified and the FontAwesome icon right-justified. If I use a fixed-width button, how do I make sure it scales according to screen size along with all of the other content?
Here's my button now, but the icon is on the wrong side, and nothing is justified:
<button type="button" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="fa fa-angle-right"></i></span>
Learn More
</button>
Thank you in advance for your help, everyone!
Here you go...
button {
min-width: 20vw;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between">
<div class="col-10">Learn More</div>
<div class="col-2"><i class="fa fa-angle-right"></i></div>
</button>
I have an alert that has two problems, the first one is that it does not close when I click on the "X" button. I am using Bootstrap 5
This is the code
{{#if success}}
<div class="container p-4">
<div class="row">
<div class="col-md-auto mx-auto">
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{success}}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span area-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
{{/if}}
I was investigating and it seemed to be because I wasn't using the bootstrap script BUT I did have it at the time, so I looked for the most recent version and put it in the layout/main.hbs of my project, just below where the partials or other views are called (In <body>)
This is the script I found in the Bootstrap documentation, and it didn't work even with it
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body style="background-color:#2e2c25"> {{!-- #212529 navbar --}}
{{> navigation }}
{{{ body }}}
{{!-- Scripts --}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I tried to find some mistake of mine but I didn't find any that could affect that
The other problem I have with that alert is that the "X" for some reason doesn't look pretty, it looks in a white square, and there's a lot of spacing to the right, BUT this is minor, for now I'm only interested in the alert being able to close
REMOVE <span area-hidden="true">×</span>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title></title>
</head>
<body>
{{#if success}}
<div class="container p-4">
<div class="row">
<div class="col-md-auto mx-auto">
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{success}}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</div>
</div>
{{/if}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Try This Because you can use Bootstrap 5
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
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.
there is a collapse (with button 2) inside of a another collaspe (with button 1).
when parent is collapsed the background color of button 1 is blue (bg- primary) and when its not collapsed the backpround color is yellow (bg- warning). when we click button 2, the color stays yellow but when button 2 clicked again and its collapsed, the color of button 1 changes to blue. I want to button 1 stays yellow when it is not collapsed whether her child is collapsed or not.
thank you and sorry for my bad english.
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<div class="my-2">
<button class="btn btn-primary" id="btn1" type="button" name="button" data-toggle="collapse" data-target="#collapsebtn" aria-expanded="false" aria-controls="collapsebtn">
button 1
</button>
</div>
<div class="collapse" id="collapsebtn">
<div class="mb-2">
<button class="btn btn-dark btn-sm" type="button" name="button" data-toggle="collapse" data-target="#collapsebtn2" aria-expanded="false" aria-controls="collapsebtn2">
button 2
</button>
</div>
<div class="collapse border border-primary" id="collapsebtn2">
Lorem ipsum dolor text....
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#collapsebtn").on("show.bs.collapse", function() {
$("#btn1").removeClass("btn-primary");
$("#btn1").addClass("btn-warning");
});
$("#collapsebtn").on("hidden.bs.collapse", function() {
$("#btn1").addClass("btn-primary");
$("#btn1").removeClass("btn-warning");
});
});
</script>
</body>
</html>
add this code:
$("#collapsebtn").on("hidden.bs.collapse", function() {
if(!$('#collapsebtn').hasClass('show')){
$("#btn1").addClass("btn-primary");
$("#btn1").removeClass("btn-warning");
}
});
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 7 years ago.
Improve this question
This is my MyWebsite.html file
<DOCTYPE !html>
<html>
<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="MyWebsite.css" media="screen" type="text/css">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="top">
<div class="panel-footer row"><!-- panel-footer -->
<div class="col-xs-6 text-left">
<button id="home" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-home"></span> Home</button>
<img href="#" style="height:35px" src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png">
<img href="#" style="height:35px" src="http://www.mosa.nl/files/8613/8668/4836/available-in-app-store-badge.png">
</div>
<div class="col-xs-6 text-right">
<button id="ourApps" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-phone"></span> Our Apps</button>
<button id="contactUs" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Contact Us</button>
</div>
</div><!-- end panel-footer -->
</div>
</body>
</html>
My CSS wont really matter because I've cleared it many times because it did not work.
When I open the website in Chrome, the CSS simply does not kick in and does not take effect. For example, I would do "text-decoration: none;" for all <a> tags, but still, there would be an underline when I hover over the text. Or, when I try to change the text color, it still stays black. Why doesn't it work?
You will have to place your own CSS file
<link rel="stylesheet" href="MyWebsite.css" media="screen" type="text/css">
below
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
The simple reason is that your CSS properties in MyWebsite.css gets overrided by the CSS properties in bootstrap.min.css file.