I am using Bootstrap version 4.1, there are no custom styles in my page. Here is the code for displaying buttons:
<div class="btn-group" role="group" aria-label="">
<a class="btn btn-primary" type="button" href="{% url 'website_admin_create_user' %}">
<i class="fas fa-user-plus"></i> {% trans 'Add user' %}
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#listFilter" aria-expanded="false" aria-controls="listFilter">
<i class="fas fa-filter"></i> {% trans 'Filters' %}
</button>
The problem is that, style for a tag is not working, despite I can see it in browser inspector. What might cause such behavior?
You are using a button css class on an <a> tag just switch it to <button> no need for an <a>
Change your line to
<a href="{% url 'website_admin_create_user' %}">
<button class="btn btn-primary">
<i class="fas fa-user-plus"></i> {% trans 'Add user' %}
</button>
</a>
instead of
<a class="btn btn-primary" type="button" href="{% url 'website_admin_create_user' %}">
<i class="fas fa-user-plus"></i> {% trans 'Add user' %}
</a>
Found the problem: type="button" caused this mess, just remove it and everything work as expected.
Related
The Dropdown menu is supposed to dynamically populate a list of languages. I tried using ngFor to do this but none of the list items appear in the dropdown menu except for the first one:
<nav class ="navbar navbar-light bg-light fixed-top">
<div *ngIf="data.enableLanguageList && data.languageList?.length > 0" class="row">
<div ngbDropdown class="col d-inline-block">
<button ngbDropdownToggle
class="btn btn-success btn-lg dropdown-toggle"
id="languageSelect">
<strong> Lang - {{ data.currentLanguage }} </strong>
</button>
<div ngbDropdownMenu
*ngFor="let lang of data.languageList;"
class="dropdown-menu"
aria-labelledby="languageSelect">
<button ngbDropdownItem
class="dropdown-item"
[ngClass] = "[lang === data.currentLanguage ? 'active' : '']"
(click) = "setLanguage(lang)">
<h5> <strong> {{ lang }} </strong> </h5>
</button>
</div>
</div>
</div>
</nav>
You applied ngFor to ngbDropdownMenu while needed to create in a loop several ngbDropdownItems
<div ngbDropdownMenu
class="dropdown-menu"
aria-labelledby="languageSelect">
<button ngbDropdownItem
*ngFor="let lang of data.languageList;"
class="dropdown-item"
[ngClass] = "[lang === data.currentLanguage ? 'active' : '']"
(click) = "setLanguage(lang)">
{{ lang }}
</button>
</div>
ul, li approach can be used for ngbDropdown
<div ngbDropdown class="dropdown">
<button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle"
id="dropdownMenuButton" aria-expanded="false">
Project A
</button>
<ul ngbDropdownMenu aria-labelledby="dropdownMenuButton" >
<li *ngFor = "let lang of data.languageList">
<a class="ngbDropdownItem" href="#" style="all:unset">{{lang}}</a>
</li>
</ul></div>
I have a Bootstrap 4 navbar where I cannot align the center elements on all devices (or any for that matter). Currently, there is an image on the left of the navbar and I am currently using padding to push the rest over but this is an ugly hack at best.
What I think needs to be done is the navbar needs to stretch all the way across the top of the page, instead of only to the image. That way I can align the elements to the center using something like a text-justify class.
What is the best way to align this?
HTML:
<!--Site header-->
<header class="site-header" id="top-bar">
<!-- Navbar-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top ml-auto">
<div class="container col-md-12">
<!-- Image on the left of the navbar -->
<div class="navbar-nav mr-auto" style="padding: 0 100 0 20;">
<a href="{% url 'landing' %}">
<img id="header-img" src="{% static '/bg/WEBSITE-LOGO.png' %}"/>
</a>
</div>
<button aria-controls="navbarToggle"
aria-expanded="false"
aria-label="Toggle navigation"
class="navbar-toggler"
data-target="#navbarToggle"
data-toggle="collapse"
type="button">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links I want aligned to center of navbar -->
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav m-auto">
<div class="header-icon-container d-xs-none">
<a class="nav-item nav-link d-xs-none" href="{% url 'overview' %}" id="overview">
<i class="fas fa-home fa-2x"></i>
<span>Home</span>
</a>
</div>
<div class="header-icon-container">
<a class="nav-item nav-link" href="#" id="drills">
<i class="fas fa-dumbbell fa-2x"></i>
<span>Drills</span>
</a>
</div>
</div>
<!-- Navbar Right Side - more links -->
<div class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<div class="btn-group text-right">
<button class="account-dropdown"
data-toggle="dropdown"
type="button">
<img class="account-header-img" src="{{ user.image.url }}">
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<form action="{% url 'overview' %}"
class="small-form"
method="get">
<input class="btn btn-link link-white"
type="submit"
value="Test stats">
</form>
</li>
<li>
<form action="{% url 'categories' %}"
class="small-form"
method="get">
<input class="btn btn-link link-white"
type="submit"
value="Categories">
</form>
</li>
<li>
<form action="{% url 'profile' %}"
class="small-form"
method="get">
<input class="btn btn-link link-white"
type="submit"
value="Update profile">
</form>
</li>
<li>
<form action="{% url 'logout' %}"
class="small-form"
method="get">
<input class="btn btn-link link-white"
type="submit"
value="Logout">
</form>
</li>
</ul>
</div>
{% else %}
<a class="nav-item nav-link ml-auto" href="{% url 'login' %}">
<i class="fas fa-sign-in fa-2x"></i>
<span>Sign in</span>
</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
Option 1:
Make your navbar 100% with, create a mobile and a desktop cas (d-none d-md-block) Remove the toggle div and you should have 3 div with content insider your nav. Make it display: flex with justify-content: space-around. => 1 div (logo) is left , 2 div (links) center, 3 div (forms) right
Option 2:
log + wrapper div wich takes the rest of the space + 2 more divs each 50% and make them text-align: center, text-align: right (poor solution)
Option 3: Navbar 100%, position relative. Img position: absolute; left: 0;, ...
I'd go for solution No.1
I have a button group but the middle button is a link so it should b a tag (i can change its button and use js to navigate but I prefer not to )
here is the code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="btn-group nospiner">
<button type="button" class="btn btn-warning yekan create-wallet"><i class="mdi mdi-arrow-down-bold"></i> down</button>
center
<button type="button" class="btn btn-warning yekan ">up <i class="mdi mdi-arrow-up-bold"></i> </button>
</div>
here is the result
as you can see the middle btn has a border and gradient, how can I change it so it would look like buttons? i've tried adding border:none to all .btn and button group it didn't work
Simply remove type=button from the a
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="btn-group nospiner" >
<button type="button" class="btn btn-warning yekan create-wallet"><i class="mdi mdi-arrow-down-bold"></i> down</button>
<a href="link.php" class="btn btn-warning yekan pjax" > center</a>
<button type="button" class="btn btn-warning yekan " >up <i class="mdi mdi-arrow-up-bold"></i> </button>
</div>
I'm using Bootstrap 3 and I have a line of buttons. One of them is a <a> button, or: <a class='btn btn-default' role='button'>Button here</a>; the rest are <button> elements with the same classes.
I was expecting to have them all correctly aligned and spaced, as seen in Bootstrap's examples, however, the result was this:
As you can see, the first button, the one specified as <a> doesn't have the right margin with the next button. What can be causing this?
Here's my HTML:
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
The anchor tags and buttons are correctly spaced because they are inline-block- not sure how there is no spacing between the a and the button you got over there.
Try floating them and then you can remove the space between them if you want to- and set the required margin if needed.
They must be correctly aligned and spaced by default- see below snippet:
a.btn, button.btn {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<body>
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
</body>
See what happens when we float them:
a.btn, button.btn {
margin: 0;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<body>
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
</body>
Thanks for taking the time.
I implemented css bootstrap and got a nice fixed menu on top of my one page scrolling website. Just to make sure users instinctively see the navigation, I copied the menu below the header as well. Works well on every browser I have but IE 10.
Here's the code:
<div class="text-center">
<button type="button" class="btn btn-default btn-info">
123123
</button>
<button type="button" class="btn btn-default btn-warning">
13132123
</button>
<button type="button" class="btn btn-default btn-danger">
12313123
</button>
<button type="button" class="btn btn-default btn-success">
ЗА 132123123
</button>
<button type="button" class="btn btn-default btn-info">
12312313
</button>
<button type="button" class="btn btn-default btn-warning">
123123123
</button>
</div>
The div's are named like this:
<div class="news-holder cf" id="news">
They are closed and everything. I am completely new to web design so I don't know what's happening. It's bizarre.
As stated by #recursive a link should not be in a button.
Further more if this is a menu you most certainly should not be using button and avoid inline styles.
also check that you have div's on page with the id of news, articles etc.
if you need further assistance please supply more of your code.
try this.
<nav>
<ul class="text-center">
<li class="btn btn-default btn-info">
123123
</li>
<li class="btn btn-default btn-warning">
13132123
</li>
<li class="btn btn-default btn-danger">
12313123
</li>
<li class="btn btn-default btn-success">
ЗА 132123123
</li>
<li class="btn btn-default btn-info">
12312313
</li>
<li class="btn btn-default btn-warning">
123123123
</li>
</ul>
</nav>
<a> elements are not allowed inside of <button> elements.
http://www.w3.org/TR/html5/forms.html#the-button-element
there must be no interactive content descendant.
That's likely to be related to the problem. Since anchors have been well supported for decades.