I have made 2 Divisions out of bootstrap property <div class="col-md-12" > on the same page. In the first one, I have added a different Background and some hover property, now in the second one I have to make a "Sign Up" Div but with other properties with the same <div class="col-md-12" > ie. Full page width row. But the changes are happening on both the Divisions.
Can somebody Help ?
I am using Visual Studio 13 for aspx webpage.
Sorry if it is a silly question.
Thanks In Advance.
You can append another class to the ones you want to style:
<div class="col-md-12 styleme">
Content
</div>
CSS:
.styleme {
background-color: #000;
}
This way, you can style the div using your own custom class as opposed to overriding BootStrap's native one.
NOTE: ensure to place the custom style in your own custom CSS file and ensure it is referenced in your site AFTER the BootStrap CSS file.
In my app I have situations where I need to use what I and some frameworks call a "post-link". Basically a link that might be used to delete (or post) data with it and as such must actually be a a form.
I'm using bootstrap as my base css and have assigned the link class to the submit button to give it a link appearance. When using in a table with another, ordinary, <a> tag next to it I can't seem to get the two links to align alongside each other, no matter how wide I make the viewport or table cell.
Here is a fiddle to demonstrate: http://jsfiddle.net/miocene/dbTqC/670/ I'm referring to the pencil and cross icons as my normal link and post-link.
Any ideas how I can get them to align side-by-side?
You either need to define a width for the td or use this. I gave the div in the td a class .lol
DEMO
<td>
<div class="btn-toolbar inline lol">BLAH BLAH</div>
</td>
.lol *{
display:inline-block;
float:left;
width:50%;
}
.lol .btn{
padding:2px;
}
I'm trying to make my little icons on this page (http://www.alinewbury.com/contact.html) into links.
They're each in a div separately, but whenever I try to do:
<div class="social-btn pinterest"></div>
It doesn't seem to work! How can I link these icons to the respective websites?
The Div is supposed to be inside the Anchor tag.
Check Anchor tag usage
To make the icon click able you have to fix some issues. First of all your icons are not really linked. you can see the Hand cursor because the property defined in the class .social-btn
To make a icon clickable you should follow this approach. put the text inside a tag a better approach also you have to change the font-size:0
.social-btn a
{
padding: 22px;
font-size: 0;
}
your HTML should be like this.
<div class="social-btn pinterest">
pinterest
</div>
I'm working with Bootstrap's Typeahead and adding the input like so:
<div class="row">
<div class="span12">
<form class="centered">
<input id="main_search" type="text" class="search-query my-search" data-provide="typeahead">
</form>
</div>
</div>
I have the following CSS code which essentially just expands my search box to be "long" and in the middle of the span:
.centered {
text-align:center;
}
/* Make the main search box wider */
.my-search {
width: 80%;
}
My question is, when I use the Typeahead, the auto-completed results are only as long as they "have to be" to display the entire word/phrase whereas I want them to be as long as the actually input box. Basically like what you see on Google.com with their Instant Search functionality.
This closed issue suggests I should be able to manipulate the CSS to achieve what I want to do, but I'm not great at complex CSS and I'm struggling to get the inheritance just right to get any CSS to actually apply to the correct element. On top of that, I'm unsure how to make sure the dropdown-menu inherits the input's length (so that it'll work despite browser resizing).
Thanks for any help that you can provide!
Current code:
JSFiddle
Without you posting your code or a link to the working example, this is just a guess, but try this CSS
.my-search, .typeahead.dropdown-menu > li {
width: 80% !important;
}
I created a new web application in visual web developer. I saw that the title of "Site.Master" (in code) is:
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
So I opened "Site.css" and added:
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
color:Blue;
}
Showing "Default.aspx", though, doesn't show the text ("My ASP.NET Application
") in blue. Why?
EDIT: From the source code:
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
So I added color: Blue; in the css under body, page, header, title, and h1. I rebuilt, and pressed Ctrl + F5. Doesn't help. I'm trying this in IE and Firefox.
The stylesheet is probably cached on the browser. Clear your browser cache, and you should see the change.
Also, You probably did this for emphasis, but you don't need to surround the css in asterisks.
You can prevent this from occurring in the future by appending a query string to the css link:
<link rel="stylesheet" type="text/css" href='site.css?v=<%= DateTime.Now.Ticks %>' />
Something like this will cause the browser to download the css file every time the page is requested.
Update your css like below.
.title h1
{
font-size: 1.6em !important;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
color:Blue !important;
}
from: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Specificity is calculated by counting various components of your css
and expressing them in a form (a,b,c,d). This will be clearer with an
example, but first the components.
Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)
So, the class of div is over-riding the element setting of h1.
Try
color: blue;
instead of
**color:Blue;**
Two things:
It's possible you just need to do a "hard refresh" of the page. Try pressing Ctrl + F5 and see if that helps.
You may need a more specific selector to control that element if another CSS rule is affecting it. Try changing "h1" to ".title h1"
i dont know why it happens but u need to clean firefox cache and cookie then it works.
This cases are common and almost no solution to this issue (sadly, little can be done) if and only if your web page content was sourced from a template online. To confirm this, create two web forms with different templates and both web forms share the same 'sitemaster' page. it kind of inherits content design.