I'm new to Bootstrap/CSS and I would like to know why every change on Bootstrap class works only with luck. This happens to me so much so any tip can be great.
example:
Failing to have drop-down on the left side and some text in the center- on the same line.
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-info">
<div class="dropdown" style="align-content: center">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span></button>
</div>
<div class="text-left">Contacts</div>
</div>
.center {
float: none;
margin-left: 500px;
display: inline-block;
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-info">
<div class="dropdown" style="align-content: center">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span></button> <h1 class="span7 center"> Contacts </h1>
</div>
</div>
<div class="panel panel-info">
<div class="dropdown" style="align-content: center">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret align-left"></span>Contacts</button>
</div>
Are you asking like this? Above code when executed give the result as a button that has drop-down on the left and some text. Please check and revert.
Related
I have a div with a button group.
Here is the code:
<div id="main"><!-- This is 100% width and no passing or margin -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button class="btn btn-primary btn-lg"><i class="fa fa-plus"></i> Add</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary btn-lg"><i class="fa fa-download"></i> Import</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary btn-lg"><i class="fa fa-trash"></i> Delete</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary btn-lg"><i class="fa fa-save"></i> Save</button>
</div>
</div>
</div>
</div>
This issue is that I need these buttons the:
1. Be the same size
2. Take up 100% of the parent div inline
I can only fit 3 buttons at the moment but need to fix 4.
I could divide 100 by 4 and give the buttons the size, but as I'm using Bootstrap 4, is there a way to do this using Bootstrap's 4 own classes or if you can't do it just using bootstrap 4 classes, how can I best do this?
Use this in your index.html file
<!doctype HTML>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRe3js3W69CrGF8kKXvvmYtT4zNGqicXRjvuAnmmbvPZXc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" type="text/css">
<title>WeGo</title>
</head>
<body>
<div id="main"><!-- This is 100% width and no passing or margin -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-justified bg-primary" role="group" style="width: 100%;">
<div class="row">
<div class="col-lg-3 btn-group" role="group">
<button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-plus"></i> Add</button>
</div>
<div class="col-lg-3 btn-group" role="group">
<button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-download"></i> Import</button>
</div>
<div class="col-lg-3 btn-group" role="group">
<button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-trash"></i> Delete</button>
</div>
<div class="col-lg-3 btn-group" role="group">
<button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-save"></i> Save</button>
</div>
</div>
</div>
</div>
</div>
<script src="jquery/jquery.slim.min.js"></script>
<script src="popper/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
I hope this will help you.
The accordion panel looks like this
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
This is some content.
</div>
</div>
The content is displayed below the button.
How do I move the collapse panel to the right side of the button? As shown below
if you are using bootstrap then do it in proper way, using rows and cols. This way you will get responsive layout too.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="row">
<div class="col-auto">
<a class="btn btn-primary btn-block" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</div>
<div class="col">
<div class="collapse" id="collapseExample">
<div class="card card-body">
This is some content.
</div>
</div>
</div>
</div>
You can wrap this in a div and give class d-flex and give flex-grow-1 to collapse
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="d-flex">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse flex-grow-1" id="collapseExample">
<div class="card card-body">
This is some content.
</div>
</div>
</div>
I made a navbar using bootstrap 4.
Now I want to add user avatar and name after sign in mentioned as circle. I have no idea how to do this. If you give or scratch it help me lot.
Now, my idea is when user sign in replace the navbar with a new navbar that have a place with avatar. Or replace the Sign in text with the avatar that is more complex to me. Second is need more css code I guess.
I load the navbar using following rule. Then there is a possibility to nav-placeholder when sign in button will be clicked.
<body>
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<div id="carousel">
</div>
<div id="successfulModal">
</div>
<script>
$(function(){
$("#nav-placeholder").load("newnavbar.html");
$("#carousel").load("carousel.php");
});
</script>
My navbar code
<html lang="en">
<head>
<title>Matir Dokan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
.modal-backdrop
{
background: none;
}
</style>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Matir Dokan</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle1" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Object Type
</a>
<div class="dropdown-menu menu1" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="toy">Toy</a>
<div class="dropdown-divider" ></div>
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Furniture">Furniture</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Gift">Gift</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Household">Household</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Instrument">Instrument</a>
</div>
</li>
<script>
$(function(){
$(".menu1 a").click(function(){
$(".toggle1").text($(this).text());
});
});
</script>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle2" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Material Type
</a>
<div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
<a class="dropdown-item">Mud</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cloth</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Thread</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Jute</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cotton</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cane</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Bamboo</a>
</div>
</li>
<script>
$(function(){
$(".menu2 a").click(function(){
$(".toggle2").text($(this).text());
});
});
</script>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input class="form-control" type="search" placeholder="Search">
<input class="form-control" type="hidden" id="object" value="">
<input class="form-control" type="hidden" id="material">
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-search"></i></div>
</div>
</div>
</form>
</li>
<script type="text/javascript">
function add_form(name){
document.getElementById("object").value=name;
console.log(document.getElementById("object").value);
}
</script>
<li class="nav-item">
<a class="nav-link" href="#">Auction</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle3" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Cart
</a>
<div class="dropdown-menu menu3" aria-labelledby="navbarDropdown3">
<a class="dropdown-item">
<div>
<img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park <span class="dropdown-product-details">2 x $24.89</span>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">
<div>
<img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">
<div>
<img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">
<a class="btn btn-sm btn-secondary" href="cart.html">View Cart</a>
<a class="btn btn-sm btn-success" href="checkout-address.html">Checkout</a>
</a>
<li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signUp">Sign Up</button></li>
<li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signIn" style="margin-left:10px">Sign In</button></li>
<!-- Modal content-->
<div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<!--<label for="email" class="col-form-label">Email address:</label>-->
<input type="email" class="form-control" id="signUpEmail" name="email" placeholder="Email">
</div>
<div class="form-group">
<!--<label for="pwd" class="col-form-label">Password:</label>-->
<input type="password" class="form-control" id="signUpPassword" name="password" placeholder="Password" onchange="check_pass()">
</div>
<div class="form-group">
<!--<label for="pwd" class="col-form-label">Confirm Password:</label>-->
<input type="password" class="form-control" id="signUpConPassword" name="password" placeholder="Confirm Password" onchange="check_pass()">
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="signUpSubmit" disabled="true" >Sign Up</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function check_pass()
{
//alert(document.getElementById('signUpPassword').value);
if (document.getElementById('signUpPassword').value ==
document.getElementById('signUpConPassword').value) {
document.getElementById('signUpSubmit').disabled = false;
}
else
{
document.getElementById('signUpSubmit').disabled = true;
}
}
$('#signUpSubmit').click(function()
{
$('#signUp').modal('toggle');
//alert("signup completed");
var email=document.getElementById('signUpEmail').value;
var password = document.getElementById('signUpPassword').value;
$.ajax({
url: 'signup.php',
type: 'POST',
data: {
email: email,
password: password
},
success: function() {
//alert('Email Sent');
}
});
});
</script>
<div class="modal fade" id="signIn" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sign In</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<!--<label for="email" class="col-form-label">Email address:</label>-->
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
<div class="form-group">
<!--<label for="pwd" class="col-form-label">Password:</label>-->
<input type="password" class="form-control" id="pwd" name="password" placeholder="Password">
</div>
</form>
</div>
<div class="modal-footer">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
put php function in navbar.
<?php
if ( isset($_SESSION['session name here']) ) { ?>
// here put navigation bar which you want to show after sig in.
<?php } else { ?>
// here put navigation bar which you want to show before sign in.
<?php } ?>
Now it sould work.
By default you can keep the avatr field hidden or display as none and on successful login you can unhide the avatar class
Something like this
if(result == "validUser"){
// If the user is valid add the class
$("#avatarImg").addClass("showAvatar");
$("#avatarImg").addClass("rounded-circle");
}
.showAvatar{display:block;}
I have a very simple bootstrap issue that I'd like to solve.
According to the guide (https://getbootstrap.com/docs/4.0/components/dropdowns/) the .dropdown-menu class and dropdown-toggle has to be wrapped within .dropdown, or another element that declares position: relative;.
But so far, I can only get it to work if I place the .dropdown-menu at the same level as my toggle. Because of this, I'm only able to get a small dropdown on the right hand corner like this.
However, if I were to move the entire .dropdown-menu div block down by two levels (inside the .input-group .dropdown div block), I'd achieve an effect like this ...
... which is exactly what I wanted, however, on the console, bootstrap/popper would then spew out an error telling me that Cannot read property 'setAttribute' of undefined, and the dropdown menu would not retract anymore, and that's where I'm stuck.
I have included a working code sample (first image) in the bottom for you to try, and please tell me if I'm using the dropdown class wrong?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="input-group dropdown">
<input type="text" class="form-control" id="project_search" placeholder="search ...">
<div class="input-group-append">
<div class="btn-group">
<button class="btn bg-primary text-white" type="button">Search</button>
<button class="btn bg-primary text-white dropdown-toggle dropdown-toggle-split" id="searchAdvancedFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="searchAdvancedFilter">
<h6 class="dropdown-header">Advanced Settings</h6>
<div class="dropdown-divider"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have figured out a way to resolve my issue, but then I encountered yet with another question, first of all, here's the code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="input-group dropdown">
<input type="text" class="form-control" id="project_search" placeholder="search ...">
<button class="btn bg-primary text-white" type="button">Search</button>
<button class="btn bg-primary text-white dropdown-toggle dropdown-toggle-split" id="searchAdvancedFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="searchAdvancedFilter">
<h6 class="dropdown-header">Advanced Settings</h6>
<div class="dropdown-divider"></div>
</div>
</div>
</div>
</div>
</div>
What I've done is I've removed both .input-group-append div and .btn-group div, and have my .dropdown-menu right under .dropdown, as well as having the toggle at the same level with the menu. Everything works fine ... expect the .input-group / .btn-group styles are now ruined.
Without manually using CSS class to override them, is there anything wrong with my class structure with the previous version that has caused it not to function what I wanted to achieve?
Make the containing btn-group position:static like this...
https://www.codeply.com/go/6kJ3E53PuF
<div class="container">
<div class="row">
<div class="col-12">
<div class="input-group dropdown">
<input type="text" class="form-control" id="project_search" placeholder="search ...">
<div class="input-group-append">
<div class="btn-group position-static">
<button class="btn bg-primary text-white" type="button">Search</button>
<button class="btn bg-primary text-white dropdown-toggle dropdown-toggle-split" id="searchAdvancedFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="searchAdvancedFilter">
<h6 class="dropdown-header">Advanced Settings</h6>
<div class="dropdown-divider"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How it works:
The dropdown-menu in Bootstrap 4 is position:absolute, and by default, the btn-group is position:relative. A position:absolute element inside a position:relative container will size relative to the container. However, when a position:absolute element is placed inside a position:static container, it will no longer resize relative to the container. This is allowing the dropdown-menu to size the full-width of the dropdown. See this example of absolute inside relative vs. static.
how I can align button on the left? I am using bootswatch/Litera it is bootstrap 4 beta theme.
I already tried adding the float-left class on the button and putting it inside a div but the result is the same.
I added it on the modal footer.
<div class="modal-footer">
<div class="float-left">
<button type="button" class="btn btn-outline-primary btn-circle float-left">
<i class="fa fa-plus"></i>
</button>
</div>
<button type="button" class="btn btn-primary">Save</button>
</div>
<div class="modal-footer">
<div class="pull-left">
<button type="button" class="btn btn-outline-primary btn-circle pull-left">
<i class="fa fa-plus"></i>
</button>
</div>
<button type="button" class="btn btn-primary">Save</button>
You can add "pull-left" class instead of "float-left"
Try this. Add only this css for button align leftside. and click on demo modal button to check popup.
#myModal .modal-footer {
justify-content: space-between;
}
#myModal .modal-footer {
justify-content: space-between;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary btn-circle">
<i class="fa fa-plus"></i>
</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
Try This:
.modal-footer > .float-left {
width: 100%;
}
.modal-footer>.float-left {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="modal-footer">
<div class="float-left">
<button type="button" class="btn btn-outline-primary btn-circle float-left">
<i class="fa fa-plus"></i>
</button>
</div>
<button type="button" class="btn btn-primary">Save</button>
</div>
you write simple CSS in your style
.modal-footer {
display: block;
-webkit-box-pack: inherit;
-webkit-justify-content: inherit;
-ms-flex-pack: inherit;
justify-content: inherit;
}
.btn-save {
align-self: right;
}
flow this html code :
<div class="modal-footer">
<div class="plus-button">
<button type="button" class="btn btn-outline-primary btn-circle float-left">
<i class="fa fa-plus"></i>
</button>
</div>
<button type="button" class="btn btn-primary float-right">Save</button>
</div>