I am following a web application tutorial on Youtube and come into a question. As you can see from the code
<div class="card card-body">
...
</div>
The output is like
If I put card and card-body in different , the output would be strange.
<div class="card">
<div class="card-body">
...
</div>
</div>
Since I am new to Bootstrap5, this case makes me very confused. Of course the first one is the one I want but I still want to know the reason behind it.
Could someone please explain it? Thank you.
It can be a css rules that overwite the bootstrap with !important.
card(parent) and card-body(child) is the correct way according to docs so you should do it like that.
<div class="card">
<div class="card-body">
...
</div>
</div>
Related
I have been using bootstrap for a little while. I am having trouble with the text-white class. It is not changing the text color. I have provided the code below. What is the problem with what I have here?
<div class="jumbotron jumbotron-fluid" id="one">
<div class="container">
<h1 class="text-white">Example</h1>
<p class="text-white">Second Example</p>
</div>
</div>
The issue is that using text-white is not compatible with bootstrap 3. When I changed to bootstrap 4 it worked.
The issue if doing this is that other things may not work after the change so be warned that things might break.
I am trying to find a way to make bootstrap grid more fluid in showing information.
this is the code I am using now.
<div class="container-fluid">
<div class="row design">
<div class="col-lg-4 wow fadeInUp">
<img src="assets/images/projects/traverse/01.jpg" class="imgs">
</div>
</div>
</div>
but after having like 5-10 of these, the result is something like this.
how can I fill that empty spot in there? the pics I am uploading are not of the same parameters.
or when it is an empty spot, how to add make the grid more responsive and fill the empty parts in there?
I am using only css and html, but don't mind javascript or something else as long as it gets the ob done
My Problem
I am new to Bootstrap. My boss wants me to replicate the following screen ( or as close as possible ):
Desired Layout
I have tried to do this myself using:
<div class = "row">
and
<div class = "col-lg-x">
... but I can't get the rows and columns right! So frustrating. I have tried and tried and tried.
Does anyone have any ideas how I would replicate the following layout easily?
Thank you so much for looking at my problem.
Regards,
John
Not sure if it's the way that you have put your code on to SO however it should look something like this
<div class="row">
<div class="col-sm-4">
4
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-12 col-sm-12">
12
<div class="row">
<div class-"col-sm-4">
4
</div>
<div class="col-sm-8">
8
</div>
</div>
</div>
Edit: You may also wish to take a look at nesting to help you achieve this https://getbootstrap.com/docs/4.0/layout/grid/
I want to know if there is any problem if we do the following using bootstrap 3 with the html structure?
After reading the documentation and some examples all of them recommend doing the following structure
<div class="row">
<div class="col-lg-4" ></div>
<div class="col-lg-4" ></div>
<div class="col-lg-4" ></div>
</div>
but we are using angular in our application and the sizes of each panel could change and also each panel have it's own controller that knows when to expand or not. I already thought about a controller or an state manager but i don't know at the moment the final ui definitions.
So my question is is any problem with the following structure?
<div class="row">
<div>
<div class="col-lg-4" ></div>
</div>
<div>
<div class="col-lg-4" ></div>
</div>
<div>
<div class="col-lg-4" ></div>
</div>
</div>
That structure is fine. However there is a mistake in your class names. It should be 'col-lg-4'.
It may also pay to use some other col-- classes to handle what happens on smaller devices/screen sizes
EDIT:
After re-reading the question I see that they won't have fixed sizes. Perhaps consider implementing a function to assign different sizes to different elements.
E.G.
<div class="row">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
Now you can reference the divs with the different id's and do something like this:
//if you want a large middle column with two smaller columns on the side
$('#one).addClass('col-lg-2');
$('#two').addClass('col-lg-8');
$('#three).addClass('col-lg-2');
note: I'm using jquery for that.
The grid class should be col-lg-4 instead of col-lg 4.
http://getbootstrap.com/examples/grid/
I'm trying to create a site using bootstrap and no external css. It seems I can achieve many of my formatting goals using nested grid systems.
e.x.
<div class="container-fluid bs-docs-grid">
<div class="row show-grid">
<div class="col-md-6">
<div class="row show-grid">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="col-md-6">
</div>
</div>
</div>
Is this a reasonable practice?
Your code for the nesting is exactly what Bootstrap recommends: http://getbootstrap.com/css/#grid-nesting
and
https://getbootstrap.com/docs/4.4/layout/grid/#nesting (for Bootstrap 4)
Unless you have a specific need for the show-grid and bs-docs-grid classes, there's no need to include them. They aren't part of the base bootstrap CSS.
If you can achieve the layout you need using nested grids, I would certainly use them. They will save you time and reduce potential browser compatibility issues.
Good luck!