I made a sample html page with bootstrap column. In column it's necessary to insert a text (from Firebase) at the specific position.
For example: I want to insert "test" at the column 3.
For that, I create the Firebase with the "currentMessage" field and "location" field.
Until now, I use javascript for save and show information from Firebase. Also, I used in my code AngularJS to show 2 messages (just to learn...).
Here is my index.html code:
<!DOCTYPE html>
<html ng-app="root">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Grid</title>
<!-- Bootstrap -->
<link href="bootstrap.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<!--FOR ANGULAR JS-->
<script src="root.js"></script>
<script src="services.js"></script>
</head>
<!--END ANGULARJS -->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container-fluid">
<div class="header">
<div class="row">
<div ng-app="root">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" > <div ng-controller="Ctrl1"><center>{{message}}</center></div> </div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 blue9" > <div ng-controller="Ctrl2"><center>{{message}}</center></div></div>
</div>
</div>
</div>
<div class="content">
<div class="top-content">
<div class="row">
<div ng-app="root">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" ><div ng-controller="Ctrlocation">{{message}}</div></div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="top-content">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
<div class="col-xs-6 col-sm-9 col-md-6 col-lg-6 blue" >.col-md-6</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
</div>
</div>
</div>
<div class="bottom-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 red12" >
<div id="lblCurrentMessage" class="text-center"></div>
</div></div>
</div>
<br><br>
<div class="form-group">
<input type="text" id="txtNewMessage" cass="form-control">
<button id="btnUpdateMessage" class="btn btn-primary">Add Text</button>
<br><br>
<input type="text" id="txtNewMessage2" cass="form-control">
<button id="btnUpdateLocation" class="btn btn-primary">Add Location</button>
</div>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script>
var lblCurrentMessage = document.getElementById('lblCurrentMessage'),
txtNewMessage = document.getElementById('txtNewMessage'),
txtNewMessage2 = document.getElementById('txtNewMessage2'),
btnUpdateMessage = document.getElementById('btnUpdateMessage');
btnUpdateLocation = document.getElementById('btnUpdateLocation');
rootRef = new Firebase('https://web-quickstart-8326d.firebaseio.com/'),
currentMessageRef = rootRef.child('currentMessage');
locationRef = rootRef.child('location')
btnUpdateMessage.addEventListener('click', function(){
currentMessageRef.set(txtNewMessage.value);
txtNewMessage.value='';
});
btnUpdateLocation.addEventListener('click', function(){
locationRef.set(txtNewMessage2.value);
txtNewMessage2.value='';
});
currentMessageRef.on('value', function(snapshot){
txtNewMessage.value='';
});
currentMessageRef.on('value',function(snapshot){
lblCurrentMessage.innerText = snapshot.val();
});
</script>
<!--AngularJS scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script>
<script src="root.js"></script>
<script src="services.js"></script>
<!--END ANGULARJS -->
</body>
</html>
And here is my root files from angular:
var root = angular.module('root', []);
root.controller('Ctrl1', function ($scope)
{
$scope.message = "Eu sunt coloana 3";
});
root.controller('Ctrl2', function ($scope)
{
$scope.message = "Eu sunt coloana9";
});
I need idea/help how can implement this feature. (to insert text, at the specific position in my website).
I think it's necessary to use AngularJS for that, but i'm novice and i don't have idea how can make that.
I tried to make a controller, look like that:
root.controller('Ctrlocation', function($scope){
if($scope.location=txtNewMessage2.value){
$scope.message = txtNewMessage.value='';
}
});
But, didn't work and I don't know exactly where it's necessary to insert ng-controller in my index.
Thank you for help!
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="modal-body clscard" >
<div th:if="${session.listSize}!=0">
<div class="card removeit mb-2 asp1 bdrtwenty" th:each="task,itrIndex : ${session.taskList}">
<div class="card-header text-center">
<span class="fntsizes"> Activity Reminder : </span><span class="fntsizes" th:text="${task.taskName}"></span>
</div>
<div class="card-body" id="datas">
<div class="row">
<div class="col-md-12">
<p class="text-center"><b>Description</b></p>
<p class="dsctask text-center" th:text ="${task.taskDescription}"> </p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 text-center">
<span class="text-center" for="data"><b>Target Date :</b></span>
<span class="text-center" th:text= "${task.taskTresholdCutOff}"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 mx-auto mt-2">
<div class="form-group">
<textarea class="form-control" id="userdata" rows="6"></textarea>
</div>
</div>
</div>
</div>
<div class="card-footer" style="padding:5px;">
<div class="row">
<div class="col-md-6"> </div>
<div class="col-md-3"> <button th:attr="onclick=|saveIt('${task.taskId}')|" class="btn btn-primary float-right clscurrent">Done</button></div>
<div class="col-md-3"><button th:id="'btnSubmit'+${itrIndex.index}" class="btn btn-danger float-right clscurrent" disabled="disabled">Skip</button></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#userdata").keyup(function () {
var btnSubmit = $("#btnSubmit");
//var btnSubmit = $('btnSubmit').each((btn, index) => {btn.attr('id', `btnSubmit${index}`});
if ($(this).val().trim() != "") {
btnSubmit.removeAttr("disabled");
} else {
btnSubmit.attr("disabled", "disabled");
}
});
});
</script>
</body>
</html>
<div class="modal-body clscard" >
<div th:if="${session.listSize}!=0">
<div class="card removeit mb-2 asp1 bdrtwenty" th:each="task,itrIndex : ${session.taskList}">
<div class="card-header text-center">
<span class="fntsizes"> Activity Reminder : </span><span class="fntsizes" th:text="${task.taskName}"></span>
</div>
<div class="card-body" id="datas">
<div class="row">
<div class="col-md-12">
<p class="text-center"><b>Description</b></p>
<p class="dsctask text-center" th:text ="${task.taskDescription}"> </p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 text-center">
<span class="text-center" for="data"><b>Target Date :</b></span>
<span class="text-center" th:text= "${task.taskTresholdCutOff}"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 mx-auto mt-2">
<div class="form-group">
<textarea class="form-control" id="userdata" rows="6"></textarea>
</div>
</div>
</div>
</div>
<div class="card-footer" style="padding:5px;">
<div class="row">
<div class="col-md-6"> </div>
<div class="col-md-3"> <button th:attr="onclick=|saveIt('${task.taskId}')|" class="btn btn-primary float-right clscurrent">Done</button></div>
<div class="col-md-3"><button th:id="'btnSubmit'+${itrIndex.index}" class="btn btn-danger float-right clscurrent" disabled="disabled">Skip</button></div>
</div>
</div>
actually I'm facing issue with buttons id's basically i am getting dynamic id's (like btnSubmit0, btnSubmit1)for buttons here I just to to when i enter a text in textarea button should enable otherwise it should be in disabled. but in my script i have a static id like butSubmit how to resolve this issue , Is there any possible pls help me on it.
note:actually i am using bootstrap card in that card I have button and other hand this card have a loop also , I' mean every button inside the loop due to i have append a unique id to buttons.
You have to update ID in html like,
id="btnSubmit"+ i
<button id="btnSubmit"+ i class="btn btn-danger float-right clscurrent" disabled="disabled">Skip</button>
script on load/ready
var i=0;
$('.btn').each(function(){
i++;
var newID='btnSubmit'+i;
$(this).attr('id',newID);
});
After type a number in input control, below will display multiplication it is working for when i'm using single row but when i work for multiple row this is not working.
How can i do it?
$(function() {
$('.form-control').keyup(function() {
$('.input-number').text($(this).val());
$('.total').text($('.static-number').text() * $('.input-number').text());
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>
You need to loop through classes and perform the calculations.
$(function() {
$('.form-control').keyup(function() {
$('.input-number').text($(this).val());
$('.static-number').each(function(){
var currentElement = $(this);
var static_num = currentElement.parent().find('div.static-number').text();
var input_num = currentElement.parent().find('div.input-number').text();
currentElement.parent().find('div.total').text(static_num*input_num)
})
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>
Issue is that when you have multiple elements, your selector will return a list of elements and .text() will concat all their values.
So if you add 3 in textbox, you will get "33" for .input-number and "22" for .static-number. You will have to fetch only first element for this calculation.
Following is the sample:
$(function() {
$('.form-control').keyup(function() {
const value = $(this).val();
$('.input-number').text(value);
console.log(`Your equation is processed as: ${$('.static-number').text()} * ${ $('.input-number').text() }`, )
$('.total').text($('.static-number:first').text() * value);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>
You have to iterate through each element for calculating sum of the respective rows.
Try the below code:
$(function() {
$('.form-control').keyup(function() {
$('.input-number').text($(this).val());
$('.row').each((i, obj) => {
$(obj).children('.total').text($(obj).children('.static-number').text() * $(this).val());
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>3</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>
$(...)
returns a list of elements matching. The functions, e.g. text know how to behave when that list contains a single element but not when it contains multiple elements. you need to act on them individually.
You'll want to do something like:
$('row').each(elem => {
const sn = $(elem).find('.static-number').text()
const input = $(elem).find('.input-number').text()
$(elem).find('.total').text(sn * input)
});
Add class in row which you want to calculate value row_body and loop through this class.
$(function() {
$('.form-control').keyup(function() {
let inputVal = $(this).val();
$('.input-number').text(inputVal);
$('.row_body').each(function(){
$(this).children('.total').text(parseFloat($(this).children('.static-number').text()) * parseFloat(inputVal));
})
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row row_body">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row row_body">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>
This is not working because class names conflicting while accessing the values.
Try like this.
js:
$(function() {
$('.form-control').keyup(function() {
for(var i=0;i<$('.row_count').length;i++)
{
$('.input-number_row'+i).text($(this).val());
$('.total_row'+i).text($('.static-number_row'+i).text() *$(this).val())
}
});
});
Html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row row_count" >
<div class="col-3 static-number_row0"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number_row0"><span></span></div>
<div class="col-3 total_row0"><span></span></div>
</div>
<div class="row row_count">
<div class="col-3 static-number_row1"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number_row1"><span></span></div>
<div class="col-3 total_row1"><span></span></div>
</div>
</div>
</div>
Here is simple solution just edit your javascript
`
<script type="text/javascript">
$('.form-control').keyup(function() {
var static = $(".static-number span").html();
var number = $(this).val();
var total = static * number;
$(".input-number span").text(number);
$(".total span").text(total);
});
</script>
`
here's the issue:
Using Bootstrap 3.3.7
I have 6 images (3 icons and 3 progress bars) and wish to have the 2 last ones go to the next line when reducing the window size from col-lg to col-md (making my site as responsive as possible.) The issue is that it does not, here's the code:
<!DOCTYPE html>
<html>
<head>
<!-- Boostrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<section>
<div class="container langages" id="skills">
<div class="row iconskills">
<!-- HTML -->
<div class="col-xs-6 col-sm-offset-1 col-sm-1 col-md-offset-1 col-md-1 col-lg-offset-1 col-lg-1">
<img class="logohtml" src="img/logos/html5.png" alt="logo html5" />
</div>
<div id="progressHtml" class="col-xs-6 col-sm-3 col-md-5 col-lg-3"></div>
<!-- CSS -->
<div class="col-xs-6 col-md-offset-2 col-md-1 col-lg-offset-0 col-lg-1">
<img class="logocss" src="img/logos/css32.png" alt="logo css3" />
</div>
<div id="progressCss" class="col-xs-6 col-sm-3 col-md-2 col-lg-3"></div>
<!-- BOOTSTRAP -->
<div class="col-xs-6 col-sm-1 col-lg-1">
<img class="logobs" src="img/logos/bootstrap.png" alt="logo bootstrap" />
</div>
<div id="progressBs" class="col-xs-6 col-sm-3 col-lg-2"></div>
</div>
</div>
</section>
<footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</footer>
</body>
</html>
I added 2 screenshots showing what is happening:
Before
After
What is strange is that bootstrap has a grid made of 12 columns, when I check in my divs in col-md I have those 12 columns in my first 4 divs (which is what I want since I want the 2 last to go to the next line) but the behavior is not what I'm expecting.
I'm probably missing something obvious but help would be great, thanks !
Don't hesitate if I'm not clear or missing some infos.
I think you are trying to achieve below layout. My views are that you should get familiar with bootstrap built in components(classes). I have changed little bit code of yours, you can further edit it and reference your correct path for images.
Bootstrap 3.3 : https://getbootstrap.com/docs/3.3/components/
Some reference css links that I have used in build
Progress bar : https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp
Grid : https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
Image responsive : https://www.w3schools.com/bootstrap/bootstrap_images.asp
HAPPY CODING : All the best for you resume, do share the link once it is completed.
<!DOCTYPE html>
<html>
<head>
<!-- Boostrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<section>
<div class="container langages" id="skills">
<div class="row iconskills">
<!-- HTML -->
<div class="col-xs-12 col-sm-4">
<div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
<img class="img-responsive logohtml" src="./img01.png" alt="logo html5" />
</div>
<div id="progressHtml" class="col-xs-6 col-sm-3 col-md-5 col-lg-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div>
</div>
<!-- CSS -->
<div class="col-xs-12 col-sm-4">
<div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
<img class="img-responsive logocss" src="./img01.png" alt="logo css3" />
</div>
<div id="progressCss" class="col-xs-6 col-sm-3 col-md-2 col-lg-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div>
</div>
<!-- BOOTSTRAP -->
<div class="col-xs-12 col-sm-4">
<div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
<img class="img-responsive logobs" src="./img01.png" alt="logo bootstrap" />
</div>
<div id="progressBs" class="col-xs-6 col-sm-3 col-lg-2">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
</footer>
</body>
</html>
Thanks a lot for your answer!
The simple fact of adding a new div around each languages helped me sort my problem out!
Thanks again!
Hi I am facing a problem that: MY HTML,js,Bootstrap based View of my web project shows perfectly/fine on my Google Chrome browser i have not hard coded any screen size. But when I open this same project on other machines Google Chrome browser the UI/View is totally distorted and also my jS/jQuery functions stop functioning . How can I control this behavior.
I have my code below, my I guess it is more browser compatibility than code issue. Please advise.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Wallboard A</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>High ARPU - H+HVC</h1>
</div>
</div>
</div>
</header>
<section class="the-table">
<div class="container-fluid">
<div class="row no-gutter row-eq-height">
<div class="col-md-2 col-sm-6">
<em><span>Logged In Agents</span></em>
<span><span>6232</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>On Calls</span></em>
<span><span>456</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Ready</span></em>
<span><span>1553</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Not Ready</span></em>
<span><span>0</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Wrapup</span></em>
<span><span>45</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Reserved Agents</span></em>
<span><span>478</span></span>
</div>
</div><!--/row-->
<div class="row no-gutter">
<div class="col-md-2 col-sm-6">
<em><span>Calls Offered</span></em>
<span><span>4566</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls Answered</span></em>
<span><span>1388</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls Abandoned</span></em>
<span><span>3874</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls In Queue</span></em>
<span><span>0</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Longest Talk Duration</span></em>
<span><span>00:45:55</span></span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-md-2 col-sm-6">
<em><span>Abandoned %</span></em>
<span><span>50%</span></span>
</div>
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/the-table-->
<section class="the-table wide">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12">
<em class="large">Service Level %</em>
<span class="large">79.0%</span>
<div class="clearfix visible-xs"></div>
<em>AHT (Sec)</em>
<span>136</span>
<em>ASA (Sec)</em>
<span>32</span>
<em>Max Time In Queue</em>
<span>00:00:00</span>
</div>
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/the-table-->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
I want to achieve these:
Computer view:
Tablet Portrait view:
Mobile Portrait view:
Currently I have this following code, where the "home-content" part will generate the items#1-items#X:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../_lib/normalize.css/normalize.css">
<link rel="stylesheet" href="index.css">
<script src="../_lib/jquery/jquery.min.js"></script>
<script src="../_lib/jquery/jquery.fittext.js"></script>
<script src="../_lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<title></title>
</head>
<body>
<script>
init();
</script>
<div class="home-bg"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="home-noti">
<div class="news-noti">
<div class="news-panel panel">
<div class="news-title panel-heading">
<h2 class="panel-title">NEWSFLASH!</h2>
</div>
<div class="news-items-wrapper">
<ul id="news-items" class="news-items list-group"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div id="home-content" class="home-content"></div>
</div>
</div>
</div>
</body>
</html>
This piece of code can achieve the "Computer view" and "Tablet Portrait view". I could have done it in using 4 of "col-md-3" but that will mean sometimes I might get Notifications col with 2 items on the same row OR Notifications col with 1 item on the same row, which is not what I want. How do I achieve the "Mobile Portrait view" without breaking the layout of the previous 2?
You can use nested columns for this.
row
col-*-*
row
col-*-*
row
col-*-*
Review the Docs and view working example at Full Screen then reduce the viewport.
/**FOR DEMO PURPOSES ONLY**/
html,
body {
margin-top: 50px;
text-align: center;
}
.alert.alert-info {
height: 100px;
border-radius: 0;
}
.alert.alert-info-tall {
height: 340px;
border-radius: 0;
}
/**FOR DEMO PURPOSES ONLY**/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div class="alert alert-info alert-info-tall">Notifications</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-sm-4">
<div class="alert alert-info">1</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">2</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">3</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">4</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">5</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">6</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">7</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">8</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">9</div>
</div>
</div>
</div>
</div>
</div>
Try to figure out Bootstrap Gird Options and
you just Need to know when to use which class for which screen and you are good to go.
Here is the working structure for your reference.
<div class="row">
<div class="left-block col-lg-4 col-md-12 col-xs-12">
Aside Section
</div>
<div class="content-block col-lg-8 col-md-12 col-xs-12">
<div class="row" style="padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 1</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 2</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 3</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 4</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 5</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 6</div>
</div>
</div>
</div>
Use this :
<div class="container">
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="col-xs-12 notification">
<p>Notifications</p>
</div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 1</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 2</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 3</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 4</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 5</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 6</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 7</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 8</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 9</p>
</div>
</div>
</div>
</div>
</div>
And this style will help to get a better look :
.notification {
background-color:#000;
height:auto;
padding-top: 50px;
padding-bottom:50px;
margin-bottom:10px;
}
.item {
background-color:#333;
height: auto;
margin-bottom:10px;
}
p {
color:#ffffff;
}
Here is the fiddle : http://jsfiddle.net/xwmmfu0e/
You need to add an xs prefix. Try this adding col-xs-6 to both divs.
<div class="col-md-3 col-xs-6">
...
</div>
...
<div class="col-md-9 col-xs-6">
...
</div>