repeat a div twice horizontally - html

I want such format using bootstrap row and col.
I have tried many ways...below is the last code
<div class="row">
<form name="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div>
<label><strong>{{Heading}}}</strong></label>
<Textarea>
<span ng-bind=""></span>
</Textarea>
</div>
</form>
</div>
Please Suggest


https://codepen.io/Dooomel/pen/OJVgpzp
<div class="container">
<div class="row">
<div class="col-sm-6">
th1
</div>
<div class="col-sm-6">
th2
</div>
</div>
<div class="row">
<div class="col-sm-6">
th3
</div>
<div class="col-sm-6">
th4
</div>
</div>
</div>
Btw. You don't need to set class for every breakpoint, col-sm-6 is passed to md and lg


Please checkout this.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<body ng-app="myApp" ng-controller="myCtrl" class="row">
<form name="" class="col-6" ng-repeat="x in [1,2,3,4,5, 6]">
<div><b>{{Heading}}</b></div>
<Textarea></Textarea>
</form>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.Heading='Place holder';
});
</script>
</body>
</html>

Related

how to show daterangepicker in modal by default onload in jquery without using bootstrap

$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
<li class="contact-us__input-box-type">
<a data-open="datetimepicker" class="datetimepickerInitialze">10 Apr 2022 - 10 May 2022</a>
</li>
<div class="reveal generic_modal ap-modal look-up__modal mobile-height look-up__modal--siteReport" id="datetimepicker" data-options="closeOnClick:false;closeOnEsc:false;" data-reveal>
<div class="ap-modal__header border-bottom">
</div>
<div class="ap-modal__body ap-modal__body--reserve text-center">
<form id="contact-form" setAttribute="addForm">
<div class="ap-tabs" data-simplebar>
<div class="ap-tabs__content">
<div class="ap-tabs__content-block details-tab">
<div class="ap-form">
<div class="form-group__list ap-form__row text-left">
<div class="grid-x grid-padding-x cell">
<div class="small-12 medium-4 large-4 range-setting">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-6 large-6 cell pl0" id="stuff">
<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
I want to show calendar by default on load. Can anyone help me to solve this issue.

how to show daterangepicker by default onload in jquery without using bootstrap

I want to show calendar by default on load. Can anyone help me to solve this issue.
<li class="contact-us__input-box-type">
<a data-open="datetimepicker" class="datetimepickerInitialze">10 Apr 2022 - 10 May 2022</a>
</li>
<div class="reveal generic_modal ap-modal look-up__modal mobile-height look-up__modal--siteReport" id="datetimepicker" data-options="closeOnClick:false;closeOnEsc:false;" data-reveal>
<div class="ap-modal__header border-bottom">
</div>
<div class="ap-modal__body ap-modal__body--reserve text-center">
<form id="contact-form" setAttribute="addForm">
<div class="ap-tabs" data-simplebar>
<div class="ap-tabs__content">
<div class="ap-tabs__content-block details-tab">
<div class="ap-form">
<div class="form-group__list ap-form__row text-left">
<div class="grid-x grid-padding-x cell">
<div class="small-12 medium-4 large-4 range-setting">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-6 large-6 cell pl0" id="stuff">
<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>

Laying out responsive images with text in Bootstrap grid

