I want make a list with a few names.
But i need put all in same size.
How i can make that background with same size using bootstrap?
<ul class="list-unstyled">
<li>
<a class="btn btn-xs btn-warning">
<span >Loren ipsum</span>
</a>
</li>
<li>
<a class="btn btn-xs btn-warning">
<span >Lorem ipsunis</span>
</a>
</li>
<li>
<a class="btn btn-xs btn-warning">
<span >Lorem ip</span>
</a>
</li>
</ul>
Code in jsfiddle
http://jsfiddle.net/novasdream/d3fkoeee/
You'll need to set a width or min-width on those elements. Min-width is a little safer if the button content has the potential to get long. Something like this in your css would do it:
.btn-xs {
min-width: 15em;
}
Note: 1em is roughly the width of one "M" character in the font in use, so I'd recommend looking at your actual text content to find an appropriate width. (15 is just a number I grabbed out of the air.)
Also, bear in mind that this style, if authored as above, will apply to any .btn-xs elements. If you want finer-grained control, you'll probably want to put a specific class on either these buttons or their containing list, so you can target only this instance.
Make the .btn links display:block so that they become 100% the width of the parent li. Size your ul as required.
.list-unstyled li a.btn {display:block;}
http://jsfiddle.net/d3fkoeee/4/
a better way would be to add an id to the link a like so http://jsfiddle.net/1shzc3bh/1/ and add a width there
e.g. a#button{width:100px;!important
}
Related
I'm using the NgbDropdown component in my Angular 2 application. It is working fine, however I want to remove the arrow that is displayed on the right side of the button.
<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
Dropdown Image
Solution
Simply add the following CSS style to override the default style of the .dropdown-toggle::after pseudo-element:
.dropdown-toggle::after {
display:none;
}
Why?
By default bootstrap adds the arrow to the dropdown component via the ::after pseudo-element.
Doing this removes it.
Here is a LIVE DEMO demonstrating it.
How do you work it out?
Using chrome dev tools you can inspect the element:
We can see from the above that there is a style set for a pseudo-element ::after on the .dropdown-toggle class. Let's go and change the properties of the element! For this purpose we are changing the display property to none:
The pseudo-element is no longer there!!:
add the following style to override the default one
.dropdown-toggle::after{
content:initial
}
LIVE DEMO
In Bootstrap 4, you can remove the dropdown arrow which is called caret by declaring a $enable-caret SASS variable and setting it to false:
$enable-caret: false;
This overrides the default value of true set in the Bootstrap's _variable.scss:
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
But keep in mind that it completely removes corresponding CSS styles. So, it's the best approach if you don't need carets globally and want to decrease your CSS payload.
I found you can do this within your app on a conditional basis by creating a custom class in styles.css
Note that using "!important;" is required or else elements at the bottom of the screen will still have a caret that points upward:
.remove-caret::after {
display: none !important;
}
html example with the custom class and replacing the icon with an ellipsis:
<div style="margin: auto; text-align: center">
<ul class="navbar-nav" [style.display]="'flex'">
<li class="nav-item d-inline-block" ngbDropdown>
<a class="nav-link dropdown-toggle remove-caret" style="color:#000; font-size: 1.1rem" ngbDropdownToggle href="#" role="button" aria-haspopup="true"
aria-expanded="false"><fa-icon [icon]="faEllipsisH" class="ml-2"></fa-icon></a>
<div ngbDropdownMenu aria-labelled-by="menuDropDown">
<a ngbDropdownItem href="#" (click)="test()">Test</a>
</div>
</li>
</ul>
</div>
I am using Bootstrap 4. I tried to remove the arrow in dropdown.
The answers I found for Bootstrap 3 do not work any more.
The jsfiddle is here.
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
Simply remove "dropdown-toggle" class from the element. The dropdown will still work if you have the data-toggle attribute as follows
<button role="button" type="button" class="btn" data-toggle="dropdown">
Dropdown Without Arrow
</button>
overriding .dropdown-toggle class styles affects all dropdowns and you may want to keep the arrow in other buttons, that's why this looks to me the simplest solution.
Edit: Keep dropdown class if you want to keep border styling
<button role="button" type="button" class="btn dropdown" data-toggle="dropdown">
Dropdown Without Arrow
</button>
With css, you could just do that:
.dropdown-toggle::after {
display:none;
}
I don't recommend any of the existing answers because:
.dropdown-toggle has more styling than just the caret. Removing the class from the element causes styling issues.
Overriding .dropdown-toggle doesn't make sense. Just because you don't need a caret on some particular element, doesn't mean you won't need one later.
::after doesn't cover dropdown variants (some use ::before).
Use a custom .caret-off in the same element as your .dropdown-toggle element:
.caret-off::before {
display: none;
}
.caret-off::after {
display: none;
}
Some have said they needed to add !important but YMMV.
remove the dropdown-toggle class
.dropdown-toggle::after {
content: none;
}
You can also try this
If you are interested in replacing the arrow with another Icon (such as, FontAwesome) you would just need to remove the border on the pseudo element of .dropdown-toggle
.dropdown-toggle::after { border: none; }
I was using the accepted answer for quite a while in my project but just now stumbled across a variable used by bootstrap:
$enable-caret: true !default;
If you set this to false then the caret will be removed without having to do any custom code.
My project was Ruby/Rails so I was using the bootstrap-rubygem. I changed the variable by importing a custom-variables.scss with the above variable set to false in my application.scss BEFORE the bootstrap.scss file/files.
If you remove fit the dropdown-toggle class as below, all the dropdown buttons on your system will no longer have the caret.
.dropdown-toggle::after {
display:none;
}
But maybe that's not what you want, so to remove just the specific button, we're going to insert a class called: remoecaret, and we'll fit the class: dropdown-toggle as follows:
.removecaret.dropdown-toggle::after {
display: none;
}
and our html looks something like:
<div class="btn-group">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle removecaret" data-toggle="dropdown">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i> Edit</li>
</ul>
</div>
Boostrap generates this using the CSS border:
.dropdown-toggle:after {
border: none;
}
If you wanna exactly only in this bootstrap button class, make:
.btn .dropdown-toggle::after {
display:none;
}
have you tried tag="a" within the class? it hides the arrow without further css.
Add no-arrow to drop-down toggle class declaration
This works on bootsrap4 and ng-bootstrap.
.dropdown-toggle:after {
display: none;
}
I have the following structure within a bootstrap document -
<div class="col-lg-6 col-sm-6>
<ul class="stdULGrey st_tabs_ul">
<li class="st_li_first st_li_active">
<a href="#view_1" class="st_tab st_tab_first st_tab_active">
<span class="icoMore icoA"></span>
<span class="tabText">WANT TO KNOW MORE?</span></a>
</li>
<li>
<a href="#view_2" class="st_tab">
<span class="icoWhereTo icoA"></span>
<span class="tabText">WHERE TO FIND US?</span>
</a>
</li>
</ul>
The span element - icoMore contains a background image - which I'd like to respond to the full width of thebootstrap parent - I have tried the following code -
.icoMore{background:url(../img/logos%20and%20icons/Wanttoknow_Icon_Off.png) no-repeat; min-width:100%; min-height:auto; display:block; }
But it displays at zero width and height - can anyone advise a solution?
Add display: block to span. It should be enough.
You'll need to add any character into your <span>, even a space, like:
<span> </span>
Check this fiddle:
http://jsfiddle.net/dimaspante/5j6vt0mk/
I have a JSFiddle set up here showing what is currently happening: http://jsfiddle.net/YX7T6/1/
This is the code:
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>
CText
</li>
</ul>
<div class="pull-right">
<button class="btn btn-default btn-lg"> button1 </button>
<button class="btn btn-default btn-lg"> button2 </button>
</div>
</div>
</nav>
<div class="container">
<a href="#">
<img src="http://placekitten.com/g/150/150" class="img-thumbnail" style="margin-top:-130px">
</a>
</div>
I'm trying to get the image to show on top of the navigation not behind it as it is now. I've tried changing the z-index of the image to something higher but nothing has changed. What should I try next?
As the other answers mentioned, z-index only works on elements that have position. Applying z-index to an element that has no position will simply be ignored.
img {
position: relative;
z-index: 1;
}
Will make the browser recognize the z-index attribute, and place the image above the nav menu. In the future whenever you're having issues with z-index not being recognized, the first thing you should do is check whether the elements in question have position.
However, in this specific case, rather than messing with negative margins, it may be simpler to do:
img {
position: absolute;
top: 0;
}
Just add position like position:relative; to your element
if you plan to control it's z-index property
fiddle
Alternatively, use position: absolute on the img and skip the z-index stuff.
http://jsfiddle.net/YX7T6/8/
I am trying to adapt an excellent slideout panel example from here.
adapted code is here
I like to have different icons for hide/expanded state (something like > when hidden, < when expanded). Is it possible by changing the above code. Ultimately I may use icons from Font-Awesome
Thanks.
EDIT:
To be clear on the changes from the original version, the code I plan to use doesn't use the same markup. This is to avoid hindering the history. Please use the version http://codepen.io/jetpacmonkey/pen/ktIJz
<header class="main-header">
<label for="main-nav-check" class="toggle-menu">
☰
</label>
<h1>cssPanelMenu</h1>
</header>
You can using pseudo elements (IE8+). Replace the icon with a span with class .icon and then hook up a :before style to show the content based on whether the checkbox is checked.
Demo
HTML
<label for="main-nav-check" class="toggle-menu">
<span class="icon"></span>
</label>
CSS
#main-nav-check:checked ~ .page-wrap .icon:before {
content:"<";
}
#main-nav-check ~ .page-wrap .icon:before {
content:">";
}
Just change:
<a href="#main-nav" class="open-menu">
☰
</a>
<a href="#" class="close-menu">
☰
</a>
to this:
<a href="#main-nav" class="open-menu">
>
</a>
<a href="#" class="close-menu">
<
</a>
Demo: http://codepen.io/anon/pen/nImtd