I am new to bootstrap and I would like to add cards to the default index page that is scaffolded when I start a new ASP.NET MVC project
My understanding is that bootstrap includes a border on the card. However, when I ran the application, the card border was not rendered.
I searched the web, of course, and found these two related question on SO:
Bootstrap cards not showing like in examples
What is the '.well' equivalent class in Bootstrap 4
I noticed in my project that it loads with bootstrap V3. Using NuGet, I uninstalled v3 and installed Bootstrap V4. I made sure the correct files were being loaded in the Bundle.config file as well. Still, the border was not rendered.
Here is my html code which is based on the default index page generated when creating a project:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<div class="row">
<div class="col-md-4">
<div class="card border">
<div class="card-body">
<h2 class="card-title">Card title</h2>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
The code I changed is in the first column of the row. (the ellipses in the other columns represent the code generated by visual studio). I added the border class but a border is not drawn in Chrome. I have also tried adding border border-primary but the border still does not render.
I fully expect to see a border around the card but cannot seem to get it working. Any assistance would be appreciated.
I got this working. Adding the border class seems to have been the problem. I might have needed to recompile to get version 4 into the executable but in any event, using the example in the documentation on the Bootstrap web site rendered the border. Adding the border-primary class to the card element successfully changed the color. I think the critical lesson is that Bootstrap version 4 is needed and VS loads Bootstrap Version 3.
Related
I've been using bootstrap 4 on my angular 12 project for a while, and today I've upgraded to bootstrap 5.
I know some properties have changed, but I've read that the grid system is identical.
I regularly use "Mix and Match" columns as written in the documentation, for example
<div class="container">
<div class="row">
<div class="col-12 col-sm"></div>
<div class="col-12 col-sm-auto"></div>
<div class="col-12 col-sm"></div>
</div>
</div>
This example it's working very well with Bootstrap v4.* but not on v5.
It is supposed to have only 1 row where the first and third columns try to get all the available space and the second column fits your content.
What I saw on the Chrome DevTools that the col-12 class takes precedence over the col-sm class, even on larger screens.
Any ideas to try to solve this problem?
As I recently answered here, this is a bug that was introduced in 5.0.2 because the order of the column declarations was changed, making col-12 override col-sm on all breakpoints.
Until it's fixed, a workaround in your case would be to simply remove the col-12 (it's not needed since col-12 is the default)...
<div class="container">
<div class="row">
<div class="col-sm">col</div>
<div class="col-sm-auto">col</div>
<div class="col-sm">col</div>
</div>
</div>
https://codeply.com/p/gUgPktyAyA
If I break down a navigation menu (navbar) into components such as this:
<div class="navbar">
<app-navbar-brand></app-navbar-brand>
<app-navbar-menu></app-navbar-menu>
</div>
or:
<div class="navbar">
<div class="navbar-brand">
<!-- navbar-items -->
</div>
<div class="navbar-menu">
<div class="navbar-start">
<!-- angular components -->
</div>
<div class="navbar-end">
<!-- angular components -->
</div>
</div>
Some padding and other properties seem to work incorrectly in the menu.
If I keep the entire navbar in one component, I don't see this problem.
Any idea what I'm doing wrong in Angular? Or is there something i've missed? It looks like the SASS is loaded in a weird way, but I cannot figure out why this is.
I ran into the same issue when using Bulma with Angular. The problem is because Bulma is built entirely using Flexbox. Angular component generated (pseudo) HTML tags, which are not using flexbox. I tried adjusting the component CSS style (i.e display, and width properties) seem to help, but not perfect. Hope that helps.
//edited: simplified version now
I am using meteor and want to use a bootstrap grid system in my templates. Unfortunately it just displays the two columns on top of each other as if no bootstrap class was assigned to them at all. I would expect them to be next to each other on the same line
I haven't installed any bootstrap package. (I had but uninstalled it to be sure it is not that) I have only installed other basic standard packages like the facebook login or autoform
Bootstrap itself is working because autoform is styled with it and the alert classes are working in my template for example
There is no other css styling at all in this template yet
The HTML must be well formed as meteor would not render the template otherwise
I tried:
installing the twbs:bootstrap package
installing the mizzao:bootstrap-3 package instead
using more complex bootstrap with container-fluid
which didn't change anything
Bootstrap is installed in the head tag using the code from this link (MaxCDN):
http://getbootstrap.com/getting-started/
this is the entire code for the template
<div class="container">
<div class="row">
<div class="col-md-6">col1</div><div class="col-md-6">col2</div>
</div>
</div>
As I am very new to bootstrap I assume its a very stupid beginners' issue but I just cannot find it
Hey guys I figured it out!
It seems to have to do with the relatively small size of my screen plus that my developer console was opened. When I used col-xs-6 it worked.
Thanks Anyway!
The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts.
<div class="row">
<div class="col-xs-9 col-md-7></div>
<div class="col-xs-3 col-md-5"></div>
</div>
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
I have been using twitter bootstrap for a year, its the one of those things which -"just works" . With release of twitter bootstrap3 its become even better and awesome with its mobile first approach. But i am not able to understand how to use it properly with mobile first approach.
Earlier there was .span* and .offset* class but now there are .col-xs-* .col-md-* .col-sm-* .col-lg-* and .col-xs-offset-* .col-md-offset-* classes respectively. Even now 'it-just-works' using .col-md-* i want to know the right way to use all these classes so as to not just use them but use them correctly to get most out of bootstrap3.
Thanks.
I found these links very helpful:
http://www.helloerik.com/bootstrap-3-grid-introduction
http://bootply.com/bootstrap-3-migration-guide
Currently I'm using Bootstrap 3 for web development, how I'm using the Grid system is,
<div class="container">
<div class="row">
<div class="col-md-9"> <%--this for 9X3 grid--%>
<div class="row">
<div class="col-md-6"> <%--this for 6X6 inner grid--%>
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
I found (a) Bootstrap's own documentation helpful here, but also a (b) lynda.com topic in migrating to Bootstrap 3. Specifically, see "Dealing with grid changes"
(a) http://getbootstrap.com/css/#grid-offsetting
(b) http://www.lynda.com/course20/Bootstrap-tutorials/Bootstrap-3-New-Features-Migration/138156-2.html