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;
}
Related
I am trying to make a responsive grid but I was very unsuccessful.
I am new to bootstrap and I am not very good in Front-end.
I tried some codes but this one is the closest one to my needs.
<div><p>MY TEXT HERE -------------------------</p></div>
<div>
<div id="containerTest" class="container-fluid" style="margin-left: 0px;">
<div class="row">
<div class="col-sm-3" style="background-color:red;" >AAAA</div>
<div class="col-sm-6" style="background-color:lavenderblush;">BBBBB</div>
<div class="col-sm-3" style="background-color:lavender;">
<button class="button button2">OK</button></div>
</div>
</div>
With this Bootstrap 4 code, the layout looks like your drawing.
<div class="container">
<div class="row">
<div class="col-12">
<p>My text here</p>
</div>
</div>
<div class="row">
<div class="col-3 col-md-2 pt-2 pr-0">
<label>Input label</label>
</div>
<div class="col-6 col-md-2 pr-0">
<input type="text" class="form-control w-100">
</div>
<div class="col-3 d-md-none">
<button type="button" class="btn btn-success">Save</button>
</div>
<div class="col-12 col-md-3">
<input type="text" class="form-control w-100">
</div>
<div class="col-12 col-md-3 d-none d-md-flex pl-0">
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
<div class="row">
<div class="col-12">
<p>Other elements here</p>
</div>
</div>
</div>
That should do it.
<div class="container">
<div class="row">
<div class="col-sm-12">My text here ------------------</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-4">Input Label</div>
<div class="col-md-3 col-sm-4">Input</div>
<div class="col-md-3 hidden-sm">Input</div>
<div class="col-md-3">Save button</div>
</div>
<div class="row visible-sm">
<div class="col-sm-12">
<div class="col-md-3">Input</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Text Area here</div>
</div>
</div>
I am trying to make the background fit within bootstrap's column sizing, but still appear across the whole row. How could I achieve this?
I tried the following:
.yourcontent {
margin-bottom: 5px;
}
.yourcontent [class^=col-] {
background-color: cyan;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="btn-group" role="group" style="margin-top: 5px; margin-bottom: 5px">
<button type="button" class="btn btn-primary">Foo</button>
<button type="button" class="btn btn-primary">Bar</button>
<button type="button" class="btn btn-primary">Foobar</button>
<button type="button" class="btn btn-primary">Barfoo</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row yourcontent">
<div class="col-xs-6">
<div class="">
Foo
</div>
</div>
<div class="col-xs-2">
<div class="">
Bar
</div>
</div>
<div class="col-xs-2">
<div class="">
Foobar
</div>
</div>
<div class="col-xs-2">
<div class="">
Barfoo
</div>
</div>
</div>
</div>
</div>
</div>
JSFiddle
I want it to appear like this, except that the white space between the columns should be filled in with a color as well:
.yourcontent {
margin-bottom: 5px;
background-color: cyan;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="btn-group" role="group" style="margin-top: 5px; margin-bottom: 5px">
<button type="button" class="btn btn-primary">Foo</button>
<button type="button" class="btn btn-primary">Bar</button>
<button type="button" class="btn btn-primary">Foobar</button>
<button type="button" class="btn btn-primary">Barfoo</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">
<div class="yourcontent">
Foo
</div>
</div>
<div class="col-xs-2">
<div class="yourcontent">
Bar
</div>
</div>
<div class="col-xs-2">
<div class="yourcontent">
Foobar
</div>
</div>
<div class="col-xs-2">
<div class="yourcontent">
Barfoo
</div>
</div>
</div>
</div>
</div>
</div>
JSFiddle
I would like the background to stretch for the whole row but not the padding-left of the first col-xs-* element and the padding-right of the last col-xs-* element within given row. Would anyone happen to know how to approach this?
In Bootstrap 4 you have the .no-gutters class. As you are using Bootstrap 3 this class isn't included. However, you can easily create this class yourself. This will remove the gutters between the columns.
.yourcontent {
margin-bottom: 5px;
background-color: cyan;
}
/*
Optional, to fix to width of the row
*/
.row.no-gutters {
margin-left: 0;
margin-right: 0;
}
.row.no-gutters > [class^="col-"] {
padding-left: 0;
padding-right: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="btn-group" role="group" style="margin-top: 5px; margin-bottom: 5px">
<button type="button" class="btn btn-primary">Foo</button>
<button type="button" class="btn btn-primary">Bar</button>
<button type="button" class="btn btn-primary">Foobar</button>
<button type="button" class="btn btn-primary">Barfoo</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row no-gutters">
<div class="col-xs-6">
<div class="yourcontent">
Foo
</div>
</div>
<div class="col-xs-2">
<div class="yourcontent">
Bar
</div>
</div>
<div class="col-xs-2">
<div class="yourcontent">
Foobar
</div>
</div>
<div class="col-xs-2">
<div class="yourcontent">
Barfoo
</div>
</div>
</div>
</div>
</div>
</div>
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>
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>