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.
Related
Can some one help me lining Select Drop down, Input and Submit button in one row.
I am getting only Input and Button aligned in row but Select is going upside.
I tried below in CSS but didn't work
display : inline;
Can you please help to modify the CSS to align all in one row.
Demo
Your example is a bit everywhere. Also, "selecter" should be spelled "selector", but that is beside the point. Use more <div> elements to wrap around smaller code segments. For example:
<div>
<div class="item"><p>Hello</p></div>
<div class="item"><p>Stack</p></div>
<div class="item"><p>Overflow!</p></div>
</div>
Normally, these <div>'s would display underneath one another. However, if we add a styling rule similar to the one you're using, we will get the result of these three elements together on one line.
.item {
display: inline-block;
}
Wrap your button elements in a <div> container and style them with the above. Does this answer your question?
I found the solution ,I just need to make
inline-flex =>inline-flex makes the container inline while still retaining the flex layout properties.
display : inline-flex;
So, I'm attempting to make my own website (Yeah, I finally sucked it up and started doing markup, sigh) - problem I'm having is I'm trying to center a button, and it's offset a little. Without the <center> it's all the way to the left.
Also tried :
style="align-items:center"
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<center><input class="button0" value="Install Redux" type="button" /></center>
</fieldset>
</div>
</div>
You just have to put <center> before your <div> and close it after </div>.
Like this:
<center>
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<input class="button0" value="Install Redux" type="button" />
</fieldset>
</div>
</div>
</center>
I've also made a CodePen and a JSFiddle for you.
Try text-align:center on the parent, or use left:0;top:0;position:relative;webkitTransform:translate3d(-50%,0%,0%); where parent doesn't have position:static (the default)
I would also recommend checking out Bootstrap because it has a nice grid layout that lets you define which 12ths of the page you want columns to lay in, simply by defining classes like .btn-default or .nav or in your case class="col-xs-12" inside that other column
They also have really nice styles for forms and input buttons etc. (see video on my example site below)
Try resizing your browser while looking at their examples. Pretty much, you define class="col-xs-12" if you want it to appear as 12/12 width of the row on extra small (mobile) and LARGER devices, and you can mix them class="col-xs-12 col-md-6" so it will split the row on larger (tablet) size devices. It's the number 1 repository on GitHub, and only takes about 30 minutes to read through the Grid Layout and search around for "Nav" and "Button" elements.
I recently made a quick site http://neaumusic.github.io, feel free to check it out, and good luck
Two ways:
1) Set margin-left: auto; AND margin-right: auto; to the containing div OR
2) Set display:flex; AND justify-content:center;to the parent container.
Google flex box for a little more information, its very useful for layout once you get the hang of it.
As stated in the comments, the center tag is no longer supported.
What about if you try #form-container { text-align: center; } ? It will center all children, including button.
I would definitely recommend using flexbox, the only issue being ie8/9 support.
It really makes layout so much easier and you don't have to create very specific, often arbitrary margins to get your stuff to align nicely, particularly vertical alignment.
Your alignment options are split between the container and the items. It does row and column layout too.
Here is a link I used to get me started.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
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'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
I'm trying to do a simple layout on bootstrap but I can't find a solution that doesn't involve javascript.
I need the template to be like this on medium / large desktops: http://jsfiddle.net/Xx3G4/1/
And it must stay like this on small devices: http://jsfiddle.net/Xx3G4/
If I wasn't clear enough, I need the block "p1":
<div class="teemo-block">p1</div>
to be right after the block "stuff" on medium / larges and after the news on small / x-small.
PS:
Do not forget to re size the jsfiddle to see it on the correct viewport;
The solution of this problem using javascript is pretty easy, the problem is finding one without the use of it.
Thanks for reply
If you are using twitter bootstrap and if you don't have problem creating 2 "p1" blocks, one before and the other after the block "stuff", then there is one solution with the bootstrap class name. Bootstrap has a class called hidden-phone(renamed as hidden-xs in version 3), which hides the element with this class names in phones. Check here
The other solution would be to create 2 blocks as said above, use media queries to display one block and hide the other block. But this is not a pretty good solution, just in case if you don't find any other way without involving javascript
Just reposting and translating the answer I got on Portuguese SO (https://pt.stackoverflow.com/questions/9508/posicao-dos-blocos-em-bootstrap/9721#9721)
I have removed the classes col-push and col-pull and replaced them to pull-left and pull-right, also from bootstrap.
<div class="col-xs-12 col-md-4 pull-right">
<div class="teemo-block">
p1
</div>
</div>
Since, by default, all the 'cols' on bootstrap has float left, if you want to change that you must change it manually, that's why the news block got the pull-left and the other blocks got the pull-right, forcing them to stay on the desired position.
Check the result:
http://jsfiddle.net/luckmattos/hsCw9/7/