i'm working on laravel project , i need to make this form responsive , i added this <meta name="viewport" content="width=device-width, initial-scale=1.0">
but nothing change
any suggestions ?
and thank you
This is the form :
<section>
<p>Gestion des horaires</p>
<div class="row">
<div class="col-4">
<label>Lundi matin </label>
<div class="row">
<div class="col">
<input type="time" name="lun_mat1[]" />
</div>
<div class="col">
<input type="time" name="lun_mat1[]" />
</div></div>
</div>
<div class="col-4">
<label>Lundi après-midi </label>
<div class="row">
<div class="col">
<input type="time" name="lun_ap1[]" />
</div>
<div class="col">
<input type="time" name="lun_ap1[]" />
</div>
</div> </div>
<div class="col-4">
<input type="checkbox" name="rememberMe"> Fermer
</div>
</div>
</section>
I think you need to use specific col numbers and breakpoint to make you code responsive. Added col-sm-4 col-12 to your main columns. It means this block will be 4/12 of width until Small (576px) bootstrap width. And then it will we 12/12 width. More about bootstrap breakpoints ans cols here https://getbootstrap.com/docs/4.0/layout/grid/
Although added class="form-control" to your inputs. Now they are responsive too
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<section class="container-fluid">
<p>Gestion des horaires</p>
<div class="row">
<div class="col-sm-4 col-12">
<label>Lundi matin </label>
<div class="row">
<div class="col">
<input type="time" class="form-control" name="lun_mat1[]" />
</div>
<div class="col">
<input type="time" class="form-control" name="lun_mat1[]" />
</div>
</div>
</div>
<div class="col-sm-4 col-12">
<label>Lundi après-midi </label>
<div class="row">
<div class="col">
<input type="time" class="form-control" name="lun_ap1[]" />
</div>
<div class="col">
<input type="time" class="form-control" name="lun_ap1[]" />
</div>
</div>
</div>
<div class="col-sm-4 col-12">
<input type="checkbox" name="rememberMe"> Fermer
</div>
</div>
</section>
Related
Well this is my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="span4 offset4 centered">
<div class="container overflow-hidden">
<div class="col-6">
<div class="p-3 border bg-light">
<form>
<div class="container px-4">
<div className="container">
<h3>Login</h3>
</div>
<div className="container">
<div className="row align-items-center">
<label>Email address</label>
<input type="email" className="form-control" placeholder="Enter email" />
</div>
</div>
<div className="container">
<div className="row align-items-center">
<label>Password</label>
<input type="password" className="form-control" placeholder="Enter password" />
</div>
</div>
<div className="container">
<div className="row align-items-center">
<div className="custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" id="customCheck1" />
</div>
</div>
</div>
<div className="container">
<div className="row align-items-center">
<button type="submit" class="btn btn-outline-warning">Login</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
the problem is that I'd like to center it vertical and horizontal. I thoutght this is possible with the <div class="span4 offset4 centered"> but it wasn't. Anyone know an answer?
I also tried to use my own styling but it didn't work too
Why are you not using bootstraps classes? I made some changes in your code. check below code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div style="height: 100vh">
<div class="container h-100">
<div class="row justify-content-center h-100 align-items-center">
<div class="col-md-6">
<div class="p-3 border bg-light">
<h3>Login</h3>
<form action="">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-outline-warning">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Just add mx-auto and my-auto to the element you want to center within it's parent.
Like this:
<div class="parent">
<div class="container mx-auto my-auto">
<!--Content-->
</div>
</div>
Now .container would be centered vertically and horizontally inside .parent
I am using Bootstrap CSS framework and have a row with 2 columns one with input field and label and other with input field with no label. Here it's a jsfiddle.
I want the second input field to be aligned with first input field. How can I achieve this?
Any help would be highly appreciated.
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>Name</label>
<input type="text" id="First Name">
</div>
<div class="col-sm-4">
<input type="text" id="Last Name">
</div>
</div>
</div>
You can try this
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>Name</label>
<input type="text" id="First Name">
</div>
<div class="col-sm-4 align-self-end">
<input type="text" id="Last Name">
</div>
</div>
</div>
I have 2 HTML containers, but because I have span elements followed by a text input (I think this is the issue?), I'm unable to get the content in the containers centered how I want. Is there a way to push the margin or padding in on these elements? Or is there a simpler way. In the JSFiddle, they spans are pretty large, but I'd like them to be around the size of the picture below. I'm using bootstrap.
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/oy4u1sm9/4/
Idealformatting (without the large span element, of course)
Using <span> tags as labels is not best practice as they are inline elements. Try to always use <label> tags. Here is your code tweaked to match your desired styling. More comments in the fiddle below.
<div class="row mb-5">
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
</div>
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div>
</div>
I made some comments in the code for clarity. Here you go:
https://jsfiddle.net/hmLpdnqa/
You just included wrong bootstrap file. Try this and see your issue resolved or not.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<!-- ROW 1 -->
<div class="row">
<div class="col" align="center">
<h2>TITLE</h2> </div>
<div class="col" align="center">
<h2>TITLE</h2></div>
</div> <!-- ROW 1 -->
<!-- ROW 2 -->
<div class="row">
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div> <!-- ROW 2 -->
<br>
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>
</div>
I have small issue with bootstrap grid system , I have a row that has grid setup with two sections with col-md-6 , Now problem is when i zoom my browser more than 100% my Close label and input is moving to next line. I want them to stay same place all the time zoom should not effect the position of the rows.I tried to use col-xs-1 but it does not work. How can i achieve that task using bootstrap ?
main.html
<div class="row">
<div class="container col-md-6">
<div class="form-group">
<label class="col-md-5">Actual Cycle Start:</label>
<div class="col-md-7">
<div class="row">
<div class="col-xs-5">
<input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate"
k-format="'MM/dd/yyyy'" disabled />
</div>
<div class="col-xs-1">
<label class="control-label"> Close:</label>
</div>
<div class="col-md-5 changeWdh">
<input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
</div>
</div>
</div>
<div class="form-group col-md-6 fieldHeight">
<label for="challengeOutstand" class="col-md-5">Challenges
Outstanding:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="challengeOutstand"
name="challengeOutstand" maxlength="256"
ng-model="riskAssessmentDTO.challengesOutstanding" disabled />
</div>
</div>
</div>
main.css
.changeWdh{
width: 152px;
}
EDIT: try this:
<div class="container">
<div class="row">
<div class="col-6-md">
<div class="col-md-7">
<div class="row">
<div class="col-xs-1">
<label class="col-md-5">Actual Cycle Start:</label>
</div>
<div class="col-xs-5">
<input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate"
k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
<div class="row">
<div class="col-xs-1">
<label class="control-label"> Close:</label>
</div>
<div class="col-xs-5 changeWdh">
<input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 fieldHeight">
<label for="challengeOutstand" class="col-xs-5">Challenges
Outstanding:</label>
<div class="col-xs-7">
<input type="text" class="form-control" id="challengeOutstand"
name="challengeOutstand" maxlength="256"
ng-model="riskAssessmentDTO.challengesOutstanding" disabled />
</div>
</div>
</div>
place your col-5 and col-1 into row div's or make them both into xs, not one md and one xs, and place them into a div container class "col-md-6"
Suppose I have the following HTML using Bootstrap to style:
<form class="form-horizontal">
<div class='container'>
<div class="row">
<div class="col-sm-3">
<div class='form-group'>
<label>First Name</label>
<input></input>
</div>
<div class='form-group'>
<label>Last Name</label>
<input></input>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<input type="checkbox"></input>
</div>
<div class='form-group'>
<input></input>
<input></input>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<input type="checkbox"></input>
</div>
<div class='form-group'>
<input></input>
<input></input>
</div>
</div>
</div>
</div>
</form>
You can see the code here. What I am trying to do is set up a even 3 x 3 matrix with the input(checkbox included) with position (1,1) missing.
In addition to this I want the labels to sit to the left of the text inputs and remain there without shifting to the top of the first set of inputs.
You could do this by setting a minimum width on form-group and using that class consistently across the columns. Because the size needed to keep the label next to the input, you'd also need to adjust the column width; use md instead of sm.
.form-group {
min-width: 20em;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class='container'>
<div class="row">
<div class="col-md-3">
<div class='form-group'><br /></div>
<div class='form-group'>
<label>First Name</label>
<input />
</div>
<div class='form-group'>
<label>Last Name</label>
<input />
</div>
</div>
<div class="col-md-3">
<div class='form-group'>
<input type="checkbox" />
</div>
<div class='form-group'>
<input />
</div>
<div class='form-group'>
<input />
</div>
</div>
<div class="col-md-3">
<div class='form-group'>
<input type="checkbox" />
</div>
<div class='form-group'>
<input />
</div>
<div class='form-group'>
<input />
</div>
</div>
</div>
</div>
</form>