Im trying to create a navigation bar for my table using twitter bootstrap.
The end result would look something like this
Im trying to use bootstraps grid system for this and seem to have gotten the showing rows part to look as planned but cant get the buttons to be responsive when the user switches to mobile.
HTML
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <!-- controls !-->
<div class="col-xs-12 col-sm-12">
Back
</div>
<div class="col-xs-12 col-sm-12">
First
</div>
<div class="col-xs-12 col-sm-12">
Previous
</div>
<div class="col-xs-12 col-sm-12">
Next
</div>
<div class="col-xs-12 col-sm-12">
Last
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"><!-- page number !-->
<div class="pull-right">
<span>Showing rows 1 to 10 of 20</span>
</div>
</div>
</div>
</div>
The buttons seem to only render on top of each other.
Here is a jsfiddle showing whats happening.
What about a button group?
<div class="btn-group" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Back</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">First</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Previous</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Next</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Last</button>
</div>
<div class="btn-group" role="group">
<span>Showing rows 1 to 10 of 20</span>
</div>
</div>
EDIT added in showing rows and made more responsive on mobile devices
Each of your button is wrapped in a div with a bootstrap class "col-sm-12" and "col-xs-12" . This means that each of those div will occupy 12 columns EACH, thereby leaving no column for other buttons or divs to lie on the same row.
To obtain the desired result, change their classes to "col-sm-2" so that each button's div occupies two columns out of twelve.
Related
I am currently working on a web application and I am trying to figure out how to center two bootstrap buttons side-by-side. It works on mobile, but when I try to inspect the page and view it on a mobile device, they go on separate lines and center (one on top of the other). How can I fix this so that on mobile, they appear side-by-side like on the computer? Here is the code:
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4 col-lg-3 text-center">
Button 1
</div>
<div class="col-md-4 col-lg-3 text-center">
Button 2
</div>
</div>
</div>
How about this. Remove the breakpoints from your columns and make them occupy half the space no matter what screen size you are using:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center">
<div class="col-6 text-center">
Button 1
</div>
<div class="col-6 text-center">
Button 2
</div>
</div>
</div>
This might look more cleaner
<div class="col-xl-12" style="display:flex">
<div class="btns" style="margin:auto">
<a class="btn btn-primary" href="">Button1 </a>
<a class="btn btn-primary" href="">Button2 </a>
</div>
</div>
</div>
</div>
I have a bootstrap grid system on my page and want two elements pulled to the right, but placed one below the other. This is the code I have right now. I want "Active" and "Primary" button place one below the other, but also pulled right. As of now, it looks like this:
If I were to add this to the button, then it aligns properly, but on mobile, it messes up.
<button type="button" class="btn btn-w-m btn-primary" style="margin-left: 261px;">Primary</button>
This is what I have so far. What can I do to achieve the desired result?
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row border-bottom white-bg dashboard-header">
<div class="col-md-3">
<h4>Dummy Name</h4>
<small>Dummy Street</small><br>
<small>Dummy Apt, Some City, Some State</small><br>
<small>United States</small><br>
</div>
<div class="col-md-3">
<h5>123-456-7890</h5>
</div>
<div class="col-md-3">
<h5>some_name#somecompany.com</h5>
</div>
<div class="col-md-3">
<h2 class="pull-right" style="margin-top: -5px">Active</h2><br>
<button type="button" class="btn btn-w-m btn-primary">Primary</button>
</div>
</div>
</div>
You do not need pull-right at all - all you need to right align the text of the heading and the button is text-align:right in the css or the text-right class on the parent div. Note that you need to open this snippet in "full screen mode due to the small size of the preview window.
I would also suggest that you put the css in its own style sheet rather than inline style rules. If you use text-align: right as a style rule then you can use a media query to apply it or left align on certain screen sizes as required.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row border-bottom white-bg dashboard-header">
<div class="col-xs-3 col-md-3">
<h4>Dummy Name</h4>
<small>Dummy Street</small><br>
<small>Dummy Apt, Some City, Some State</small><br>
<small>United States</small><br>
</div>
<div class="col-xs-3 col-md-3">
<h5>123-456-7890</h5>
</div>
<div class="col-xs-3 col-md-3">
<h5>some_name#somecompany.com</h5>
</div>
<div class="col-xs-3 col-md-3 text-right">
<h2>Active</h2><br>
<button type="button" class="btn btn-w-m btn-primary">Primary</button>
</div>
</div>
</div>
</div>
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 am trying to get two buttons on the same line on mobile. The buttons are on the same line for the desktop but as soon as it goes mobile they stack on top of each other. I have tried adding an inline-block tag to the div class but they still stacked, albeit at the correct 50 50 size.
Here is my html:
<div class="buttonDiv">
<div class="row">
<div class="col-lg-6">
<button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">SIGN UP</button>
</div>
<div class="col-lg-6">
<button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">CHECK STANDINGS</button>
</div>
</div>
</div>
and here is the relevant CSS:
.buttonDiv{
position:relative;
bottom:90px;
font-family: "Cabin Condensed";
font-weight:700;
display:inline-block;
}
#buttonCustom{
position:relative;
margin-bottom:10px;
height:10%;
width:100%;
}
css looks like an overkill, unless OP solves some other design task (s)he didn't mention in the question.
If all you want is to keep 2 buttons inline on any device you can get away with...
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary">SIGN UP</button>
<button class="btn btn-primary">CHECK STANDINGS</button>
</div>
</div>
... and no additional css required.
fiddle.
Bootstrap has the classes xs for phones, and sm for tablets. You actually only need to add col-xs-6 to both your classes as this will affect all other widths unless otherwise stated. From the bootstrap docs:
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
add col-sm-6 col-xs-6 to the two btns. This indicates that when the screen is small size or xsmall size. They maintain 50% width.
You could look into this JsFiddle.
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Some content</h1>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
<button class="btn btn-primary my-button">Sign Up</button>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
<button class="btn btn-primary my-button">Check Standings</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h1>Some content</h1>
</div>
</div>
CSS
.my-button{
width:100%;
}
You can paly with the values of classes of these lines <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">. To understand this grid-system you can look at the official documentation. Happy Coding.
I'm trying to display two custom buttons in the same row and centered across the page. Currently, the buttons are showing on two different rows. Also, there has to be a better way of centering the buttons than with 'offset3'. Thank you in advance.
<div class = "container">
<div class="row">
<div class="col-sm-3 offset3">
<a href="/bat-times/week">
<button class="btn btn-red"> Test 1</button>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
You simply use Bootstrap's default class .text-center and that's it, keeping in mind the sum of your columns must be 12 (unless you use a custom number of columns). See code below:
<div class="container">
<div class="row">
<div class="col-sm-6 text-center">
<a href="/bat-times/week">
<button class="btn btn-red "> Test 1</button>
</a>
</div>
<div class="col-sm-6 text-center">
<a href="#">
<button class="btn btn-yellow " onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
And see Bootply. I have added some CSS for visualization purposes, but you don't need it at all, only the HTML part. And of course, you could use text-left, text-right, text-justify, etc. See Bootstrap Type Alignment for complete list
Try this:
TYPE 1
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 row">
<a href="/bat-times/week">
<button class="btn btn-red pull-right">Test 1</button>
</a>
</div>
<div class="col-xs-6 col-sm-6 row">
<a href="#">
<button class="btn btn-yellow pull-left" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
DEMO1
TYPE 2
<div class="container">
<div class="row text-center">
<a href="/bat-times/week">
<button class="btn btn-red">Test 1</button>
</a>
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
DEMO2
I found in your code you are using col-sm-3 which is not applicable for smaller devices like mobile rather it will work for tablet and desktop etc. we know that bootstrap grid system has divided our device screen with 12 equal parts if we will use col-xs-6 for our both div then it will divide our device screen into two equal part whether it is a mobile or tablet... doesn't matter. Then I used bootstrap text-center class for making the inside element centered align, bootstrap center-align class which is nothing but text-align:center; in our plain css.
Try the below piece of code. Demo
<div class = "container">
<div class="row">
<div class="col-xs-6 text-center">
<a href="/bat-times/week">
<button class="btn btn-red"> Test 1</button>
</a>
</div>
<div class="col-xs-6 text-center">
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>