I am using Bootstrap CSS in a ASP.NET core app.
Any tips on improving the appearance of this drop down? better spacing, and text look better. Thanks,Peter
This is my cshtml code :
<div class="container">
<div id='dropdown' style="width:40%">
#Html.DropDownList("drop", (MultiSelectList)ViewBag.Categories, "Select"))
</div>
<div id='calendar' style="width:65%" />
</div>
https://silviomoreto.github.io/bootstrap-select/
try using Bootstrap Select to improve the apperance of dropdown Menu in Bootstrap
Related
I'm using bootstrap panels for the first time, and my panel header and panel body are shorter than my panel which looks a bit strange. I'm a bit stuck as to what's actually happening as the bootstrap styling is being called.
Code below:
<div class="software well row hidden">
<div class="info">
<div class="panel panel-success">
<div class="panel-heading"><h3>This INSERT NAME is available to download!</h3></div>
<div class="panel-body">
Or if you've tried that and experienced issues then please fill out the additional info box below and a member of the service desk will be in touch.
</div>
</div>
</div>
</div>
From the Comments:
Hmm. I [can't reproduce](https://jsfiddle.net/pbdevch/6t9afwdu/) the error in a JSFiddle. Look if your CSS is overwritten by some theme or by your own styles.
Response:
#chade that was it thanks - it was a css style that was overwriting my panel and not my panel-heading as I was expecting!
I'm answering this so other users with the same problem can easily determine the answer that was provided.
If I break down a navigation menu (navbar) into components such as this:
<div class="navbar">
<app-navbar-brand></app-navbar-brand>
<app-navbar-menu></app-navbar-menu>
</div>
or:
<div class="navbar">
<div class="navbar-brand">
<!-- navbar-items -->
</div>
<div class="navbar-menu">
<div class="navbar-start">
<!-- angular components -->
</div>
<div class="navbar-end">
<!-- angular components -->
</div>
</div>
Some padding and other properties seem to work incorrectly in the menu.
If I keep the entire navbar in one component, I don't see this problem.
Any idea what I'm doing wrong in Angular? Or is there something i've missed? It looks like the SASS is loaded in a weird way, but I cannot figure out why this is.
I ran into the same issue when using Bulma with Angular. The problem is because Bulma is built entirely using Flexbox. Angular component generated (pseudo) HTML tags, which are not using flexbox. I tried adjusting the component CSS style (i.e display, and width properties) seem to help, but not perfect. Hope that helps.
I have been using twitter bootstrap for a year, its the one of those things which -"just works" . With release of twitter bootstrap3 its become even better and awesome with its mobile first approach. But i am not able to understand how to use it properly with mobile first approach.
Earlier there was .span* and .offset* class but now there are .col-xs-* .col-md-* .col-sm-* .col-lg-* and .col-xs-offset-* .col-md-offset-* classes respectively. Even now 'it-just-works' using .col-md-* i want to know the right way to use all these classes so as to not just use them but use them correctly to get most out of bootstrap3.
Thanks.
I found these links very helpful:
http://www.helloerik.com/bootstrap-3-grid-introduction
http://bootply.com/bootstrap-3-migration-guide
Currently I'm using Bootstrap 3 for web development, how I'm using the Grid system is,
<div class="container">
<div class="row">
<div class="col-md-9"> <%--this for 9X3 grid--%>
<div class="row">
<div class="col-md-6"> <%--this for 6X6 inner grid--%>
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
I found (a) Bootstrap's own documentation helpful here, but also a (b) lynda.com topic in migrating to Bootstrap 3. Specifically, see "Dealing with grid changes"
(a) http://getbootstrap.com/css/#grid-offsetting
(b) http://www.lynda.com/course20/Bootstrap-tutorials/Bootstrap-3-New-Features-Migration/138156-2.html
I'm an experienced software engineer just getting into web dev and I'm having some issues getting bootstrap 3 row-fluid to work correctly. Basically, I'm trying to get a side navigation bar and an angular application to work together in a fluid layout, but when I attempt to use row-fluid, it is stacking the two elements instead of putting them side by side. Here is the code:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li class="nav-header">Administer</li>
<li class="active">Users</li>
<li>Devices</li>
</ul>
</div>
<div class="span9">
<div ng-view></div>
</div>
</div>
</div>
Also interesting is if I change row-fluid to row, the same behavior persists. Changing spanX to col-lg-X fixes it, but I lose the fluid layout. any ideas?
Use .col-md-* instead of .span*
Bootstrap 3 is responsive by default, so there is no need for the -fluid. you can just use row and container.
And the span classes you are using are from bootstrap 2.x not 3. you need to use something like col-lg-4 or col-xs-4. check out the bootstrap 3 docs for more info on this.
See here for more info on the Bootstrap 3 grid system
I am new to bootstrap and I watched some tutorials (ASP.NET).
I created a button with a CssClass:
But the button looks bugged? It must look like the first button, but my button is the second:
I have no clue what I am doing wrong!
This is my container:
<div class="container">
<div class="row">
<div class="span2">...</div>
<div class="span8">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="span2">
<asp:Button ID="btnSignup" runat="server" Text="Button" CssClass="btn btn-large btn-success" />
</div>
</div>
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br/> All you get is this message and a barebones HTML document.</p>
</div>
Did you modify Bootstrap CSS in any way or are you loading any additional CSS?
What browser are you seeing this in?
It would help if you posted your code on jsfiddle.net
Anyway, this issue happens when you remove background-image from the normal (mouse out) button state of the .btn-success class. Bootstrap uses transition to shift background-position by 15px in hover state and this is what you end up with.
Found the answer!
I downloaded the customized bootstrap files with full features via this link:
http://twitter.github.io/bootstrap/customize.html
Then I am getting that bug.
But when I download bootstrap from below, and replace the css file from the customized bootstrap with the new downloaded css:
http://twitter.github.io/bootstrap/
Then I don't have any bugs!
Just to complement your own answer, since you are using bootstrap + Visual Studio, you may have to know that there's a bug on Visual Studio that edits some CSS3 properties.
You should keep an backup from bootstrap.css, because this issue may happen again when editing an .aspx, .htm that uses this stylesheet.
I just know the bug, but I don't have any solutions for it