I'm trying to create a layout similar to the one pictured above at the top of my page. Im using bootstrap 4, and I've created the appropriate row and column arrangement
<div class = "row">
<div class = "col-sm-2"> </div>
<div class = "col-sm-1" > Image goes here</div>
<div class = "col-sm-1" > Image goes here </div>
<div class = "col-sm-8"></div>
</div>
<div class = "row">
<div class = "col-sm-2"> </div>
<div class = "col-sm-1"> <!-- --> </div>
<div class = "col-sm-5">
<div class="row">Title Text goes here </div>
<div class="row"> More text goes here </div>
</div>
<div class = "col-sm-4"></div>
</div> `
my biggest issue comes with defining the size of the images. I would like for them to maintain a certain aspect ratio, and decrease in size (while maintaining the ratio) for smaller displays. I tried fixing the size of the columns and setting the image dimensions to fill the columns, but that doesn't work. also trying to modify the size of the images themselves make them stick out of the grid.
Also is there anyway where i can control the size at which a column wraps?

heres the code for it:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid img-responsive"">
<div class="row">
<div class="col-sm-2 col-xs-2" > </div>
<div class="col-sm-1 col-xs-1">
<img src="1.jpg" class="img-responsive" >
</div>
<div class="col-sm-1 col-xs-1">
<img src="2.jpg" class="img-responsive" > </div>
<div class="col-sm-8 col-xs-8"></div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2"> </div>
<div class="col-sm-1 col-xs-1"> <img src="3.jpg " class="img-responsive" ></div>
<div class="col-sm-5 col-xs-5">text goes here </div>
<div class="col-sm-4 col-xs-4" ></div>
</div>
</div>
</html>
<script src="" async defer></script>
</body>
</html>
you just put some images and see
check out the fiddle:https://jsfiddle.net/tyu867tk/

Personal Portfolio Page - Stuck with Bootstrap Grid Layout

https://codepen.io/shaan046/pen/vWmVNY
HTML code:
<body>
<div id="header" class="row">
<div class="col-md-1 col-lg-1"><h3 id="myText">Shantanu Tomar</h3</div>
<div class="col-md-offset-5 col-md-2 col-lg-offset-5 col-lg-2"><button class="btn btn-primary">Button1</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button2</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button3</button></div>
</div>
</body>
</html>
CSS Code
#header{
background-color:red;
}
JS code:
$(document).ready(function() {
$("body").addClass("container-fluid");
});
What I want is that the text “Shantanu Tomar” and 3 buttons on screen should come in div #header in a single row. I am using Bootstrap3. Not sure how I can provide col-- tags so that the webpage is visible on Phone, tablet, Laptop in right manner? I tried using lg and md classes but the buttons are not lining up with text “Shantanu Tomar”.
Thanks for the help!!

Try like this. and learn bootstrap from W3schools https://www.w3schools.com/bootstrap/
<html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div id="header" class="row">
<div class="col-md-12 col-lg-12">
<div class="col-md-3 col-lg-3">
<h3 id="myText">Shantanu Tomar</h3></div>
<div class=" col-md-2 col-lg-2"><button class="btn btn-primary">Button1</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button2</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button3</button></div>
</div>
</body>
</html>

Just use col-xs-3 (since you have four elements) if you want the elements to be in a single row, and no need for jquery here.
#header {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div id="header" class="row">
<div class="col-xs-3">
<h3 id="myText">Shantanu Tomar</h3>
</div>
<div class="col-xs-3">
<button class="btn btn-primary">Button1</button>
</div>
<div class="col-xs-3">
<button class="btn">Button2</button>
</div>
<div class="col-xs-3">
<button class="btn">Button3</button>
</div>
</div>
</div>

Why do not use a <ul> ?
Something like this :
<div id="header" class="row">
<ul class="list-inline">
<li><button class="btn btn-primary">Button1</button></li>
<li><button class="btn btn-primary">Button2</button></li>
<li><button class="btn btn-primary">Button3</button></li>
</ul>
</div>

Bootstrap: Get Row-span like behavior?

I have a grid layout where I want a menu on the right in desktop mode, but on the top in mobile. This works fine like this:
<div class="row">
<div class="col-sm-4 col-md-push-8"><div id="menu"></div><div id="side-content"></div></div>
<div class="col-sm-8 col-md-pull-4"><div id="main-content"></div></div>
</div>
But, I'd like to add other content directly below the menu on the right in desktop mode and have it move below the main content on mobile.
In other words, I'd like it to end up looking like what this would do on mobile:
<div class="row">
<div class="col-xs-12"><div id="menu"></div></div>
<div class="col-xs-12"><div id="main-content"></div></div>
<div class="col-xs-12"><div id="side-content"></div></div>
</div>
Is there any way to make it so I could have two cells on the right in desktop mode, but have one flow above the main content while the other flows below the main content on mobile?
Edit: Here's a picture of what I mean

Go with the link or below code also may be it can help you -
JSFiddle
HTML Code -
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-4 menuDiv">
<div id="menu">
<h1>menu</h1></div>
</div>
<div class="col-xs-12 col-sm-8">
<div id="main-content">
<h1>main</h1></div>
</div>
<div class="col-xs-12 col-sm-4 sideDiv">
<div id="side-content">
<h1>side</h1></div>
</div>
</div>
</div>
CSS Code -
#menu{
background-color:#60E877;
}
#main-content{
background-color:#E86060;
}
#side-content{
background-color:#685818;
}
#media(min-width:768px){
.menuDiv, .sideDiv{
float:right;
}
}

Try this it will work--
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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-fluid">
<div class="row">
<div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: blue;"><div id="menu"><h1>menu</h1></div></div>
<div class="col-sm-pull-8 col-md-pull-8 col-lg-pull-8"><div id="main-content" style="background-color: red;"><h1>main</h1></div></div>
<div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: green;">
<div id="side-content"><h1>side</h1></div></div>
</div>
</div>
</body>
</html>