Here is the issue I am working on. Obviously using Bootstrap 3 but I think the issue has more to do with the Selector's specificity than simply Bootstrap. But I can't seem to find the solution.
Case 1.
The ASP.NET form class is set to "form-inline center".
The Head section of the page has the following style:
<style>
@media only screen and (min-width: 768px) {
.center { text-align: center; }
}
</style>
Then elements of a Div element of class "form-group" are centered on the page. As well as any other element of the page is centered.
Case 2.
I want to remove the .center class from the "form-inline center" and center only one Div of "form-group"
So I enter a style "text-align" to this particular "form-group" as follows:
<div class="form-group" style="text-align: center" >
<asp:label ID="lblName" class="control-label" runat="server">Enter:</asp:label>
<asp:textbox id="txtName" Width="150" MaxLength="15" Runat="server" CssClass="form-control"></asp:textbox>
<asp:Button runat="server" CssClass="btn btn-primary" ID="btnSubmit" Enabled="true" Text="Submit" onclick="btnButton_Click" />
</div>
But the div "form-group" is NOT centered.
I suspect that this is due to the fact that "specificity" of style defined in the Div is lower that it is in the Bootstrap class "form-inline"
How do I increase the specificity of the style text-align for this "form-group"?
TIA
"The creative process is nothing but a series of crises." Isaac Bashevis Singer
"My experience is that as soon as people are old enough to know better, they don't know anything at all." Oscar Wilde
"If a nation values anything more than freedom, it will lose its freedom; and the irony of it is that if it is comfort or money that it values more, it will lose that too." W.Somerset Maugham