I'm new to web dev and I'm working with Twitter Bootstrap right now. I am trying to create 3 columns on my page using this code:
<div class="container">
<div class="row">
<div class="span4">
<h4 class="muted text-center">About me</h4>
<p>Sample Text1.</p>
<i class="icon-user"></i> Text1
</div>
<div class="span4">
<h4 class="muted text-center">About you</h4>
<p>Sample Text2</p>
<i class="icon-star icon-white"></i> Text2
</div>
<div class="span4">
<h4 class="muted text-center">About Us</h4>
<p>Sample Text3</p>
Text3
</div>
</div>
</div>
I've looked at numerous examples and tested it on my page but they don't seem to work.
This code outputs all the text one above the other and doesn't divide it into columns in the same row.
Do I need to alter the bootstrap.css file in some way? The default one doesn't contain a span4 class or anything.
Assuming you might have fumbled up with the library you are using for bootstrap and the syntax. (happened to me a while back)
As of bootstrap 3.0...spanX have been depreciated,instead,col-xx-## is used now where xx can be lg, md, sm or xs and # ranges from 1 to 12
so in above html markup of yours change <div class="span4"> to <div class="col-xs-6 col-md-4"> and it should work
see the demo here
see docs here on how to use it
Also, if you are using ver 2.xx of bs...i'll suggest you to move to latest 3.0 on which this solution is based!!
I think you’re using Bootstrap 3 with the classes of Bootstrap 2. Grid class names have changed in the last version, see the documentation.
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
I'm using Blazor, and it doesn't look like CSS Push/Pull is working
If I take the stock Microsoft Sample app, and replace the table in FetchData.razor with:
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4 col-sm-push-8" style="background-color:lavender;">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4" style="background-color:lavenderblush;">.col-sm-8 .col-sm-pull-4</div>
</div>
The lavender block is still on the left (aka not pushed)
(sample code from TryIt Tutorial on Push/Pull)
Any ideas?
The bootstrap version in the blazor default website is different from the w3schools link you have shared. The version in default blazer website is 4.3.1 and the one on w3schools is 3.4.1
As far as I can find, there is no .col-sm-push-8 helper class in bootstrap 4. Instead you can use the class order-* as below:
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4 order-4" style="background-color:lavender;">.col-sm-4 .order-4</div>
<div class="col" style="background-color:lavenderblush;">.col</div>
</div>
</div>
Output will be like this:
Here are more details
The above was really close, I just changed to order-sm-xxx
I can't get glyphicons to show up. Currently, a small square shows up instead of the glyphicon. I've tried moving folders, etc. I didn't do custom bootstrap - I just downloaded the whole thing, so there shouldn't be any errors/anything missing. Here's my code:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2>Welcome!</h2>
<p>
</p>
</div> <!-- heading div -->
</div> <!-- row -->
<div class="row">
<div class="col-md-2 col-md-offset-2 text-center">
<div class="interests">
<span class="glyphicon glyphicon-camera">
</span>
<h4>People</h4>
</div> <!-- interests divs -->
</div> <!-- column divs -->
</div> <!-- row -->
</div> <!-- container -->
Am I missing something at the top that needs to be included to get the fonts to show up? In the head, I have a link to the bootstrap.min.css - should I be linking to anything else?
I'm guessing its's not showing for 2 possible reasons:
1. You have not installed the fonts
2. You have not added the font folder hence bootstrap cannot load the glyphicons.
fonts----a folder containing fonts
css------a folder containing bootstrap css files.
index.html-----this file should link to the href="css/bootstrap.css" which intern calls the fonts files
You may check the following images (2 images).
Or, you can check those fonts.
https://github.com/twbs/bootstrap/tree/master/dist/fonts
Hope it helps.
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
I have a demo site which is located here to give you an idea of what's going on. If you scroll to the bottom where you see the 9 individual posts they are all laid out properly. How ever if you shrink the screen to anything less then 1232px's youll see that the 7th post breaks away from the others and shifts down.
Now I am using default styles to align them as such, using row and then span4. Can any one explain why this happens? And any way to fix it?
Your span totals should add up to 12. Your example site however adds up to more than 40! I don't think there is any defined behaviour for what should happen if you don't use it as intended.
From Bootstrap homepage
"The default Bootstrap grid system utilizes 12 columns"
So the total of your spans must add to 12 per row. ie.
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
<div class="row">
<div class="span7">...</div>
<div class="span3 offset2">...</div>
</div>