I am trying to use best practice when designing my application so instead of 'hacking' together something I'm after some advice to start.
I'm using Bootstrap 4.1.3 in my Angular App.
Basically I want my application to show many (8+) buttons across the page when in Extra Large (i.e Desktop) but when in Extra Small (i.e Mobile) I don't want the buttons to just show vertically. I'd like in smaller formats to be able to replace the buttons with a dropdown for ease of use.
Here is my starting code:
<div class="container">
<div class="row">
<div class="col">
<button class="btn btn-danger" type="button">Test Button 1</button>
</div>
<div class="col">
<button class="btn btn-danger" type="button">Test Button 2</button>
</div>
<div class="col">
<button class="btn btn-danger" type="button">Test Button 3</button>
</div>
<div class="col">
<button class="btn btn-danger" type="button">Test Button 4</button>
</div>
<div class="col">
<button class="btn btn-danger" type="button">Test Button 5</button>
</div>
<div class="col">
<button class="btn btn-danger" type="button">Test Button 6</button>
</div>
<div class="col">
<button class="btn btn-danger" type="button">Test Button 7</button>
</div>
</div>
</div>
And here is what the result is:
Extra Large Format
Extra Small Format
As mentioned above, I would like the Extra Small format to no longer show the buttons (because they will get vertically stacked and it is messy), but I've read that using Bootstrap Display Utility is not the best due to doubling up of code etc?
Any thoughts on how to achieve this?
Related
I have the following code
<div class="modal-footer">
<div class="pagination">
</div>
<button type="button" onClick={$("#error-text").hide()} class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
where the HTML for the pagination class is set later. This gives me something that looks like this in my modal
Howeer I want the close button to appear below the other elements. I am wondering how to achieve this in CSS, I have already tried using another to contain the button as well as style:block
one of the best ways to do this is flexbox. I highly recommend learning it.
<div class="modal-footer">
<section class="pagination">
<span>1 2 3</span>
<div>
<button>
next
</button>
<button>
last
</button>
</div>
</section>
<button type="button" onClick={$("#error-text").hide()} class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
CSS :
.pagination{
display:flex;
gap:10px;
}
.modal-footer{
display:flex;
flex-direction:column;
align-items : flex-start;
justify-content:center;
gap:10px
}
You could try using to insert a line break in the HTML:
<div class="modal-footer">
<div class="pagination">
</div>
<br><button type="button" onClick={$("#error-text").hide()} class="btn btn-secondary" data- dismiss="modal">Close</button>
I am trying to make a simple example where I have a row and inside that row is columns. One column is for the name of the left-hand side and on the right-hand side is the three buttons that exist. However, I am having issues placing the buttons properly on the right side as well as spacing them at an appropriate distance. I tried using the max-width in my CSS but I just ended up screwing up the project even more. Below is my HTML/CSS file:
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div>
<h4> Group Pattern Test</h4>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Save</button>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Close</button>
</div>
<div class="ml-auto">
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
You would want to use a btn-toolbar to group your buttons in-line.
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
This question has been answered well here. But here's an example below, add float-right class to your button bar, you can put a breakpoint in the class like float-sm-right but float-right works on any viewport width.
#submitGPBtn {
margin-right: 30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar float-right">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
In bootstrap ml-auto is fine to align buttons to the right, but you should apply it only to the first item after the "offset".
I added ml-1 to space the other buttons and a lightyellow background just to show where the container ends.
My personal suggestion when you use bootstrap is to code inside a container, you can't set its size to what you want but it prevents stretching in wide monitors.
.container {
background-color: lightyellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col text-left">
<h4> Group Pattern Test</h4>
</div>
<button class="btn btn-success ml-auto">Save</button>
<button class="btn btn-success ml-1">Close</button>
<button class="btn btn-success ml-1" id="submitGPBtn">Submit</button>
</div>
</div>
I would like to create a grid of buttons much like this one:
After looking at this question How to set up a grid of buttons in bootstrap? I added this in the cssfile:
#channels button {
float: left;
width: auto;
}
And these buttons to the html file:
<div id="channels" className="span12">
<div className="btn-group">
<button type="button" className="btn btn-default" id="channel">
A
</button>
<button type="button" className="btn btn-default" id="channel">
B
</button>
</div>
</div>
However, I am not getting any spacing:
So how can I create such a grid?
Give each button margin, which will space it out. The twitter bootstrap has buttons with a default margin of 0 so that is why there is currently no spacing.
P.S. You should not have two elements with the same id.
.channel{
margin:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="channels" className="span12">
<div className="btn-group">
<button type="button" className="btn btn-default" class="channel">
A
</button>
<button type="button" className="btn btn-default" class="channel">
B
</button>
</div>
</div>
This is because you are not using the ROWS and Cols of bootstrap.
Using a row and col, you can determinate how many columns you want and give them until 12 rows. Like:
<div class="row">
<div class="col-lg-6">
<button type="button" className="btn btn-default" id="channel">
A
</button>
</div>
<div class="col-lg-6">
<button type="button" className="btn btn-default" id="channel">
B
</button>
</div>
</div>
And this gonna give you two buttons separate because you have 6 cols in one button and 6 cols in other buttons. If you want something like the image, you have to:
<div>
<div class="row">
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
SAFE
</button>
</div>
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
FUN
</button>
</div>
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
FRIENDLY
</button>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
SNOW
</button>
</div>
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
BEACH
</button>
</div>
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
SURFING
</button>
</div>
</div>
</div>
As you can see, we were distribute peer row 3 columns with 4 cols, because 4 * 3 = 12 columns on the Grid System. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
For more about it, please visit http://getbootstrap.com/css/#grid for learn GRID of Bootstrap.
Hi guys using bootstrap and struggling to understand how to get a my main div box to have other divs inside of it
For example i am trying to make this:
This big box is just a div.
What i got so far:
<div class="container">
<div class="MainBox">
<div class="Leftbox">
<h3>Box</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-responsive">P</button>
<button type="button" class="btn btn-success btn-responsive">B</button>
<button type="button" class="btn btn-success btn-responsive">L</button>
<button type="button" class="btn btn-success btn-responsive">R</button>
<button type="button" class="btn btn-success btn-responsive">T</button>
<button type="button" class="btn btn-success btn-responsive">F</button>
</div>
</div>
<div class="CentreBox">
</div>
</div>
</div>
I am not so sure how to do the boxes on the right hand side , i have tried different methods but it mucks up the whole div. Any help would be great. Thanks xx
You really want to look into Bootstraps grid system, as suggested by #Sringland in his comments, found here: Bootstrap Docs
The grid system creates 12 columns on any screen size (from xtra small - large), and can be defined as a class by col-(screensize)-(span). For example - if you want 12 columns spanning a large sized screen add the class: col-lg-12 to your div.
These columns are "embeddable", and will create a new 12-column layout inside one another. So if you want to split up an 8 column layout into two equal sized containers within it, it would like like this:
<div class="col-md-8">
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
</div>
So remember, each time you "open" a column regardless of its size, that container will have another 12 columns to work with.
After all this is said, your layout will look something like this:
<div class="row height-500px">
<div class="container">
<div class="col-md-3 border height-500px">
<!-- Content goes here -->
</div>
<div class="col-md-7 border height-500px">
<!-- CONTENT GOES HERE -->
</div>
<div class="col-md-2 height-500px">
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
</div>
</div>
</div>
Here is a link to a Bootply to see it in action. Please see the bootply for a better understanding of the height classes and border classes. I created these simply to represent your layout.
Now, gutters (the space between the columns) are not working as intended, and I hope someone help there. But, hopefully this will be a good starting point for you.
Jus try using bootstrap grid system. I used buttons for the right column, but you can use whatever you need.
<div class="container MainBox border-on">
<div class="col-md-2 left border-on">
<h3>Box</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-responsive">P</button>
<button type="button" class="btn btn-success btn-responsive">B</button>
<button type="button" class="btn btn-success btn-responsive">L</button>
<button type="button" class="btn btn-success btn-responsive">R</button>
<button type="button" class="btn btn-success btn-responsive">T</button>
<button type="button" class="btn btn-success btn-responsive">F</button>
</div>
</div>
<div class="col-md-8 CentreBox border-on">
<h3>
center
</h3>
</div>
<div class="col-md-2 right border-on">
<h3>
right
</h3>
<div class="col-md-12">
One
</div>
<div class="col-md-12">
Two
</div>
<div class="col-md-12">
Three
</div>
<div class="col-md-12">
Four
</div>
</div>
</div>
I'm trying to make a button that spans 12 columns.
I know how to create a div that is 12 columns as such
<div class="row">
<div class="col-lg-12 well"></div>
</div>
But that only makes the div 12 columns long. If I was to replace the div with a input:button how would I get that to work?
Add the class btn-block and place it inside the 12-column <div>. (Note: this is Bootstrap 2.3.2)
<div class="row"><div class="span12">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div></div>
Why not use <button></button>? (bootstrap3)
<div class='row'>
<button class='btn btn-lg btn-warning col-lg-12' >button</button>
</div>