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">
Related
What part of sling adds the wrapping div and CSS classes when we do a sling include
When my component does a sling include
<sling:include path="/content/www/mysite/mycontent"/>
Translates to following in the markup
<div class="globalnavigationbar_ globalNavigationBar parbase">
<!-- start component markup -->
<nav class="globalnavbar hidden-xs hidden-sm">
<div>Component content</div>
</nav>
<!-- end component markup -->
</div>
I am interested in understanding what code in sling framework adds the wrapping div when doing a sling:include
<div class="globalnavigationbar_ globalNavigationBar parbase">
Tried to lookup[1] and follow the trail without success
[1] https://github.com/apache/sling-org-apache-sling-scripting-jsp-taglib/blob/master/src/main/java/org/apache/sling/scripting/jsp/taglib/IncludeTagHandler.java
The reason for trying to figure this out is trying to replace reference components with Apache SSI using Sling SDI.
Unfortunately, most of our current styles rely on those css classes and when using SDI the wrapping divs are missing.
Redoing our css classes is one option, trying to figure out alternatives if any
I don't think sling adds those tags. It is AEM's WCM which would do it. I do know that there is an IncludeOptions class which lets you override the decoration tag.
There are multiple ways to tell AEM to avoid decorating your components as detailed in this article. That being said, please be cautious with removing your decoration tags in author instance as you might have issues with getting your edit overlays working properly especially if you have components that have floats defined in the CSS.
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
how can i change width of container in bootstrap3. I want content in center of browser (70% of browser's width).
<p>
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
</p>
<p>
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
</p><p>
Positive Energy By Nature <br>
Sun is always there for us
</p>
<p>
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
</p>
</div>
Please check my code
You surround your p tags in a
<div class="container">
Then in your css file declare something like:
.container {
max-width: 70%;
}
I hope that this will help you :)
But instead of 70% it is better to declare max-width precisely...like max-width: 1100px;
You can create a new style. Name it styl.css. Afterwards, search bootstrap3 folder. You will find bootstrap.min.css. Type Ctrl+F and search for "container" class. Modify it.
for example,
.container{
width:70;
}
I hope that will help you.
The documentation of the bootstrap 3 container class states that 'due to padding and more, neither container is nestable".
But then, in the official examples, take this, a demo of a simple navbar, we see something like:
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
where a container-fluid is clearly nested inside a a container.
My understanding of the "neither container is nestable" sentence is that we should have just one container in a page, or on the other hand we can have multiple if they are not nested one within the other.
Seeing the examples it doesn't seem to be the case, then what does it mean that constraint? I've read also this question and some others but they don't talk about the nesting thing.
This has been brought up as in issue on the Bootstrap repo:
https://github.com/twbs/bootstrap/issues/15512
I'm not sure if the doc will be updated accordingly, but as you'll see in the issue it looks like it's ok to put a container-fluid inside a container.
In a document, there are multiple <nav> and <aside> elements. Should I add role="navigation" on all <nav>s and role="complementary" on all <aside>s?
In other words, is it more beneficial or more redundant that there are multiple <nav role="navigation">...</nav>s and multiple <aside role="complementary">...</aside>s in a document?
According to the HTML5 spec, role="navigation" is implicit to the <nav> element, and role="complementary" is implicit to the <aside> element. As such, you do not need to add them according to the spec.
The question is how many ATs actually honor the spec, so if you want to play it safe, you can add those roles, it won't hurt.
Also rememebr that some <aside> elements should however be marked as role=note.
Another thing to consider is that the HTML5 spec allows multiple seperate <ul>s to be grouped under a <nav>. I am uncertain if this implies that role="navigation" is enough on just the <nav> or that each <ul> should be marked as such. I am unable to find any information on this.