I have the following markup, which should result in the input being stacked above the row of icons. Alas, they each take up half the width of the footer. I've spent way too much time trying to find the culprit CSS related to the footer, but have come up short.
<div class="bar bar-footer bar-balanced auto-height">
<div class="row">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Email" />
</label>
</div>
</div>
<div class="row">
<div class="col text-center">
<button class="button button-icon icon ion-social-twitter"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-facebook"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-linkedin-outline"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-googleplus"></button>
</div>
</div>
</div>
Demo
I'd be interested in either a fix for what appears to be a bug in Ionic's grid, or an override solution to make the rows behave. Thanks a bunch.
Separate the input's div and the buttons' div, then give the input's div the class bar-subfooter instead of bar-footer, and give the buttons' div the classes bar bar-footer:
<div class="bar bar-subfooter bar-balanced auto-height">
<div class="row">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Email" />
</label>
</div>
</div>
</div>
<div class="bar bar-footer row">
<div class="col text-center">
<button class="button button-icon icon ion-social-twitter"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-facebook"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-linkedin-outline"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-googleplus"></button>
</div>
</div>
Related
I have a form that looks like the following:
<div class="row">
<div class="col">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="col">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
I'm using Bootstrap 4. The thing is, I want this form to be the max width of its container - to have the textarea stretch and the buttons be a static width. If I use the above, I get a big empty gap because the smallest col (col-1) is to wide for the buttons. How can I have it fill the width of the screen with the button columns remaining a fixed width?
I have a feeling its using flex and d-flex but I cant manage to get it work.
add flex-grow-0 to buttons column:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
<div class="row">
<div class="col">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="col flex-grow-0">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
</div>
You can remove .col and use d-flex and flex-grow-1.
Then, you can also add a margin-left using ml-3 to the buttons.
<div class="row mw-100">
<div class="d-flex flex-grow-1">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="ml-3">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
For the buttons container, you can set the width you want.
I wanna hidden search box in Small Devices(sm) size and instead of that a search button should take place. i wanna my search be like this at sm size.
enter image description here
this is my code:
<div class="container">
<div class="header">
<div class="row">
<div class="col-md-3 ">
<img src="img/1.png" class="header-logo" alt="site-logo">
</div>
<div class="col-md-6">
<div class="input-group search-box">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-search"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="جستجو">
</div>
</div>
<div class="col-md-3 btn-header">
<button class="btn">ورود</button>
<button class="btn">ثبت نام</button>
</div>
</div>
</div><!-- =====HEADER DIV===== -->
</div>
Use
hidden-sm
for more details follow https://getbootstrap.com/docs/3.3/css/
<div class="input-group search-box">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-search"></i>
</span>
</div>
<!-- your search field is hidden in the sm -->
<input type="text" class="form-control hidden-sm" placeholder="جستجو">
</div>
Devices list
Extra small devices - Phones (<768px)
Small devices - Tablets (≥768px)
Medium devices -Desktops (≥992px)
Large devices -Desktops (≥1200px)
To show or hide elements with bootstrap you have to use the display utilities. For example, if you want to show only on Small Devices you must use d-none d-block d-sm-none.
Your code would be like this:
<div class="container">
<div class="header">
<div class="row">
<div class="col-md-3 ">
<img src="img/1.png" class="header-logo" alt="site-logo">
</div>
<div class="col-md-6 d-none d-md-block">
<div class="input-group search-box">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-search"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="جستجو">
</div>
</div>
<div class="col-md-3 btn-header d-sm-none">
<button class="btn">ورود</button>
<button class="btn">ثبت نام</button>
</div>
</div>
</div><!-- =====HEADER DIV===== -->
</div>
You can find the doc here: https://getbootstrap.com/docs/4.0/utilities/display/
I'm practicing bootstrap buttons.
I've written the following code
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<button class="btn btn-success performanceButton">Best case performance</button>
</div>
<div class="col-md-6"> </div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<button class="btn btn-warning performanceButton">Average case performance </button>
</div>
<div class="col-md-6"> </div>
</div>
The code is working well, but when I test it for small screen size by downsizing the browser it seems that the text in the second button expands out of the button.
Here is a screen capture of the issue.
Does anyone know how to solve this please ? Thank you in advance :)
You need to make your columns bigger for smaller screens, try this:
<div class="row">
<div class="col-md-1"></div>
<div class="col-sm-8 col-md-5">
<button class="btn btn-success performanceButton">Best case performance</button>
</div>
<div class="col-sm-3 col-md-6"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-md-1"></div>
<div class="col-sm-8 col-md-5">
<button class="btn btn-warning performanceButton">Average case performance </button>
</div>
<div class="col-sm-3 col-md-6"> </div>
</div>
By giving min-width property to your button, it won't break.
button {
min-width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<button class="btn btn-success performanceButton">Best case performance</button>
</div>
<div class="col-md-6"> </div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<button class="btn btn-warning performanceButton">Average case performance </button>
</div>
<div class="col-md-6"> </div>
</div>
you can also make the text of button wrap instead of making button larger
just jive button a class like and in css
.wrapit{
width: 30px;
white-space: normal;
word-Wrap: break-word;
}
I have the following HTML and am wondering why there is a margin between my "equals" button and the neighbouring buttons (3 and .)
<div class="row">
<div class="col-md-9">
<div class="row">
<button class="col-md-4">1</button>
<button class="col-md-4">2</button>
<button class="col-md-4">3</button>
</div>
<div class="row">
<button class="col-md-8">0</button>
<button class="col-md-4">.</button>
</div>
</div>
<div class="col-md-3">
<button class="col-md-12" id="equal">=</button>
<br/>
</div>
</div>
screen shot of described margin
SOLUTION 1:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-9">
<div class="row">
<button class="col-xs-4">1</button>
<button class="col-xs-4">2</button>
<button class="col-xs-4">3</button>
</div>
<div class="row">
<button class="col-xs-8">0</button>
<button class="col-xs-4">.</button>
</div>
</div>
<button class="col-xs-1" id="equal">=</button>
<br/>
</div>
You are getting a gap because there is a padding of 15px for bootstrap columns. So I made a few changes to your code and removed the parent div wrapper for the button with = sign and added col-xs-1 class to it. You can add col-xs-3 if you wish.
Note that I have also changed all the classes from col-md- to col-xs- which is entirely optional. You can keep it md. I have added xs so that the result can be seen on the preview screen.
SOLUTION 2:
.equal-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-9">
<div class="row">
<button class="col-xs-4">1</button>
<button class="col-xs-4">2</button>
<button class="col-xs-4">3</button>
</div>
<div class="row">
<button class="col-xs-8">0</button>
<button class="col-xs-4">.</button>
</div>
</div>
<div class="col-xs-3 equal-wrapper">
<button class="col-xs-12" id="equal">=</button>
<br/>
</div>
</div>
Just put your button in a row, bootstrap columns have padding by default.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row calculator">
<div class="col-md-9">
<div class="row">
<button class="col-md-4">1</button>
<button class="col-md-4">2</button>
<button class="col-md-4">3</button>
</div>
<div class="row">
<button class="col-md-8">0</button>
<button class="col-md-4">.</button>
</div>
</div>
<div class="col-md-3">
<div class="row">
<button class="col-md-12" id="equal">=</button>
</div>
</div>
</div>
Note: Check the above example in full screen mode.
HTML
Add a class calculator
<div class="row calculator">
<div class="col-md-9">
<div class="row">
<button class="col-md-4">1</button>
<button class="col-md-4">2</button>
<button class="col-md-4">3</button>
</div>
<div class="row">
<button class="col-md-8">0</button>
<button class="col-md-4">.</button>
</div>
</div>
<div class="col-md-3">
<button class="col-md-12" id="equal">=</button>
<br/>
</div>
</div>
CSS:
Remove Paddings.
.calculator .col-md-9{
padding-right:0;
}
.calculator .col-md-3{
padding-right:0;
}
You missed to wrap button tag in row class like below code
<div class="row">
<div class="col-md-9">
<div class="row">
<button class="col-md-4">1</button>
<button class="col-md-4">2</button>
<button class="col-md-4">3</button>
</div>
<div class="row">
<button class="col-md-8">0</button>
<button class="col-md-4">.</button>
</div>
</div>
<div class="col-md-3">
<div class="row">
<button class="col-md-12" id="equal">=</button>
<br/>
</div>
</div>
Quick question on bootstrap and columns/rows. I have a cascade effect that has managers, then employees, then employee family members.
The problem is that I do not have a full understanding of bootstrap and how it uses columns/rows.
I get this result when running my code at the bottom here
But I need this result
I know this is not achieveable with my current code... Any suggestions?
Thanks in advance!
<div class="container">
<div class="row">
#{i++;}
<div class="col-md-4">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="##i">Manager Name</button>
<div id="#i" class="collapse">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<h5>Employees</h5>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
j++;
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="##j">Employee Name</button>
<br />
<div id="#j" class="collapse">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<h5>Employee Fam Members</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
#Html.ActionLink(Employee Fam Member Name, blah, blah)
</div>
</div>
<br />
</div>
<br />
</div>
<div class="col-md-2">
<br />
<br />
</div>
</div>
</div>
</div>
<div class="col-md-1">
Edit Button
</div>
<div class="col-md-7">
Delete Button
</div>
</div>
<br />
Rather than putting rows inside of columns, you'll have to make a bunch of rows on the same level instead. Otherwise the new rows would only be the width of the column it was placed in. Also, container-fluid to make it fully full width if you'd like.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#i">Manager Name</button>
</div>
<div class="col-md-1">
Edit Button
</div>
<div class="col-md-7">
Delete Button
</div>
</div>
<div id="i" class="collapse">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<h5>Employees</h5>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#j">Employee Name</button>
</div>
</div>
</div>
<div id="j" class="collapse">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<h5>Employee Fam Members</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
#Html.ActionLink(Employee Fam Member Name, blah, blah)
</div>
</div>
</div>
</div>