I am adding bootstrap.css to design some elements of a certain div without messing with the rest of the elements.
Example:
...code here...
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
</div>
...some more code here...
Importing bootstrap.css:
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
But when I run my code, the bootstrap.css messes with the rest of the elements. How can I import bootstrap.css that it will only apply on btn-group class?
You need to customize Bootstrap before downloading to include the required parts only
go to http://getbootstrap.com/customize/
click "Toggle all" to uncheck all components check required components only e.g. 'Buttons'
go all the way down and click 'Compile and download'
Related
I'm new at Mudblazor and trying to override the default padding of the expansion panel header. Here is what the html looks like:
html mudblazor
Mudblazor creates a div with a .mud-expand-panel-header in the background and that's the element I want to change the bottom padding on. I tried inline css and change the styling from the css file without success. I also tried to use pb-1 on the TitleContent tag but that element doesn't take classes. Any ideas on how to change that?
Solution 1: How to apply custom CSS (directly)
If you wish to override the mud-expand-panel-header style directly, create a new CSS file, include it in the index.html file and make sure it's loaded after MudBlazor.min.css to ensure it takes a priority.
Once that's done, add the following code inside the new file:
.mud-expand-panel-header {
padding: 4px;
}
Solution 2: How to apply custom CSS (indirectly)
Instead of modifying mud-expand-panel-header class directly, apply the CSS you need to any mud-expand-panel-header that's inside an element with a custom CSS class of your own.
Example
https://try.mudblazor.com/snippet/wumGaiveVFPlBBEe
<style>
.custom-expansion-panel .mud-expand-panel-header {
padding-bottom: 4px;
}
</style>
<MudExpansionPanel Class="custom-expansion-panel">
<TitleContent>
<div class="d-flex">
<MudIcon Icon="#Icons.Filled.CheckCircleOutline" Color="Color.Tertiary" class="mr-3"></MudIcon>
<MudText>Title</MudText>
</div>
<MudText Typo="Typo.subtitle1"><b>Price</b></MudText>
</TitleContent>
<ChildContent>
<MudText>Age</MudText>
<MudText Typo="Typo.body2">Notes</MudText>
</ChildContent>
</MudExpansionPanel>
Solution 3: How to get Bootstrap working
If you wish for the pb-1 bootstrap class to work, go to the index.html file and make sure that bootstrap.min.css is loaded a̲f̲t̲e̲r̲ MudBlazor.min.css.
That's what you may currently have:
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
That's what you should have for the Bootstrap class to work:
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
I use Primefaces for my JSF app. In one page I have to use <h:inputFile> instead of the <p:fileUpload> equivalent. As a result, it renders without the Primeface style:
How can I apply the Primeface css style to <h:inputFile>? (to make it look like a Primefaces button for instance)
Have a look at how the basic p:fileUpload is rendered. Copy the outputted HTML for the component and you are almost there.
You will notice that the actual input type="file" has an attribute tabindex="-1", which you need add to your component. You should use a passthrough attribute to do so. See: Custom HTML tag attributes are not rendered by JSF. So, add this namespace: xmlns:a="http://java.sun.com/jsf/passthrough".
Another thing you need to take care of, is loading the stylesheets PrimeFaces is using to style the upload component. To do so, add:
<h:outputStylesheet name="components.css" library="primefaces"/>
<h:outputStylesheet name="fileupload/fileupload.css" library="primefaces"/>
Note that you can leave out components.css if you are using other PrimeFaces components on your page.
In the end, your upload component will look like:
<span class="ui-fileupload-simple ui-widget">
<span class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left ui-icon ui-c ui-icon-plusthick"></span>
<span class="ui-button-text ui-c">Choose</span>
<h:inputFile a:tabindex="-1"/>
</span>
</span>
Please note that you will be missing interactivity which is added to the PrimeFaces component by its JavaScript! My advice, just use p:fileUpload.
I have an href link that triggers a download located within a button in my Angular component HTML. I can see both the button and the highlighted text link in my browser. However, when I click the link, nothing happens - in terms of triggering the download. This is what I have:
<button class="email-prompt-button" md-button>
<a [href]="fileUrl" download="file.txt" class="btn-link">Download File</a>
</button>
Now, if I remove the button, and just have the a tag, it works:
<a [href]="fileUrl" download="file.txt" class="btn-link">Download File</a>
How can I get this to works as link text within a button?
Why don't you shape your anchor tag shapes to look like a button by applying custom css
or
If you're using Bootstrap you can apply below classes:
btn btn-primary
Just like
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<a [href]="fileUrl" download="file.txt" class="btn btn-primary btn-link">Download File</a>
I am using a bootstrap button on one of my page, that is disabled, and the styling seems to not be working properly
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<button disabled class="btn btn-primary">suivant</button>
<button class="btn btn-primary disabled">suivant</button>
I tried these 2 ways and the result look like this for both approach: initial look || on Mouse over
EDIT: Important to mention that i only have bootstrap4, no personnal style sheet and no other themes
This is a react Project, className is used instead of class
https://codepen.io/jacobweyer/pen/ybqxBK
I've updated this codepen to show Bootstrap4 buttons with BS4 alpha 6. They look like they show up as intended in and outside of React.
<button class="btn btn-primary">suivant</button>
<button class="btn btn-primary" disabled>suivant disabled</button>
Another stylesheet was making conflict with bootstrap that i wasnt aware of
thanks to #MichaelCoker for making me search trough my project again
I'm using Twitter Bootstrap 3.3.5. When creating a btn-primary in my html like:
<button type="submit" class="btn btn-primary">Button Text</button>
i'm getting a different result as stated on the bootstrap page. I'm talking about the gradient that the button has when I'm using bootstraps button inside my page. When expecting the the element with Chrome's Dev-Console I can see that the gradient comes from the theme.less file and of course I can manipulate it. But shouldn't it be by default like on the bootstrap website?
I found out that removig the
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
tag from my html-head helped already.
I've installed bootstrap via bower. Would be nice if one could "opt-out" the theme via config instead of deleting the theme files or the link tag in head manually.