I'm trying to configure a content section of my site but I'm having trouble with the bootstrap grid system.
See my bootly example: http://www.bootply.com/121304
In my website design, i use a column-lg-3 and a column-lg-9 within a row class. To serve as a Help section and Content Area. In the content area on the majority of my pages, i use the whole column-lg-9. However in a few of my pages, i use horizontally aligned forms, such as login page (dont know ajax to get login modal working..) and input forms. On the pages with the input forms i wish to keep the column-lg-9 at its proper size, but have the login/input fields centered into it.
I have attempted to do this with a small amount of success, after reading some of the bootstrap documentation, by adding 3 column-lg-3's inside of the column-lg-9. As you can see in my bootply example, this has not fully centered the login form inside of the larger column, and ideally I would also like to center this form inside its parent column.
You simply need to remove float: left from the CSS of the affected DIVS
Create a new class e.g. .col-centered and apply it to whatever column you want centered e.g.
<div class="col-lg-3 col-centered">
CSS
.col-centered{
float: none;
margin: 0 auto;
}
Also, by looking at your code, it seems like you are trying to use empty <div class="col-lg-3"></div> to offset. That is incorrect. You don't use empty divs to achieve this.
You use offset classes such as <div class="col-lg-3 col-lg-offset-6">...</div> Documentation
Related
When using a CSS framework's grid system, like that of Bootstrap or Materialize for example, I find myself typing the following HTML very very often:
<div class="row">
<div class="col s12">
<!-- Some text/ a button / something -->
</div>
</div>
Essentially I need to put one item, say a paragraph or a button, on it's own row on the page, and in order to do so I need three tags instead of just one. This over time creates a lot of bloat in my HTML.
I have considered creating an angular directive to make it one extra tag instead of two, but I feel like that's a sloppy solution. Does anyone know of a better way to solve this problem?
One OPTION will be to create a code snippet so if you type, element it will expand in the full HTML, snippets are available in sublime text, atom text editor.
Another simple option is to use emmet, it is available in the two mentioned before and brackets, like this:
.row>.col.s12>element TAB
try something like this..
.parent {
display: flex;
}
.child {
flex: 1; /* will grow and shrink with the screen size
min-width: 20ems ; /* optional if you want the element to not fall below a certain width
}
This is just a small example..look into flexbox and see how you can style your rgrids better..
I am newbie in Twitter Bootstrap. It is a very simple question.
Here is the image:
And here is my Code:
<div class="col-md-8 col-xs-6 col-sm-6 placeholders">
<p id="people-things" class="text-center">PEOPLE-THINGS RECOMENDATION</p>
</div>
Problem: I want to put the Recomendation text in one line other then going in next line.
Infos: I had tried every grid in but still couldn't sort it out.
You have to make smaller font-size on .people-things or add this CSS:
.people-things { white-space: nowrap; }
Which is making .people-things to show on one line.
The solution above works but bootstrap grid classes should be ideally used by itself and you should not need any custom styles on top of it.
Try rearranging your grid structure such that apply <col-sm-6> before <col-xs-6>. That will allow more space in the grid cell to fit the text. Also you might not need three levels of grid nesting. You could use: <col-md-8><col-sm-8> and see if that works.
Currently, I'm trying to center-align four(4) custom html-boxes I've made in Joomla 2.5.x., with the ability to center themselfs after one or more of the boxes is unpublished.
So far, I've tried to make a "div"(with a class) inside an article, where I loaded each of the four(4) custom html-boxes with {loadposition name}. But when I do that, the boxes gets centered under each other in the middle of the page.
In the following example, this is what I would like to get Joomla to do:
I've made five(5) boxes, each in custom html. Then loaded them into one article with the following method: qB48wJSFiddle. Here, when one uncomments a box, the rest of boxes get automatically centered.
With the example above, I would like to be able to do the same with 4 boxes, all of them made in custom-html in Joomla 2.5.x
Can anyone help me with this challenge, or point me in the right direction ?
Best regard
Jens.
<div> elements are block-level elements. That means that, unless you tell them otherwise, they will occupy 100% the width of their parent element.
It sounds like you are loading 4 custom_html modules, which are all 100% wide, which each have their contents centered.
The solution is to force them to the width of their content only by specifying your own custom css, e.g.
.module-centered {display: inline-block; text-align: center;}
Then, to make this apply to each module, set the module class (in the modules advanced settings) to module-centered (note the preceding space).
I would like to have 2 different configurations of addthis on the same page.
Take note that I'm using the new Addthis, where the code looks like this:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx" async="async"></script>
<div class="addthis addthisBlogue clearfix">
<div class="addthis_sharing_toolbox"></div>
</div>
What I'm trying to do is have 1 that have the share numbers tooltips and the other doesn't
Is it possible?
Since AddThis creates HTML elements that contain the count 'tooltip' (it's not actually a tooltip) with a single class or ID element, if you want to be really specific (i.e. choose what to hide exactly where you have two or more AddThis instances on a page) you could:
add the instance where you want to hide the count inside a div with a CSS ID or unique class;
use display: none to hide the parent social media count element only inside that div.
Target the AddThis where you want to hide the count elements
Seems obvious, but For example, on this page if you inspect (e.g. in Chrome) the rendered Facebook and Twitter AddThis elements and add 'display: none' to the .pluginCountButton and .count-o styles that contain the elements you want to hide, as expected: they vanish from the display.
So if you nest your AddThis instances inside a uniquely-identified div (or any parent element) then you could simply target the one you want to hide like this:
#hiddencount .pluginCountButton,
#hiddencount .count-o {
display: none;
}
You'd need to locate the equivalent .pluginCountButton and .count-o elements for your version and instance—each social media icon has it's own so you'd have to identify each, as in the above example. You may also need more specificity between #hiddencount and the count container to get the style to apply.
NOTE: without a working example with the count links showing, this is untested. If you have a working example, I'd be happy to test it.
Through some digging I discovered the answer.
You need to add the class addthis_toolbox to your divs like so:
<div class="addthis addthis_toolbox addthisBlogue clearfix">
<div class="addthis_sharing_toolbox"></div>
</div>
source: http://support.addthis.com/customer/portal/questions/5024966-multiple-share-button-on-same-page
I'm having a little CSS problem with a list of thumbnails. Here's an example:
http://jsfiddle.net/22hs8/
The problem is that when the link is too long to fit in the 150px block it will push the image down. By using inline-block on the list elements instead of a float I could get the images to line up properly, but now I want to have the links at the same height as well.
One thing I tried is making the links itself a block (or surrounding it by a div) and giving that a height, but that would mean they are always the same height even if none of the links uses two rules. Also, if a link is so long it uses three lines the same problem would occur.
In short: how do I align the links to the top of the list items, without breaking the image alignment?
To address one issue, you can add vertical-align:top; to the <li> tag in order to align the content to the top of the element, but unfortunately, I don't believe there's a way to resolve the issue entirely without also implementing one of the following methods:
Placing all of the tags in a separate
Specifying a height on the tags
Using javascript to equalize heights
Options
1. Separate Div
By moving the anchor tags into a separate div, they could be given the same width as the images and floated or displayed inline accordingly, but your markup becomes less semantic when you separate the anchor from the content (and may also be programmatically more complex if these are being dynamically generated).
2. Specifying a Height
This option can be thrown out almost immediately because, as you've stated, the anchor lengths can fluctuate to multiple lines. You could specify the height the the largest know line length, but then you'll ultimately end up with unnecessary white space with groups of short links.
3. JavaScript (jQuery)
While It would be ideal to resolve this issue without the requirement of JavaScript, I think it may be the only option that would allow you to preserve the semantics of your markup, and also apply an equal height to each of the anchor tags.
Recommended Solution
I would recommend setting a default height on the anchors of the largest known line length, then applying a bit of jQuery to normalize the heights of the anchors. This way, if the JavaScript parsing fails or JavaScript is disabled, the user still sees a uniform layout (albeit with potentially more whitespace), and with JavaScript active the heights are normalized.
Apply vertical-align:top; to the <li>
Define default height for non-js users
Equalize heights using jQuery:
(function(){
$.fn.equalizeHeights = function(){
return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ))
}
$(function(){ $('li a').equalizeHeights(); });
})();
Example: http://jsfiddle.net/Eg7hy/
How is this:
http://jsfiddle.net/22hs8/3/
So you're saying that you want the links to not push the content down? I don't see that as being possible unless you don't allow your content to stretch at all. It's natural flow of a page for something above content to force the content down after it if it needs more space.
Have you thought about chopping off the text after a certain number of characters, with a '...' and providing the full text through a title, and providing the full text through a popup (since I assume you're creating some kind of photo gallery)?
The first answer that came to mind was:
"just use a table, it makes this really easy, and works everywhere"
Live Demo
However, I would probably get down voted into oblivion if I posted an answer only containing a <table> tag version, so here's a version using CSS display: table and friends:
Live Demo
Of course, that won't work in IE7 because that browser doesn't support display: table.
I can't think of a way to do this using code closer to your original and display: inline-block, which would also support an arbitrary number of lines. I'd love to see a better way to do this.
HTML:
<div id="container">
<div class="row">
<div class="cell">Some text</div>
<div class="cell">Some more text (too long)</div>
<div class="cell">Some text</div>
<div class="cell">Some text (seriously too long) text text text text text text text text text text text text text</div>
</div>
<div class="row">
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
</div>
</div>
(you could change some of those div tags into ul and li if you wanted to)
CSS:
#container {
display: table
}
.row {
display: table-row;
text-align: center
}
.cell {
display: table-cell;
width: 150px
}
.image {
width: 150px;
height: 150px;
background: grey
}
Add vertical-align:top; to the images.