I am trying to set a redigera button after the avsluta button
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<button class="form-control" style="width:80px;height:50px;" type="button">Avsluta</button>
<button class="form-control" style="width:90px; height:50px;" type="button">Redigera</button>
</div>
</div>
why my redigera button not set after the avsluta button
what I am trying
first I give the space 4 and then 4 and then 4 but avsluta button is set the below line
again I give the space 4 and then 3 and then 2 but avsluta button is set the below line
but not work
I am making a mistake partition of bootstrap or too many space I give
Reference:
Add "d-flex flex-row" to the div containing the buttons.
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4 d-flex flex-row">
<button class="form-control" style="width:80px;height:50px;" type="button">Avsluta</button>
<button class="form-control" style="width:90px; height:50px;" type="button">Redigera</button>
</div>
</div>
Just add btn class for the button. By default all html elements are block elements. This will take a complete row for the display of the element. adding btn class will make the button an inline-block element. This will allow multiple elements in the same line.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<button class="form-control btn btn-primary" style="width:80px;height:50px;" type="button">Avsluta</button>
<button class="form-control btn btn-primary" style="width:90px; height:50px;" type="button">Redigera</button>
</div>
</div>
Related
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I'm currently using this bootstrap template in order to create a Help Desk Ticket App:
https://colorlib.com/polygon/cooladmin/form.html
On the index page after the user logs in, I have two cards that will allow the user to chose whether they want to head to the app's dashboard or to create a ticket. I'm trying to get both the dashboard button and ticket button to the center of their respective cards.
Picture of Index page
<div class="container">
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about building Web apps with ASP.NET Core.</p>
</div>
<div class="container" id="ticket-dashboard-container">
<div class="row justify-content-center">
<div class="card" id="index-page-my-tickets">
<div class="card-header">
<strong>My</strong> Tickets
</div>
<div class="container" >
<div class="row justify-content-center">
<button class="btn btn-info btn-sm" asp-action="EmployeeMyTicketsView" style="height: 30.8px; width: 86.6px">Tickets</button>
</div>
</div>
</div>
<div class="card" id="index-page-dashboard">
<div class="card-header">
<strong>Dashboard</strong>
</div>
<div class="container">
<div class="row justify-content-center">
<button class="btn btn-info btn-sm" style="height: 30.8px; width: 100.6px">Dashboard</button>
</div>
</div>
</div>
</div>
</div>
</div>
How would I properly go about centering the two buttons?
Github link:
https://github.com/zhadjah9559/HelpDeskTicket/tree/3.LoginAndDB
Add align-items-center class after justify-content-center that should solve the issue. If it doesn't please provide live example of your code.
<div class="row justify-content-center align-items-center"> <!-- <-- here -->
<button></button>
</div>
Use margin: auto; and width: 50%;
In my example I added a class called holder to the container holding the button element and added the CSS to that class. I also added a height to the .card to show the element centered.
.card {
height: 150px;
}
.holder{
margin: auto;
width: 50%;
}
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about building Web apps with ASP.NET Core.</p>
</div>
<div class="container" id="ticket-dashboard-container">
<div class="row justify-content-center">
<div class="card" id="index-page-my-tickets">
<div class="card-header">
<strong>My</strong> Tickets
</div>
<div class="container holder" >
<div class="row justify-content-center">
<button class="btn btn-info btn-sm" asp-action="EmployeeMyTicketsView" style="height: 30.8px; width: 86.6px">Tickets</button>
</div>
</div>
</div>
<div class="card" id="index-page-dashboard">
<div class="card-header">
<strong>Dashboard</strong>
</div>
<div class="container holder">
<div class="row justify-content-center">
<button class="btn btn-info btn-sm" style="height: 30.8px; width: 100.6px">Dashboard</button>
</div>
</div>
</div>
</div>
</div>
</div>
https://codepen.io/shaan046/pen/vWmVNY
HTML code:
<body>
<div id="header" class="row">
<div class="col-md-1 col-lg-1"><h3 id="myText">Shantanu Tomar</h3</div>
<div class="col-md-offset-5 col-md-2 col-lg-offset-5 col-lg-2"><button class="btn btn-primary">Button1</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button2</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button3</button></div>
</div>
</body>
</html>
CSS Code
#header{
background-color:red;
}
JS code:
$(document).ready(function() {
$("body").addClass("container-fluid");
});
What I want is that the text “Shantanu Tomar” and 3 buttons on screen should come in div #header in a single row. I am using Bootstrap3. Not sure how I can provide col-- tags so that the webpage is visible on Phone, tablet, Laptop in right manner? I tried using lg and md classes but the buttons are not lining up with text “Shantanu Tomar”.
Thanks for the help!!
Try like this. and learn bootstrap from W3schools https://www.w3schools.com/bootstrap/
<html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div id="header" class="row">
<div class="col-md-12 col-lg-12">
<div class="col-md-3 col-lg-3">
<h3 id="myText">Shantanu Tomar</h3></div>
<div class=" col-md-2 col-lg-2"><button class="btn btn-primary">Button1</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button2</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button3</button></div>
</div>
</body>
</html>
Just use col-xs-3 (since you have four elements) if you want the elements to be in a single row, and no need for jquery here.
#header {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div id="header" class="row">
<div class="col-xs-3">
<h3 id="myText">Shantanu Tomar</h3>
</div>
<div class="col-xs-3">
<button class="btn btn-primary">Button1</button>
</div>
<div class="col-xs-3">
<button class="btn">Button2</button>
</div>
<div class="col-xs-3">
<button class="btn">Button3</button>
</div>
</div>
</div>
Why do not use a <ul> ?
Something like this :
<div id="header" class="row">
<ul class="list-inline">
<li><button class="btn btn-primary">Button1</button></li>
<li><button class="btn btn-primary">Button2</button></li>
<li><button class="btn btn-primary">Button3</button></li>
</ul>
</div>
I am using BootStrap grid to design my html pages. Everything is working fine except for small screens. In small screens the views are overlapping like below
I am using the below code
div class="container" >
<div class="row">
<div class=" col-xs-6 col-sm-offset-1
col-sm-4 col-md-offset-2 col-md-3">
<div id="poster">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg">
</div>
</div>
<div class="col-sm-offset-1 col-sm-4 col-xs-6 col-md-2" >
<div id="ratingdiv">
<label>Your Rating</label>
<div id="rateYo"></div>
<div class="editbtn">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button>
</div>
<div class="deletebtn">
<button>Delete</button>
</div>
</div>
</div>
</div>
</div>
I gave "col-xs-6" but still its not working.
Could some one tell me what I am doing wrong.
Really appreciate any ideas or suggestions.
Thanks in advance
You missed some closing tags. Here you go. Let me know if this is what you've expected.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-6 col-lg-4">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2">
<div id="ratingdiv">
<div class="row">
<label>Your Rating</label>
<div id="rateYo"></div>
</div>
<div class="row">
<button type="button" class="btn btn-info btn-md">Edit</button>
<button type="button" class="btn btn-danger btn-md">Delete</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you don't have provide any css , that's why i got two opinions. first one i think you images overlapping the col-xs-6 and the solution is below . may be this will fix your issue
#poster {
width:100%;
float:left;
}
#poster img {
width:100%;
}
otherwise i think you have set position:absolute to #ratingdiv , if you set postion to #ratingdiv just change position:relative to the media queries
I am trying to move an input group inside of my page header. When I try to use a row with columns, the HR doesn't run all the way through which bothers me.
This is what I am trying to achieve:
<div class="row">
<div class="col-md-8">
<div class="page-header">
<h3 class="text-primary">EMP <small>My Dashboards</small></h3>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i> Search</span>
<input type="text" class="form-control" placeholder="Search Results..." id="search" name="search">
</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/eo75juzL/
I am just trying to move the search input group to be right-aligned with the H3 and keep the line running all the way through.
I've updated your fiddle.
The horizontal line is part of the page-header, so I moved your columns within this div. Normal bootstrap behavior now applies, and your search box is right aligned.
To place your search box inside header You need to add this css.
.dash_input {
margin-top: -30px;
}
.dashboard {
margin-top: -40px;
}
.dash_input {
margin-top: -30px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="row">
<div class="page-header">
<div class=" dashboard col-md-8 col-lg-8 col-sm-8 col-xs-8 ">
<h3 class="text-primary">EMP <small>My Dashboards</small></h3>
</div>
<div class="dash_input col-md-4 col-lg-4 col-sm-4 col-xs-4 pull-right">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i> Search</span>
<input type="text" class="form-control" placeholder="Search Results..." id="search" name="search">
</div>
</div>
</div>
</div>
</body>
</html>
You had some problem with your div mark-up. tried to fix that. take a look at the above snippet. Also I would suggest you to use class="navbar". in that case you would have more flexibility.
I am trying to make a grid of buttons using bootstrap, however, when I change screen size on a desktop the layout jumps to the new position, i have seen in other questions that the answer was to change it to continer-fluid and row-fluid within the div, however this did not help.
My CSS and HTML is
.top-buffer
{ margin-top:10px;
margin-bottom: 10px;
}
<!-- Turn off zooming on Mobile page-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<p> This is the nav bar</p>
</div>
</nav>
<div class="jumbotron">
<div class="container-fluid">
<div class="row-fluid top-buffer"></div> <!-- this row is added in for iPhone Spacing. -->
<div class="row-fluid top-buffer"><!-- open the first row int he grid-->
<div class="col-md-4 col-md-offset-4"> <div class="col-sm-4 col-xs-4" >
<form action="page2JobMainMenu.html">
<button type="submit" class="btn btn-default center-block"> Job </button>
</form>
</div>
<div class=" col-sm-4 col-xs-4">
<form action= "page3CreateQuote.html">
<button type="button" class="btn btn-default center-block">
Quote </button>
</form>
</div>
<div class="col-sm-4 col-xs-4">
<form action="page4FinanceMainMenu.html">
<button type="button" class="btn btn-default center-block">
Finance</button>
</form>
</div>
</div><!--close off the cold md 4 div-->
</div><!-- Close the first row-->
</div><!-- Close the Fluid Container -->
</div><!--Close the Jumbotron-->
Any help is much appreciated.
Thanks
Your code basically works as is. Using col-xs-4 ensures that at even the smallest resolution the buttons will still retain their 3-column layout. It's not necessary to use col-md-4 in this instance, and .row-fluid has not been in use since Bootstrap 2. .center-block is also unnecessary as .btn-block is designed to treat Bootstrap Buttons as full-width elements.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<form action="page2JobMainMenu.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
<div class="col-xs-4">
<form action="page3CreateQuote.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
<div class="col-xs-4">
<form action="page4FinanceMainMenu.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
</div>
</div>
Note: If you can avoid using the <button> within a <form> you can make use of Bootstrap's .btn-group component for greater functionality.