I am a beginner to Bootstrap. I am trying to accomplish the following:
To make a div that is 2 columns wide on medium and large viewports and 12 columns on extra small viewports.
I understand that bootstrap works in rows and columns(12) and that the columns have breakpoints at which they 'break' and stack as and how applied when the screen size changes. I am thus not sure how to change the width of a div as above.
Can this be done just by using Bootstrap?
They way I think this could be implemented is using javascript to get the screen size(pixels width) and then changing the width value of the div. What could be the approach? Any leads or suggestions would be helpful.
You can simply add more classes according to the viewport width:
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>
The above gives you an output of 4 columns for larger viewports, 3 for medium and 2 for smaller.
Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Extra small devices Phones = col-xs-n
Small devices Tablets = col-sm-n
Medium devices Desktops = col-md-n
Large devices Desktops = col-lg-n
if you want 2 columns side by side at smaller viewports, you'll need to add them all in the same row:
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>
This will give you the following output at smaller viewports
Item 1 | Item 2
Item 3 | Item 4
Item 5 | Item 6
You can easily do this, like so:
<div class="col-xs-12 col-md-2"></div>
It's that easy. At the md breakpoint (970px) and above, that div will occupy 2 columns; prior to that it will occupy 12, but you can change the col-xs-12 to any number you'd like.
The bootstrap grid system is easy to get the hang of and you don't need javascript to use it. Read about it here
No you don't need js for that bootstrap grid system will suffice.
You should consult these docs to understand grid system in details--
w3 schools
example
.col-lg-2, .col-md-2, .col-xs-12
{
background-color: blue; height:500px;
}
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-xs-12">
</div>
</div>
</div>
</body>
</html>
Related
Let's go to exaplain my problem:
I have this html code:
<div id="nodeInitInsertion" class="row removePadd_oddEven_childs"></div>
This is like the parent node where the dynamic content is going to be inserted after an ajax petition. This GET petitions gives us information about what fields should we show in the form (name, lastname, gender, date of birth, and then extra fields)
Here for example we have received all of these (inside there are the inputs but this is the main information you need)
<div id="nodeInitInsertion" class="row removePadd_oddEven_childs">
<div class="col-xs-12 col-sm-6 relative margin-20-t sex_container"></div>
<div class="col-xs-12 col-sm-6 relative margin-10-t dateofbirth_container"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
<div class="col-xs-12 col-sm-6 relative margin-10-t nationality_container"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
<div class="col-xs-12 col-sm-6 email_container margin-10-t"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
</div>
It works all fine the most of the times (fig. 1).
But when there are 9 "div childrens" or more, the design breaks because one of the div.col-xs-12 should be in the left and it is in the right. (fig. 2)
And the strange this is that: If I remove a div.col-xs-12 element before the one is "wrong placed" it goes all OK.
And the most strange this that the element has nothing weird... They have all the same height too.
Did it happen to you anytime? Like: a column of bootstrap that is totally floating left, is floating to the right? why it happens?
Thank you..
I am using Bootstrap's grid to organize the layout of a webpage. Between lg and sm sizes, the webpage looks like this:
|col-1|col-2|
When the size of the window is in the xs range, the columns stack like this:
|col-1|
|col-2|
Instead, I want it to stack like this:
|col-2|
|col-1|
To do this, I created a function to switch the inner HTMLs of the div tags. It works some of the time, but occasionally col-1 is still above col-2.
function mobileHandler() {
var width=window.innerWidth;
if (width<768) {
var col1=document.getElementById('col1').innerHTML;
var col2=document.getElementById('col2').innerHTML;
document.getElementById('col1').innerHTML=col2;
document.getElementById('col2').innerHTML=col1;
}
}
window.onload=mobileHandler;
window.onresize=mobileHandler;
Is there a bug anyone can spot with my code? Or is there a better way to accomplish what I want?
Just use push and pull features of bootstrap.
See the snippet below.
.cols{
height:50px;
border:1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-md-push-8 cols">
col-2
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-md-pull-4 cols">
col-1
</div>
</div>
</div>
Apply 'pull-right' to the col-1
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 cols pull-right">
col-md-4
</div>
<div class="col-xs-12 col-sm-12 col-md-8 cols">
col-md-8
</div>
</div>
</div>
I'm having an issue trying to get two divs that are side by side the same height when the content for each of the divs are generated using an ng-repeat.
Flex box stops the site being responsive and i can't work out when would be a suitable time to call a Jquery function as the views are nested and the page doesn't actually load when the new html is displayed. I have tried ng-repeat-start and end to no avail.
Ideally once the content has loaded i would the div on the right to be the same height as the div on the left.
Would really appreciate any help with the problem.
Cheers
EDIT - Code Included
<div class="row">
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing rottnestGreen">
<div ng-repeat="bh in bikeHire" class="row">
<p class="col-xs-6">{{bh.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="bikeHire[$index].quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(bh.type, bikeHire[$index].quantity, bh.price)"></select>
<p class="col-xs-3 blueText">{{bh.price | currency}}</p>
</div>
</div>
</div>
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing np rottnestGreen">
<div ng-repeat="sf in sAndF" class="row">
<p class="col-xs-6">{{sf.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="sf.quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(sf.type, sf.quantity, sf.price)"></select>
<p class="blueText col-xs-3">{{sf.price | currency}}</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
Is it something like this you are looking for? https://jsfiddle.net/yczgaLgm/2/
Wrapping everything in a container:
<div class="row container">
And then styling the container to use flexing is the way I usually do this
.container {
display: flex;
flex-wrap: wrap;
}
The biggest downside though is IE support, I dont hope you are supporting below IE10?
I need to find a better solution regarding ng-repeat, $scope variable and infinite $digest loop. I'm sure it's not $watch issue and I'm sure it's in the way I'm updating my $scope variable.
The issue doesn't happen in Chrome. It only happens in Safari and Firefox. This is how I'm doing it. I have a $scope.chartCollection which is dynamically populated with Google Chart objects. The $scope.chartCollection can have 1 or more google chart objects depending on my selection.
In my html template, I have this code,
<div ng-repeat="device in chartCollection">
<div class="col-md-6 padding10px">
<div class="widget enable-top-radius chartProperties">
<div class="widget-title enable-top-radius dark-gray-title">
<h4>
<span class="alignleft">
<i class="fa fa-circle" ng-style="{ color : device.dotColor }"></i><span class="padding5px">{{printerTypeName}}</span><span class="padding5px">|</span><span class="padding5px" popover="{{device.modelOrLocation }}" popover-trigger="mouseenter">{{ device.modelOrLocation }}</span>
</span>
</h4>
<span class="alignright">{{device.location | uppercase }}</span>
<div style="clear: both;" class="padding5px"></div>
</div>
<div class="widget-body">
<div google-chart chart="device.chart" on-select="seriesSelected(selectedItem, $index)"></div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 no-padding chartInfoBox">{{dateForGraph}}</div>
<div class="col-md-12 col-sm-12 col-xs-12 no-padding">
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.leftCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.leftCellText"></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.middleCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.middleCellText"></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.rightCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.rightCellText"></div>
</div>
</div>
</div>
</div>
so that I can display each chart in separate divs. It works really well in Chrome but not in Firefox and Safari.
I'm getting this error in Firefox and Safari
https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5B%5D,%5B%5D,%5B%5D,%5B%5D,%5B%5D%5D
And my situation is similar to the second example they mentioned which generates a new array. However, in my situation, it will always be a new array.
I was thinking of not using ng-repeat and use $scope.chart1, $scope.chart2 etc but the problem with this approach is that I cannot tell if there will be 1, 10 or 20 charts since everything is generated dynamically. Code will be very messy!
Update:
Here is the code that generates the chart objects
http://pastebin.com/DmQkDHjW
I want to be able to disable links based on their HTML content. There are many classified sections that are available, but they are not always filled out. I would like the link to be grayed out so that end-viewers know that there is no content for that classified. My HTML structure looks like this:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<p><a class="fancyTxt" href="Classifieds/050.html">050 Farms For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<p><a class="fancyTxt" href="Classifieds/051.html">051 Houses For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<p><a class="fancyTxt" href="Classifieds/052.html">052 Miscellaneous</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
There is an HTML file for each type of classified, because that is what our classified program outputs. If there is nothing in the classified it places a string of text as a footer, but this text is also in every classified HTML file. This is the text:
<p>www.domainname.com<BR>
Your source for local online<BR>
classifieds!</p>
That text is what I would like to search for to disable links when that is the ONLY text being shown in the classified.
Thank you!
EDIT: Example of a classified page with content.
<!-- Classification Title Here -->
004 Announcements
<!-- Begin output Ad Text <startTags> </startTags> -->
<p><FONT SIZE=3>text about classified here</FONT></p><BR><HR>
<p><FONT SIZE=3>Text about classified here </FONT></p><BR><HR>
<p><FONT SIZE=3><DIV ALIGN=CENTER>www.domainname.com<BR>
Your source for local online<BR>
classifieds!</DIV></FONT></p><BR><HR>
<!-- End output Ad Text <endTags><BR><HR></endTags> -->
Since your issue isn't with disabling the link but rather finding what containers need to be disabled, perhaps try something like:
$('.col-xs-12.col-sm-6.col-md-4.col-lg-4').each(function() {
var p = $(this).children('p');
if (p.length === 1 && p.text().match(/^www\.domainname\.com/i) !== null) {
// disable link within $(this)
}
});
This grabs all child paragraph elements and ensures there is only one and that its contents begins with the "footer" contents.
This should work, HTML :
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<p><a class="fancyTxt" href="Classifieds/050.html">050 Farms For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<p><a class="fancyTxt" href="Classifieds/051.html">051 Houses For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<p><a class="fancyTxt" href="Classifieds/052.html">052 Miscellaneous</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
JAVASCRIPT :
$('div p:contains("Rent")').find('a').on('click', function(evt) {
evt.preventDefault();
return false;
});
This should disable all links containing "Rent" in text.
http://jsfiddle.net/46Zky/