MVCPaging Css styles not working with Bootstrap 3.3.5 - css

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

Related

ngb-pagination: bootstrap css is not working

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

Bootstrap : speed start and minimal setup

I'm on Debian Jessie, 32bit, editing with gEdit and trying to get BootStrap to work without an internet connexion. I went to getbootstrap.com/getting-started, downloaded the files from the left-most button, extracted the various folders (js, css, fonts) into a folder named bootstrap.
I also created custom.css in the css folder and threw in a line
#qlksjhdf { color:#FF0000;}
Within this folder, I created an HTML file. Then I copied some code from a working example. When I use the CDN links, all works fine, as expected, but when I replace the CDN with local linking such as "css/bootstrap.css", the styling disappears, although the H1 styling in "css/custom.css" works.
Do I need to "install" something or wouldn't just downloading and linking the files suffice ? And yes, I've also downloaded jQuery and linked it locally...
Are you sure that you're using the right file path for the Bootstrap resources. If you put everything in a folder called bootstrap, you should be able to link the css file like this from your index.html:
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
Double check the path you are using to reference the bootstrap files. That is most likely the issue. If everything looks fine, can you add some code to the example or create a JS fiddle with the code you are working with?

The Images URL's doesn't show in my Home Page

Am using This bootstrap CSS design it works fine but the images doesn't appear. I took from its github repository the css file and the index.html.
i didn't make any changes, and am using it with my meteor project. I already added twbs:bootstrap package. Are there any packages i need to add to my meteor project?
why the images doesn't appear with me?
Those images does not appear because you just copied the index the css, you are missing the rest of the assets (where images are stored). But for your own images, you shouldn't have any problem to add them.

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/

rails and bootstrap - selectively/randomly works

I'm a beginner coder and am trying to integrate my css into my app. Using Rails 4 + Bootstrap 3.
I wrote out the html + css for the front-end of my app prior and it all worked fabulously. I moved everything to my folder and edited my V + C accordingly.
I have installed the bootstrap-sass gem successfully. Have updated my assets application and js. I have a .scss file importing bootstrap and my Google fonts.
Bootstrap, Bootstrap js, and Google fonts are working selectively/randomly on certain pages, but not fully on a page or they just don't work at all or they are there but all messed up now. (ex. modal not working on one page, but js element on another page works) I am trying to call the css files from where they are locally stored.
My questions:
1. Is there something I would need to edit to integrate the two in addition to the above?
2. Do I have to transition my css into another file?
3. If there is no easy way to fix this, should I just start over with my css?
Would appreciate any tips. Thanks!
A good starting point would be to check your sources under the inspector, to make the that the css and javascript are both being required. Also check the console for whether there are any javascript errors.
Assuming you are on google chrome, and on a mac, that would be cmd+alt+i, and ctrl+alt+i on windows.
You can also check which files are being included through checking page source by right clicking most parts of the page.
If they are being required and styles are not being applied then something else is probably getting in the way( i.e. bootstrap javascript files are being required twice, css is being overwritten because of load order, etc)

Resources