ngb-pagination: bootstrap css is not working - ng-bootstrap

I'm working on an angular project with the latest version. I have a page where to display data from a database to a table. I've used the ng-bootstrap table along with its pagination. Everything is working, the data generation, the pagination as well as the item display per page except the styling of ng-pagination is not working. The following classes are .pagination .page-item and .page-link. Those classes can be found in bootstrap.css. I've included the latest bootstrap too. I know the bootstrap.css is working because the styling for table is working as well as the item per page selection.
I only included the bootstrap.css in one component.
I tried overriding it and no avail. Please help, thanks!

The .css should be added to main.css

Related

How do I know if my WordPress page was made with Bootstrap?

I'm trying to figure out whether it would pay off to use Bootstrap on my existing Wordpress site and while researching it, I came up with the idea that the template I'm using might actually already be using Bootstrap.
I can't see any signs of Bootstrap in my functions.php file or through the FTP, but the template is using classes like these: ".col-md-4", ".col-sm-4". Is that because it was created with Bootstrap or is it just a convention?
Sorry if this is complete nonsense.
That's a classic bootstrap class.
You shouldn't check the PHP files but the css ones or javascript.
It may be a sign.
You can check more bootstrap classes Like container, row, and ...
And for being sure you can check asset files like CSS and JS files, if you found bootstrap css and js files you may be sure of using bootstrap in your template.
You can open asset files it may wrote the bootstrap version in it even.

MVCPaging Css styles not working with Bootstrap 3.3.5

I'm having a problem getting the styles to cooperate. I downloaded the sample MVCPaging solution from his site and loaded the latest MVCPaging from nuget version 3.1.1. I copied the paging.css file from the sample solution and added it to my solution. You can see the problem in the image below. Both style sheets are being loaded as you can see from the debug window but yet their seems to be conflicts. Does anyone have a working css file compatible for bootstrap 3.3.5
I have the bootstrap.css bundled and loaded in the _Layout page and the paging.css has a link reference in the parent page for the partial that contains the pager
EDIT:
Removing the display:inline block css from the pagination element helps to get the pager inline but does not solve the problem. See second image.
but there are several other styles that are not working for this with bootstrap 3.3.5 including button and the coloring of the pager status section below the pager.
What it should look like, and remember I am using the same code from the sample. The only difference is the bootstrap.css version
One more update. In the sample solution I removed the reverence to the bootstrap.css bundle and set a link reference to the 3.3.5 cdn link and I got the same results as my project
Edit:
Here is a link to the files that are being used
bootstrap.css This is loaded in the _Layout.cshtml bundle
paging.css This is loaded in the partial view that contains the pager as a link reference

Bootstrap CSS is overriding the default CSS for Drupal Webforms

So as my title suggests I'm currently working on a Drupal webform. The issue is that since we started using bootstrap for page styling, the webform looks like crap.
We figured out that by removing the CSS files given by bootstrap our form shows the way it's supposed to.
Anyone have a clue on how to fix this issue? Perhaps a setting where we can say that bootstrap can't override anything existing or something?
Thanks in advance
Have you tried loading the Bootstrap files before your main Drupal styles are loaded? If Bootstrap is loaded into the page after your main styles it will override.
Alternatively, you could customize your Bootstrap download to exclude components you would not like included.
http://getbootstrap.com/customize/

adding CSS to Grails

I am still relatively new to Grails. I am trying to use Bootstrap for the CSS. I have added the bootstrap files to the CSS folder. I have added the plugin. I have added links to the head of the main.gsp as links and the pathing looks correct. But still no joy. I do not want to have a <style></style> in my gsp's. Any advice on how to get the gsp to call the proper CSS?

CSS bundling issue

In my asp.net mvc application, I'm using bundling for css. When I created a new css stylesheet and used the same id names as another page in the application, the styles on the first page were messed up.
I must be doing something wrong as I know that the same id can be used on different pages, but I don't find others having this problem when I searched the web on the subject.
Please help. Thanks.
The two CSS files are styling with the same ID (yet intended to style different pages) are bundled together and causing styling problems on those IDs.
This is because the page is loading the bundled CSS file then all the styles (from both CSS files) are applied to that ID regardless of page. The solution is to only load the relevant CSS file (and not bundle) or of course use different IDs.
id re-use throughout an application is unusual and often overcome by using class instead.
^^ summarized from comment discussion
You should be able to look in your developer tools (firebug, chrome devtools) and see which styles from which stylesheets are messing things up. Or am I misunderstanding the problem?

Resources