I tried to look at other stack questions about adding spacing between columns in bootstrap, but I don't seem to find the right answer to my issue. Basically what i want is to have 2 buttons one at the far right and one at the far left on desktop/tablet (and I managed to do that) but then on mobile the buttons will have to go one below the other, will have to be centered and will need to have some space in between (and that's where I can't find a solution). Please note that I'm using an editor where I can add html and/or bootstrap code only, so any css will have to be in the html.
Here is the code I used so far:
<div class="raw">
<div class="col-md-6 col-sm-6 col-xs-6"><a class="btn btn-primary pull-left" href="">Becoming an au pair</a></div>
<div class="col-md-6 col-sm-6 col-xs-6"><a class="btn btn-primary pull-right" href="">Becoming a host family</a></div>
</div>
Thanks!
https://jsfiddle.net/m00durk3/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-12 text-left">
<div class="btn">
Left Button
</div>
</div>
<div class="col-sm-6 col-xs-12 text-right">
<div class="btn">
Right Button
</div>
</div>
</div>
</div>
CSS:
.btn {
background-color: lightblue;
}
#media screen and (max-width: 767px) {
.btn {
width: 100%;
margin-bottom: 5px;
}
}
So basically you need to use the grid to wrap the outermost columns. Once thats done you need to add a media query that changes the width of the buttons to fill the screen.
In the jsfiddle link make the html sections width bigger or smaller to see the changes take effect.
Edit: Full code showing how to put styles on the same page as the html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn {
background-color: lightblue;
}
#media screen and (max-width: 767px) {
.btn {
width: 100%;
margin-bottom: 5px;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-12 text-left">
<div class="btn">
Left Button
</div>
</div>
<div class="col-sm-6 col-xs-12 text-right">
<div class="btn">
Right Button
</div>
</div>
</div>
</div>
</body>
</html>
I actually managed to fix it with the following code. Thanks for putting me on the right track Bioto
<div class="row">
<div class="col-md-6 col-sm-6 text-left">
<div class="col-xs-12 text-center"><a class="btn btn-primary" href="https://kangaroo-staging.devguru.co/en/ireland/au-pair" style="margin-bottom:10px;">Becoming an au pair</a></div>
</div>
<div class="col-md-6 col-sm-6 text-right">
<div class="col-xs-12 text-center"><a class="btn btn-primary" href="https://kangaroo-staging.devguru.co/en/ireland/host-family" style="margin-bottom:10px;">Becoming a host family</a></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>
When I use display:block it doesn't want to work which was working before. When I inspect it shows me strike through on display:block. Now the buttons are positioned on the right side of the col, I'd need them to be positioned in the middle under the image.
html
<div class="sectionLight">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-4">
<img class="img-fluid imgCenter" src="images/square.png">
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".square-modal-lg">Prime</button>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<img class="img-fluid imgCenter" src="images/fibo.png">
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".fibo-modal-lg">Fibo</button>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<img class="img-fluid imgCenter" src="images/square_copy.png">
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".prime-modal-lg">Square</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.btnCenter {
display: block;
margin: auto;
margin-top: 15px;
margin-bottom: 20px;
width: 50%;
}
You probably have included another css script that overwrites your current one.
You can try to make it !important. If that doesnt work, you might have to make your selector more spesific than the one currently overwriting it.
.btnCenter {
display: block !important;
margin: auto;
margin-top: 15px;
margin-bottom: 20px;
width: 50%;
}
You can debug this in the dev-tools. See the example image below:
In this example, primary.css is higher in the css hierarchy (meaning the file primary.css is included later than stacks.css) Therefore, it will overwrite the selector.
Codepen: https://codepen.io/sahandz/pen/zRzoEP
I'm trying to create a sidebar that collapses at max-width 766 px, and a hamburger button that makes it visible again onclick.
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/base.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="container-fluid">
<div class="topdiv">
<h1>Dinner Planner</h1>
</div>
<div class="row dish-item-view">
<button type="button" data-toggle="collapse" data-target="#sidebar" id="hamburger">
<i class="fas fa-bars"></i>
</button>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 sidebar" id="sidebar">
<div>
<div class="noofpeople">
<div class="row noofpeople-wrapper">
<h4>My Dinner</h4>
<label>People <input type="number" class="form-control"></label>
</div>
</div>
<div class="dinneroverview">
<div class="dish-overview-header">
<span class="dish-name">Dish name</span><span class="cost">Cost</span>
</div>
<div class="price">
<span id="pricetag">SEK 0.00</span>
</div>
<div class="confirm">
<button type="button" class="btn btn-default">Confirm Dinner</button>
</div>
</div>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 main-bar">
<div class="row dishsearch">
<h4>Find a Dish</h4>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-padding">
<input type="text" class="form-control" value="Enter keyword">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-padding">
<select class="form-control">
</select>
</div>
<button type="button" class="btn btn-default">search</button>
</div>
<div class="row dishreel">
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<!-- The application JavaScript code -->
<script src="js/app.js"></script>
<script src="js/model/dinnerModel.js"></script>
<script src="js/view/sidebarView.js"></script>
CSS:
#media (min-width:767px){
#hamburger{
display:none;
}
.sidebar{
height:100%;
border-style:solid;
display:block;
}
.collapse{
display:block;
}
}
#media (max-width:766px){
.sidebar{
display:none;
}
}
.dish-item-view{
height:100vh;
}
I'm running into two main problems:
When making the window width small (which collapses the sidebar) and then clicking the button once to make it pop up again (this time not as a sidebar but as a row at the top of the page), everything works fine. But when I enlarge the window again (with the sidebar expanded/visible) the sidebar has lost its full height and only takes up its own height, not the full height of the page like before.
(Reload the page). Make the window width small again, then click on the hamburger button to make the sidebar visible, and then click on it again to hide it once more. If you now enlarge the page, you will see that the sidebar does not become visible/expand again. It should.
How can I fix this? I've tried all sorts of CSS rules but it seems like I can't make bootstrap work for me in a good way. I would like to avoid having to write this myself in javascript since I want to learn to use existing libraries.
Adding !important to some of the CSS rules did the trick:
new CSS:
#media (min-width:767px){
#hamburger{
display:none;
}
.sidebar{
height:100% !important;
border-style:solid;
display:block !important;
}
.collapse{
display:block;
}
}
#media (max-width:766px){
.sidebar{
display:none;
}
}
.dish-item-view{
height:100vh;
}
The reason this works is that bootstrap injects css into the html when clicking the hamburger-button which overrides other rules on the element, unless !important is used. Also,
I am having problem in designing the footer same as in the image. I am new in css and bootstrap thats why don't have much knowledge. I want to design the given footer only for mobile view. For desktop the image will be different.I am confused with the horizontal partition because it will have vertical partition in desktop
My code for desktop view is:
.btn-font {
color: white;
font-weight: bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row " style=" background-color:#F2F2F2;">
<div class="col-xs-12">
<div class="container ">
<div class="row footer-border " style="margin-top: 6em; border-right: 2px solid #ccc;">
<div class="col-md-4 col-xs-12 ">
<button class="btn btn-success button-def form-text btn-font" id="button" type="submit" name="go" style="margin-top: 1.2em; height: 50px; ">Get started with MMN free</button>
</div>
<div class="col-md-8 col-xs-12 ">
<p class="slider-heading " style="margin-top: 1em;">Discover what technology can do for your NGO.</p>
</div>
</div>
<div class="row" style="margin-top: 5em; ">
<div class="col-xs-12 footer1">
<p>ManageMyNGO</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 footer2">
<p>a ColoredCow product</p>
</div>
</div>
</div>
</div>
</div>
Use a CSS border. In mobile, make it a top or bottom border (so it is horizontal), and on desktop make it a left or right border (so it is vertical) with a #media query.
You may want to practice using % when inputting css. e.g.
border-right: 1%
style="margin-top: 1.3%; <br/>
As using px and em may usually damage your css from different sizes of screen.
I am trying to horizontally center-align a bootstrap button with accompanying text. But am not getting the expected output. Could someone tell me why its not centering?
<div class="col-md-12 well">
<div class="col-md-6">
<h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
</div>
<div class="col-md-6 text-center">
<span><em> Already have an account? Login</em></span>
</div>
</div>
I created a Plunker demo. In smaller screens it works as expected. But in larger screens it's not aligned properly.
Use col-md-offset-3 along with col-md-6 to center align your content:
<div class="col-md-offset-3 col-md-6">
...
</div>
Further more, set text-center class on the outside div and not on span tag:
<div class="col-md-offset-3 col-md-6 text-center">
<em> Already have an account? Login</em>
</div>
See fiddle here.
Try this:
.flex-centered {
display: flex;
justify-content: center;
margin-top: 31px;
height: 46px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12 well">
<div class="col-md-6 text-center">
<h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
</div>
<div class="col-md-6">
<div class="flex-centered">
<em> Already have an account? Login</em>
</div>
</div>
</div>
use div outside of span tag
<div style="text-align:center;" ><span class="text-center"><em> Already have an account? Login</em></span>
</div>
Try this code...
<body>
<div class="row">
<div class="col-md-6 col-md-push-3">
<h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
</div>
<div class="col-md-6 col-md-offset-3">
<span><em> Already have an account? Login</em></span>
</div>
</div>
</body>
Plunker Link
After some fiddling around I found a solution..Its not a bootstrap solution. But its only few lines of css. If anyone found a bootsrap way post here and I will change the accepted answer. Thank you.
<div class="row well row-centered">
<div class="col-md-6 col-centered">
<h2 class="btn btn-warning btn-lg center-block">Sign in via google</h2>
</div>
<div class="col-md-6 text-center col-centered" >
<span><em> Already have an account?Login
</div>
</div>
here is the custom css
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}