i am learning bootstrap, need help.
I have row, then i have a custom_class which i just need to use when display not extra small (xs). How to do that?
<div class="col-md-7 custom_class">Left</div><div class="col-md-5">Right</div>
Thanks
Related
While creating a project on the Nuxt + Tailwind stack, I stumbled upon another problem.
Following the documentation I wanted to add a background image, but css does not display it (other Tailwind classes work)
**.vue
<div class="bg-[url('img/stories/desktop/18-days-voyage.jpg')]">
<h3>The Mountains</h3>
<p>by John Appleseed</p>
Read story
</div>
However, if I am use the img tag with the same path to the image, then it displays.
<img src="img/stories/desktop/18-days-voyage.jpg" alt="" />
Need to make the first way work. Can you tell me where to dig? Thanks in advance.
Can we use visible-xs and other classes to have multiple containers?
My requirement is to use the following:
Use container-fluid(968px width) for Desktop and use container for tablets(take fixed full-width). How can I achieve it? Is it possible with the classes
visible-xs-container
Is it a good practice?
Should I write media query or override css?
You can combine bootstrap classes for single div:
<div class="col-xs-12 col-md-4 col-xs-1">
I could not understand about that, I need your help to understand this point.
Is it good to use margin or padding with bootstrap class by using another class (which will call margin or padding in css)?
Please check an example below for better understanding:
<div class="row margin-bottom-30">
<div class="col-xs-10 padding-30">
<p>text here</p>
</div>
</div>
Thanks in advance :)
As you already know col-xs-10 and all the col-xx-xx classes have a default left and right padding of 15px. If you want to increase that, it's ok, it's nothing wrong with that, depends of what your design should look like.
Regarding the row class, to use a margin-bottom it is actually fine, it's quite recommanded for spaces between blocks. What i think it's not recomanded is to use margin left and right inside col-xs-10 because it could crash the layout. The rest of the things are permited.
It's fine to use use..
But it is not according to our standards.
SO, do not change the padding of existing bootstrap class..
it's better to add a parent with a class and give padding in it.
This will be in case of Media Queries
I am wondering if it is necessary to put navbar content into the container/container-fluid, for example:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid"> etc...
If that is a must then there is no proper way to place navbar within some column elements(col-*) since containers can not be nested.
Can anyone confirm this?
Thank you very much.
Containers can be nested, it's just not recommended. But if the layout you're going for requires putting the navbar within some .cols, just try it! Then come back asking for help if it's not working the way you want...
I am trying to use a simple mustache template with a list of items and display them in rows of 3 columns. The problem I am facing is how to get the "row" logic into the template (every 3 columns, start a new row).
Here is my template:
<div class="row">
{{#listings}}
<div class="col-md-4">
Item {{number}}
</div>
{{/listings}}
</div>
Bootstrap doesn't seem to like the fact that I shove way too many columns into the row. I did exactly this with foundation by zurb and it worked without a hitch.
Can anyone out there point me in the right direction?
Add all you col-md-4's in the same row. 3x col-md-4 makes 100% and the next one jump to next row. This could give you troubles when your col-md-4's differs in height, see also: How can I create multiple rows using semantic markup in Bootstrap 3? and Change overflow mode in small devices on Twitter Bootstrap 3.0