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>
Related
I'm using Bootstrap to make two buttons so that when the screen width decreases, they divide the screen not horizontally, but vertically, something like in the picture
I tried this
index.php:
<div class="container-fluid">
<div class="row">
<div class="col-md mw-100 bg-danger"></div>
<div class="col-md mw-100 bg-success"></div>
</div>
</div>
css:
[class*='col'] {
min-height: 600px;
}
But it overflows at the bottom when the width is less than 768px and I don't know how to fill the empty space below the buttons when the width is greater than 768px
(sorry for the english, I'm using a translator)
You can use col-xs-12 and col-md-6 to get this behaviour.
See results in full page and try to reduce screen size.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-12 col-md-6'>
<button class='btn btn-primary'>Button 1</button>
</div>
<div class='col-xs-12 col-md-6'>
<button class='btn btn-danger'>Button 2</button>
</div>
</div>
</div>
I think you are missing your col divs. try this:
<div class="container-fluid">
<div class="row">
<div class="col-md">
<button class="btn btn-danger"></button>
</div>
<div class="col-md">
<button class="btn btn-success"></button>
</div>
</div>
</div>
I have a form, I inserted a piece from the form where I use bootstrap.min.css col-lg-6
And now when the screen width is large, the first column with text will be on the left, and the button on the right
And when the width is small, let's say for mobile, then the column with the text will be on top, and the button will be on the bottom
I want to make things stay the same for large widths, text on the left, button on the right. And for mobile, I want it to be the other way around, the button is on top, and the text is on the bottom
So far, my only idea is to make 2 buttons, and hide the extra one depending on the screen size
But is there another way to do this?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="row">
<div class="col-md-6">
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
asd
</div>
</div>
<div class="col-lg-6">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
is the Boostrap version 3.2 mandatory in your project? Because in more recent versions of Bootstrap you could use the Order Classes for your task.
I used your code snippet once, using Bootstrap's Oder Classes:
<div class="row">
<div class="col-md-6">
<form>
<div class="row">
<div class="col-lg-6 order-2 order-md-1">
<div class="form-group">
asd
</div>
</div>
<div class="col-lg-6 order-1 order-md-2">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
(see here online)
So I have this code
<div class="row">
<a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
<img class="center-block" src="logo.png" />
</div>
It appears that the logo image is off-centered because it only takes the margin measurement after the button. How can I ensure that the button is aligned to the center?
You can put the button and the image in two different columns
Just like
<div class="row">
<div class="col-md-4">
//your button code
</div>
<div class="col-md-4">
//your image code
</div>
<div class="col-md-4">
//some other stuff
</div>
</div>
You could try a break in between like:
<div class="row">
<a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
<br/>
<img class="center-block" src="logo.png" />
</div>
After ensuring your image is positioned below your button, you should be able to follow the instructions in How to vertically align an image inside a div? if you need help aligning content inside a div.
I would break it up into 3 equal columns to make it easier.
Then you can use text-center:
<div class="row">
<div class="col-sm-4">
<a class="btn btn-primary">Back to Main Menu</a>
</div>
<div class="col-sm-4 text-center">
<img src="logo.png" />
</div>
<div class="col-sm-4"></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>
I'm building a website using Bootstrap 3.
Part of this site are 4 div-containers:
<div class="container">
<div id="content" class="row">
<div class="col-sm-4 col-md-3" style="background-color:#00F; color:#FFF">
Menu
</div>
<div class="col-sm-12 col-md-3 col-md-push-6 " style="background-color:#F00;">
<div class="row">
<div class="visible-md visible-lg col-md-12" style="background-color:#F08;">
Mod_1
</div>
<div class="col-md-12" style="background-color:#F80;">
Mod_2
</div>
</div>
</div>
<div class="col-sm-8 col-md-6 col-md-pull-3" style="background-color:#0F0;">
Main content goes here
</div>
</div>
</div>
Layout-View is shown here:
Code on Fiddler
"Mod_1" is only visible in the desktop view like expected. "Mod_2" should move above the Menu and Main container in the tablet view, but I can't find a way to place the container on top of both of them.
I already tried to use the col-sm-[colnumber]-push and -pull classes. But I didn't get the right results.