I had written code for two input controls which are of different size.
<div class="row">
<div class="large-7 columns ">
<div class="row">
<div class="large-4 columns">
<label class="left inline">Email</label> <small>*</small>
</div>
<div class="large-8 columns">
<input type="email" class="input-required" placeholder="Example#bluebell.com" required>
</div>
</div>
</div>
</div>
<div class="large-5 columns" /></div>
<div class="row">
<div class="large-8 columns ">
<div class="row">
<div class="large-3 columns ">
<label class="left inline">Address</label><small>*</small>
</div>
<div class="large-8 columns ">
<input type="text" class="input-required left" placeholder="qewwrrty street">
</div>
</div>
</div>
</div>
first input control(email) within the gird size 7.
second input control(Address) within the gird size 8.
I have attached the screen short of the existing result and expected result in the below image
and the link to code snippet is attached in the below comment.
Change your code to this DEMO
<div class="row">
<div class="large-8 columns ">
<div class="row">
<div class="large-2 columns">
<label class="left inline">Email</label> <small>*</small>
</div>
<div class="large-10 columns">
<input type="email" class="input-required" placeholder="Example#bluebell.com" required>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-8 columns ">
<div class="row">
<div class="large-2 columns ">
<label class="left inline">Address</label><small>*</small>
</div>
<div class="large-10 columns ">
<input type="text" class="input-required left" placeholder="qewwrrty street">
</div>
</div>
</div>
</div>
Final Result
You missed to close the first .row div. That's what caused the controls to align incorrectly. See my fiddle here.
Related
I want to set image text after the till(calender)
like this:-
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-2">
<label><strong>Erbjudande</strong></label>
</div>
<div class="col-md-2">
<label><strong>Tillgangligt</strong></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label><small>Laddsuppfill</small></label>
</div>
<div class="col-md-4">
<label><small>Fran</small></label>
</div>
<div class="col-md-4">
<label><small>Till</small></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<small><input type="file" /></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-1"> **//here I am facing issue //here I am trying to set image text after the till calender**
Image
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-md-2">
<label><strong>Antal</strong></label>
</div>
<div class="col-md-2">
<label><strong>Giltigt</strong></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label><small>Ange antial</small></label>
</div>
<div class="col-md-4">
<label><small>Fran</small></label>
</div>
<div class="col-md-4">
<label><small>Till</small></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<small><input type="text" placeholder="600" style="width:100px" /></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-3">
</div>
<div class="col-md-5">
<button type="button">Avsluta</button>
<button type="button">Redigera</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label>status</label><strong>Aktiv</strong>
</div>
</div>
</div>
<div class="col-md-6">
#*here copy same above whole content left side*#
</div>
<div class="col-md-6">
#*here copy same above whole content right botom side*#
</div>
<div class="col-md-6">
#*here copy same above whole content left botom side*#
</div>
</div>
what I am trying see below code I am continuously divide a partision but image text not set after the till calender section
<div class="row">
<div class="col-md-4">
<small><input type="file" /></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-1"> **//here I am facing issue //here I am trying to set image text after the till calender**
Image
</div>
</div>
I am trying bootstrap partion like(4 3 3 2) and(4 4 3 1) but not work
I want to add image text after the till calender see image please
The columns in that specific row are not indeed 4 4 3 1, but 4 4 4 1.
I'm sure you just overlooked it.
<div class="row">
<div class="col-md-4">
<small><input type="file" /></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-3">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-1"> **//here I am facing issue //here I am trying to set image text after the till calender**
Image
</div>
</div>
Here I fixed it.
Bootstrap cols can max be divided in 12 parts. -> 12 = full width
You are trying 4 4 4 1 = 13 so you get
4 4 4
1
You should try something that sums up to 12. like below
4 4 3 1 or 3 3 3 3
if sum exceeds 12, it will get on next line.
I'm a beginner when it comes to CSS styling. Can anyone tell me why the surname input box is aligned differently (not left aligned to the 'surname' section) and why the payroll id input box - while much closer - still has a gap between the text box and the 'payroll #' panel? The HTML is exactly the same for both input boxes?
Code as per edit suggestion:
<div class="round-div" style="border:2px solid #428bca;">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="admin-wall">
<div class="container text-center">
<div class="row">
<img class="img-responsive center-block" style="float:inherit" src="https://s3-ap-southeast-2.amazonaws.com/jdm-my-dev-bucket/australianpharmaceuticalindustrieslogoh.png" />
</div>
<span class="border border-info">
<h1 style="color:#428bca;font-weight:bold">We Love Your Work</h1>
<h4>"Celebrating our people for demonstrating safety, health & wellbeing and our values"</h4>
<div class="panel-info">
<div class="panel-body">
<div class="row">
<div class="input-group">
<span class="input-group-addon" id="inputSurname">Surname</span>
<input type="text" class="form-control" placeholder="Smith" aria-describedby="inputSurname">
</div>
</div>
<div class="row">
<div class="input-group">
<span class="input-group-addon" id="inputPayrollId">Payroll #</span>
<input type="password" class="form-control" placeholder="53677" aria-describedby="inputPayrollId">
</div>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<img class="img-responsive center-block" style="float:inherit" src="https://s3-ap-southeast-2.amazonaws.com/jdm-my-dev-bucket/wlyw_footer.png" />
</div>
<div class="row">
<h6><small><asp:Label ID="Lblversion" runat="server"></asp:Label></small></h6>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
Use This
<div class="container">
<div class="input-group col-md-12">
// Do Your First Input Group
</div>
<div class="input-group col-md-12">
// Do Your Second Input Group
</div>
</div>
Actually I don't know how to describe the issue. I have designed a model, in which I have specify some elements in class row. But after 3 elements it leaves unnecessary spaces. Is there any issue with bootstrap class row?.Checkout the link. Click on register
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-4 standard">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 school_name">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 occupation">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 father_income">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 blood_group">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 type_of_wastage">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 photo">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 edit_photo" style="display: none;">
<div class="form-group">
</div>
</div>
<div class="col-sm-4 city">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 address">
<div class="form-group">
</div>
</div>
</div>
The Bootstrap grid syntax is wrong. A row in Bootstrap contains 12 columns. If you have already 12 columns in a row, you must open a new row. In your case, you must open a new row after you used the col-sm-4 class 3 times. So it must look like this:
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
set some min-height to all columns in register
.modal-body .col-sm-4 {
min-height: 86px;
}
You can't put all these columns in one row. with col-sm-4, you can have only 3 columns per row. after that, you need to create another row. Because in bootstrap grid system there are 12 columns per row. If you need all hose in one row, you have to use col-sm-1. But I don't think it would be a good idea. Better thing is, since you have 10 elements here, either use col-sm-4 in 4 rows or col-sm-3 in 3 rows.
You have write wrong syntax.One row in Bootstrap contains 12 blocks only. That's why unnecessary space is being shown.
I want to achieve something like this
So, in the image , A is occupying two rows and B is occupying two columns
I tried, something like this, but as you can see, the logo is never
two column wide, because it is inside a nested row, so it never looks aligned , it always looks shorter or larger
.row{
border:1px solid red;
}
.row div{
min-height: 100px;
border:1px solid black;
}
<div class="container-fluid">
<div class="row upper-row">
<div class="col-md-7" id="">
<div class="row">
<div class="col-md-12">
x
</div>
</div>
<div class="row">
<div class="col-md-8">
s
</div>
<div class="col-md-4">
LOGO
</div>
</div>
</div>
<div class="col-md-5" id="">
A
</div>
</div>
<div class="row bottom-row">
<div class="col-md-5" id="">
</div>
<div class="col-md-7" id="">
B
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-4">
A
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
B
</div>
</div>
I can not get thet rows on the page. I'm always page halved into two horizontal section and I want four vertical sections.
Here is PICTURE:
:
Here is fiddle of my code that you can easy know that what I want FIDDLE.
I only need that middle content to be like on picture.. 4 vertical columns and in that columns that i have 2 blocks.
Here is my try :
<div class="col-md-12">
<div class="pane border-right">
<div>
<div style="float: left;">
</div>
</div>
<div class="col-md-6 specifica ">
<div class="col-sm-3 border-right-dotted">
a
</div>
<div class="col-sm-3 border-right-dotted">
b
</div>
</div>
<div class="col-md-3 specifica ">
<div class="col-sm-3 border-right-dotted">
c
</div>
<div class="col-sm-3 ">
d
</div>
</div>
With this code you can create 2 rows with 4 columns like the picture,
example: http://jsfiddle.net/ignaciocorreia/rc2E7/1/
<div class="row">
<div class="col-sm-3 col-md-3">a</div>
<div class="col-sm-3 col-md-3">b</div>
<div class="col-sm-3 col-md-3">c</div>
<div class="col-sm-3 col-md-3">d</div>
</div>
----
<div class="row">
<div class="col-sm-3 col-md-3">a</div>
<div class="col-sm-3 col-md-3">b</div>
<div class="col-sm-3 col-md-3">c</div>
<div class="col-sm-3 col-md-3">d</div>
</div>
EDIT - 07-04-2017
With Boostrap 4 and flex box things change to:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
Working example: https://codepen.io/igcorreia/pen/jBjbQP