This question already has an answer here:
Twitter Bootstrap 3 - Nested Form-Horizontal Responsive Design Issue
(1 answer)
Closed 1 year ago.
I am new to Bootstrap and css. I researched but could not find an answer for this or a similar case.
I put a <div class="col-md-6"> inside which I add two divs one of which class is "col-md-4" and the other one is "col-md-2". So in this case, the child divs should fit in the parent div and be in the same line, but somehow the second child div moves down. I used style="display:inline" in the second child div but it didn't really work. When I remove the parent div of which class is "col-md-6", it works as I want but I don't understand why they don't fit in the parent div although its size is big enough to contain both child divs in the same line.
This doesn't work the way I want;
<div class="row">
<div class="col-md-6">
<div class="col-md-4">
<input class="form-control" id="addItem" style="display: inline;">
</div>
<div class="col-md-2">
<button class="btn btn-default" style="display:inline;">submit</button>
</div>
</div>
</div>
This one does;
<div class="row">
<div class="col-md-4">
<input class="form-control" id="addItem" style="display: inline;">
</div>
<div class="col-md-2">
<button class="btn btn-default" style="display:inline;">submit</button>
</div>
</div>
Every time that you want to make a col, it must be inside a new row. This is because row splits in 12 columns the grid. If you put a col inside a col, the grid doesn't exist and this is why your code fail.
Here you have:
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-4">
<input class="form-control" id="addItem" style="display: inline;">
</div>
<div class="col-md-2">
<button class="btn btn-default" style="display:inline;">submit</button>
</div>
</div>
</div>
</div>
Related
I want to center following divs in the middle of the screen HORIZONTALLY AND VERTICALLY (2 SITES). What should I add to my HTML code to make it works? I managed to center div from first site vertically by adding justify-content-center class to 2nd div, but the same is not working for second site.
first site
<div class="container">
<div class="row justify-content-center">
<div class="form-group col-md-4">
<form method="post" th:object="${redirectionDto}">
<div class="form-group">
<label for="urlinput">URL</label>
<input type="text" id="urlinput" class="form-control" th:field="*{url}" name="urlinput"
maxlength="255"/>
</div>
<div class="form-group">
<label for="date">Date:</label>
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"
th:field="*{expireDate}" id="date" placeholder="Date"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar-alt"></i></div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</div>
</div>
</div>
second site
<div class="container">
<label>Short link: </label>
<p th:text="${redirectionDto.alias}"></p>
<label>Expire date: </label>
<p th:text="${#dates.format(redirectionDto.expireDate, 'dd/MM/yyyy h:mm a')}"></p>
<a th:href="#{/}" class="btn btn-primary">Return</a>
</div>
Wrap it like so:
<div class="container">
<div class="row justify-content-center">
<!-- START THE DIV -->
<label>Short link: </label>
<p th:text="${redirectionDto.alias}"></p>
<label>Expire date: </label>
<p th:text="${#dates.format(redirectionDto.expireDate, 'dd/MM/yyyy h:mm a')}"></p>
<a th:href="#{/}" class="btn btn-primary">Return</a>
</div>
<!-- /END THE DIV -->
</div>
how i normally align <div>s to the centre is by using margins, so using some maths, you would do:
full width of page (say, 100%) - div width, then half this, that's your left margin. then do the same for height, that's your top margin.
this has mostly worked in my experience. hope i am of help!
Can you please check the below code? Hope it will work for you.
If you want to place your content in middle both horizontally and vertically then flex utility classes are very helpful.
In your First site code, you have used justify-content-center with class="row" which centers the content horizontally, if you will use align-items-center class along with it then the content will be centered vertically. In this case, if you will give a particular height to your .row class then you can see the content div in the center.
<div class="row justify-content-center align-items-center">
</div>
.container .row {
height: 100vh;
}
In your Second site, you need to wrap your content in a div and need to give the same classes "row justify-content-center align-items-center" to its parent div similarly as you give it in your first site code.
Please refer to this link:
1st Site:
https://jsfiddle.net/yudizsolutions/schgm9xk/
2nd Site:
https://jsfiddle.net/yudizsolutions/tk2eqdsx/
I am using Bootstrap 4. I am facing an odd issue. I am adding the html using the jquery. The div has call .col-md-9 d-flex. When the other div's are appened to main div (under parent col-md-9) one it overflows and takes whole page (width) and over ride the other div (col-md-3). The code is given as
<div class="container-fluid">
<div class="row">
<div class="col-md-9 filters-div d-flex"><!-- the dynamic code will append to this div-->
<div class="col-md-2 col-xs-6">
<div class="form-group">
<label>Date and time range:</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-clock"></i></span>
</div>
<input type="text" id="reservationdate" class="form-control float-right datetimepicker-input" data-toggle="datetimepicker" data-target="#reservationdate">
</div>
<!-- /.input group -->
</div>
<!-- /.form group -->
</div>
</div>
<div class="col-md-3 d-flex">
<div class="my-div">
<a href="javascript:void(0)" data-toggle="modal" data-target="#modal-default">
<i class="fas fa-filter"></i>Add Filters
</a>
Cancel
Submit
</div>
</div>
</div>
</div>
The jquery which produces the dom element is as follows
$(document).delegate(".add-filter","click",function(){
$val=$("#filter-add").val();
$text=$('#filter-add option:selected').text();
$new_text=$text.replace(/ /g, "-");
$html="<div class='col-md-2 col-xs-6 delete-all' id='"+$new_text+"'><div class='form-group'>";
$html+="<label>"+$text+":</label>";
$html+="<div class='input-group'>";
$html+="<input type='text' class='form-control float-right'><div class='input-group-prepend'><span class='input-group-text delete-filter' data-text='"+$text+"' data-value='"+$val+"'><i class='fas fa-trash'></i></span> </div></div>";
$html+="</div></div>";
$(".filters-div").append($html);
$("#filter-add option:selected").remove();
$('#filter-add').prop('selectedIndex',0);
});
Do let me know whats the issue. The example is here
UPDATE:
The screenshot is attached as follows
You can use flex-wrap to your div:
<div class="col-md-9 filters-div d-flex flex-wrap"><!-- the dynamic code will append to this div-->
Instead, if you don't want to wrap you can reduce the max-width of col-md-2:
.col-md-2 {
max-width: 12% !important;
}
Your issue is up to col-md-2: when you have much of them you get the problem.
I'm trying to align the .time div (left) and .saveIcon div (right) within the .card div I've created but they just seem to be stacking horizontally on the left of my .card div. I'm sure I'm missing something fairly obvious but any help would be appreciated.
<div class="jumbotron" style="background-color:white">
<div class="card col-lg-12">
<div class="time col-lg-2"></div>
<div class="card-body col-lg-8">write tasks here</div>
<button class="saveIcon col-lg-2">
<i class="fa fa-lock"></i>
</button>
</div>
</div>
So there are a few issues with the snippet you've supplied, and they come down to what Bootstrap expects when rendering the layout.
Here is the basic use of the col tag in Bootstrap and it's expected outer Grid Layout.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
As you can see, a container must wrap a row which then contains a col element.
As per Bootstrap Rows and Columns - Do I need to use row?:
Yes, you need to use row. Only columns may be immediate children of rows
Here is your amended code as a result of these required rules:
<div class="container">
<div class="card">
<div class="card-block">
<div class="row">
<div class="time col-2"></div>
<div class="card-body col-8">write tasks here</div>
<button class="saveIcon col-2">
<i class="fa fa-lock"></i>
</button>
</div>
</div>
</div>
</div>
Also, please ensure you're correctly referencing Bootstrap in your head: Bootstrap Get Started
Here is the JSFiddle showing the working output with Bootstrap.
I have a website that displays many real-time graphs and gauges, all hidden within drawers initially. The graphs are made with the plotly.js library. The gauges are done with JustGage. The code for the containers is as such:
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-5 statistics">
<div class="centered-text">
<div class="container-fluid">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-heading">Statistics Panel</h3>
</div>
<ul class="list-group">
<!-- Base Station Panel -->
<li class="list-group-item">
<div class="row toggle" id="dropdown-detail-1" data-toggle="detail-1">
<div class="col-lg-10 text-left">
Base Station
</div>
<div class="col-lg-2"><i class="fa fa-chevron-down pull-right"></i></div>
</div>
<div id="detail-1">
<hr></hr>
<div class="container-fluid">
<div class="fluid-row">
<div class="col-lg-6">
<div id="happygraph1"></div>
<input id="happybutton1" type="button" value="View History"
onclick="happygraph1.changeMode();"/>
</div>
<div class="col-lg-6">
<div id="happygraph2"></div>
<input id="happybutton2" type="button" value="View History"
onclick="happygraph2.changeMode();"/>
</div>
</div>
<div class="fluid-row">
<div class="col-lg-6">
<div id="happygraph3"></div>
<input id="happybutton3" type="button"
value="View History" onclick="happygraph3.changeMode();"/>
</div>
</div>
<div class="container-fluid">
<div class="fluid-row">
<div class="col-sm-6">
<div id="happygauge1 style="height: 250px; width: 300px;"></div>
</div>
</div>
<div class="col-sm-6">
<div id="happygauge2" style="height: 250px; width: 300px;"></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The issue is that when the page loads, if the data begins appearing on the graphs before the hidden element is expanded, the graphs' containers extend out of the newly expanded element. However, if the element is expanded first, and then the data comes in, it acts exactly how it should. There is no issue with the gauges.
Here is a screenshot of when it's working:
graph containers stay within element
Here is a screenshot of when the element is expanded after the data has started being drawn: graph containers expand out of element
The drawers (and the layout in general) is done up by bootstrap. What is causing the containers to break? I have tried playing with the fluid row and container properties, however to no avail. Thanks in advance.
It seems the issue was not with Bootstrap at all but with some of the layout options set in Plotly. Plotly was sizing the graphs to be much larger than the container only when loaded hidden.
I am learning how to use Twitter Bootstrap. I need to put two buttons in one row, one in the centre and the other to the right. The buttons are in the right positions column wise but they are in different rows.
Could anyone assist me with fixing my code below to get the two buttons on the same row?
<div class="row">
<div class="col-sm-6">
<p class="lead pull-right"><button class="btn btn-default ">Edit Button left</button></p>
</div>
<div class="col-sm-6 col-sm-offset-6">
<button class="btn btn-default lead pull-right ">Edit Button Right</button>
</div>
</div>
The problem is that on your second div class you use col-sm-offset-6. Delete this and it should align on the same row.
Using offset will give you a left margin of 6 columns, and since your first div already use 6 columns, there arent enough columns on the same row.
I agree with the above answer, here is the code from bootstrap page which has some fairly clear examples: http://getbootstrap.com/css/
<div class="col-sm-9">
<div class="row">
<div class="col-xs-8 col-sm-6">
<p class="lead pull-right"><button class="btn btn-default ">Edit Button left</button></p>
</div>
<div class="col-xs-4 col-sm-6">
<p class="lead pull-right"><button class="btn btn-default ">Edit Button Right</button></p>
</div>
</div>
It does leave a space between the buttons, I don't know if you want that there or not.