I have tried using the row class but it was not solving the problem. I am just trying to take two divs and put them next to each other using only bootstrap and not css. (It's a corner case where I can't add any css) Is there a way to do this?
Basically I have this:
<div class="OuterMostClass row">
<div class="outerClass">
<button class="btn">button1</button>
</div>
<div class="outerClass2">
<button class="btn">button2</button>
</div>
</div>
And I want the two buttons to be next to each other and due to limitations I can't add any css other than bootstrap. Is this possible?
Your code sample doesn't show a parent div with the container or container-fluid class and your columns are missing size classes.
Try this:
<div class="container">
<div class="OuterMostClass row">
<div class="outerClass col-xs-6">
<button class="btn">button1</button>
</div>
<div class="outerClass2 col-xs-6">
<button class="btn">button2</button>
</div>
</div>
</div>
The answer is to add the pull-left class to the buttons but as Matthew points out adding a container makes it easier to take care of other spacing
Related
I have a very simple piece of code that I am trying to get to work and its giving me issues.
I have a grid of 9 and 3 set up. 9 being the tool title and 3 being the status of the tool.
In the code below however, even though I am using pull-right to get the content to the right side of the col-md-3 the content within that isn't aligned to the right like I expect it to be.
Here is a fiddle: https://jsfiddle.net/p5yctnw0/2/
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
</div>
<div class="col-md-3"><span class="pull-right"><h4>Active</h4>(dates & replacement if applicable)</span></div>
</div>
</div>
What I would expect:
I know this is going to be a silly css attribute I am missing but not sure what else to try.
The content is aligned to the right but the text is not right aligned. Use text-right css class to right align the text.
<span class="pull-right text-right">
<h4>Active</h4>
(dates & replacement if applicable)
</span>
You can use let the text to the right:
.col-md-3 {text-align:right}
https://jsfiddle.net/p5yctnw0/5/
https://jsfiddle.net/p5yctnw0/3/
Use the class text-right when it comes to text. pull-right is for divs.
Basically what you are looking for is text-align:right . Use it to get your desired output. If you want both the span and the trailing text to be pulled right, use #van-tuan-pham 's answer. Or use only to the span.
But do not override bootstrap classes. Instead use your own class or id selectors to set css attributes.
simply do like this way
.alignment {
text-align:right;
}
.alignment span {
display:block;
font-size:13px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
</div>
<div class="col-md-3 alignment">
<h4>Active <span>(dates & replacement if applicable)</span></h4>
</div>
</div>
</div>
Looks like it pulls the div right, but the spans are still left aligned within the div.
Split the div into 2 spans, one for each line.
<div class="col-md-3">
<span class="pull-right">
<h4>Active</h4>
</span>
<span class="pull-right">(dates & replacement if applicable)</span>
</div>
replace row div your code with following:
<div class="row">
<div class="col-md-9">
<h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
</div>
<div class="col-md-3 text-right" ><span><h4>Active</h4>(dates & replacement if applicable)</span></div>
</div>
I have a page where container-fluid is the main div and then nav comes. After nav I have section where views loading in with row wrapping up content which is divided in columns or offsetted. But When I use a row class either on section or the div after , it is creating a gap between nav and page. Mainly adding it to container. But that is why we should be using container. And row is for columns so why still the gap?
<div class="container-fluid ng-scope" id="page-wrapper" ng-controller="homeCtrl as ctrl">
<nav><div class="container"></div></nav>
<section>
<div ng-controller="assumeIdCtrl as ctrl" class="row ng-scope">
<div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3">
</div>
</div>
</section>
Use default bootstrap's nav, you can copy the code from W3C.
Then make your structure correctly like, for example:
<nav> </nav>
<section class="container-fluid">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</section>
Check that there are different container types. div, nav, aside, section, footer, etc are containers by default. It's ok and awesome to use bootstrap, but we have to remember the default atributes of HTML tags before aply bootstrap.
Try with the default bootstrap's fixed nav.
I made an example of portfolio using it, you can check and inspect here:
portfolio example
it's very clean concerning js (only one jQ function if i dont remember wrong) and there's only a bit of handmaded css.
What i have is sidebar and on right side i have content. What i want is that both sides are in container but that are both full width . This is my demo: https://jsfiddle.net/DTcHh/19067/
So i want that left background color start from beging of page but text inside is in container and also i want that background color of right content go to the end of page but text is in container. Any suggestion?
<div class="container">
<div class="col-md-3">
<div class="left_sidebar">
menu
</div>
</div>
<div class="col-md-9">
<div class="right-content">
content
</div>
</div>
</div>
Its simple, wrap the colored containers above the container class and use two different containers:
<div class="left_sidebar">
<div class="container">
<div class="col-md-3">
menu
</div>
</div>
</div>
<div class="right-content">
<div class="container">
<div class="col-md-9">
content
</div>
</div>
</div>
Here is a working Fiddle
REMOVED other edits because EDIT 3 should do the trick best
EDIT 3
Here it is, that must be it for sure now. The trick is done with a linear gradientand a custom container above your bootstrap container.
See Fiddle
What you're asking, is by default impossible, since the .container class has a set width on different viewports and it is also horizontally "centerised" by margin:auto.
To achieve what you are trying you will have to follow a different "logic".
I would propose something like this:
<div class="left-sidebar col-md-3">
<div class="sidebar-menu col-xs-6 pull-right">
menu
</div>
</div>
<div class="right-content col-md-9>
<div class="content-text col-xs-10>
content
</div>
</div>
I propse this solution in order to stay in the same "flow" as your code. You could also, just play with paddings, which makes more sense.
use class row before col div
<div class="row">
<div class="col-md6"></div>
<div class="col-md-6"><div>
</div>
I have several elements I want to display on a page, and I am using Angular's ng-repeat to do it. I want to display it by having a 3x3 column, so I am using Bootstrap's col-md-4. My HTML is as follows:
<div ng-controller="resourcesController">
<div class="main-body">
<div class="container-fluid">
<div class="resources">
<div ng-repeat="org in orgs" class="col-md-4">
<img src={{org.icon}}>
</div>
</div>
</div>
</div>
</div>
However, the elements are appearing like so:
How can I center the elements and spread them over evenly across the page while using ng-repeat? Thank you!
My suggestion would be that it is not enough to use only one ng-repeat.
Instead, you could separate your orgs array into an array of arrays representing rows of columns.
Then you could modify the code similarly to below (making it easier to apply the grid format you want):
<div ng-repeat="orgRow in orgRows" class="rowClass">
<div ng-repeat="orgElement in orgRow "class="columnClass" >
<img src={{org.icon}}>
</div>
</div>
A simple bootstrap helper class text-center should do most of it for you
<div ng-repeat="org in orgs" class="col-md-4 text-center">
In addition could add class to the <a> tags and:
a.content-class{display:block; text-align:center}
I need to divide the browser window into two fluid rows so that regardless of size, they are stretched across the screen. In the first row i need to add different columns which should be centered automatically. Basically it looks like this:
The problem is that I can not center cols in first row and rows are not stretch to the browser height. My code looks like this:
<div class="container-fluid">
<div class="row" style="text-align:center">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
</div>
You can use offset to center div
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-3 col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
</div>
And you can change padding for ajust space between blocs.
See on fiddle http://jsfiddle.net/JtzE6/
Also take a look at the Alignment Classes on twitter bootstrap documentation (Twitter Bootstrap Documentation). You should be able to apply these to any element tag in html. It worked for me.. Hope this helps..