I have a panle body that including an image and button under it.
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-1</button>
<input type="checkbox" id="left-item" class="hidden">
</div>
<div class="col-md-6">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-2</button>
<input type="checkbox" id="middle-item" class="hidden">
</div>
</div>
</div>
I could not set alignment of button and image. Button should be under image and center. I could create a temporary solution with custom css but I want to learn is there a solution with bootstrap.
Since the labels are of inline display in nature, the class text-center does the trick for you!
<div class="panel-body">
<div class="row">
<div class="col-md-6 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-1</button>
<input type="checkbox" id="left-item" class="hidden">
</div>
<div class="col-md-6 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-2</button>
<input type="checkbox" id="middle-item" class="hidden">
</div>
</div>
Preview
Fiddle: http://www.bootply.com/QwYES83I3B
Try this:
DEMO
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="col-md-12 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio" />
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-1</button>
<input type="checkbox" id="left-item" class="hidden" />
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio" />
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-2</button>
<input type="checkbox" id="middle-item" class="hidden" />
</div>
</div>
</div>
</div>
Related
I am having issue with my bootstrap page. I am trying to create a login form with header logo but when I am viewing it in my mobile it is not correctly displayed.
I am using bootstrap 4.5.2
Here's my HTML:
<div class="container">
<div class="row">
<div class="col-md-6 text-center justify-content-center align-items-center">
<img src="Images/logo-lg.png" alt="logo" class="img-fluid"/>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<img width="150px" src="Images/profile.svg"/>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h3>Member Login</h3>
</center>
</div>
</div>
<div class="row">
<div class="col">
<hr>
</div>
</div>
<div class="row">
<div class="col">
<label>Username</label>
<div class="form-group">
<asp:TextBox CssClass="form-control" ID="txtUsername" runat="server" placeholder="Username" required></asp:TextBox>
</div>
<label>Password</label>
<div class="form-group">
<asp:TextBox CssClass="form-control" ID="txtPassword" runat="server" placeholder="Password" TextMode="Password" required></asp:TextBox>
</div>
<div class="form-group">
<asp:Button class="btn btn-success btn-block btn-lg" ID="btnLogin" OnClick="ValidateUser" runat="server" Text="Login" />
</div>
<div class="form-group">
<a href="Registration.aspx">
<input class="btn btn-info btn-block btn-lg" id="btnRegistration" type="button" value="Sign Up" /></a>
</div>
<div class="form-group">
<div id="dvMessage" runat="server" visible="false" class="alert alert-danger">
<strong>Error!</strong>
<asp:Label ID="lblMessage" runat="server" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's what it looks like when I am viewing it on my mobile.
I want it to be the logo at the top of the login details when it is resize to mobile.
Add
<div class="col-md-6 col-sm-12">
Instead of
<div class="col-md-6">
For both the columns
You can use the Grid System here is the link:
https://getbootstrap.com/docs/4.0/layout/grid/
So im creating a stepper and and each progress bar has a fieldset but the last fieldset wont work?? It wont go inside the fieldset rather it gets out of the form and it looks like this:
The training fieldset gets out of the form itself.it just wont go in the last progressbar where am i going wrong? what can i do to fix this?
<div class="container-fluid">
<div class="row justify-content-center mt-0">
<div class="col-11 col-sm-9 col-md-7 col-lg-6 text-center p-0 mt-3 mb-2">
<div class="card px-0 pt-4 pb-0 mt-3 mb-3">
<h2><strong>Customer Registration</strong></h2>
<div class="row">
<div class="col-md-12 mx-0">
<form id="msform">
<ul id="progressbar">
<li class="active" id="account"><strong>Personal Information</strong></li>
<li id="personal"><strong>Additional Information</strong></li>
<li id="payment"><strong>Educational Background</strong></li>
<li id="confirm"><strong>Professional Background</strong></li>
</ul>
<fieldset>
<div class="form-card">
<div class="row mx-4">
<div class="col-12 mb-2">
<label class="order-form-label">Full Name</label>
</div>
<div class="col-12 col-sm-12">
<input class="order-form-input" placeholder="FirstName MiddleName LastName">
</div>
</div>
</div>
<input type="button" name="next" class=" next action-button" value="Next Step" />
</fieldset>
<fieldset>
<div class="form-card">
<div class="row mx-4">
<div class="col-12 mb-2">
<label class="order-form-label">Spouse Full Name</label>
</div>
<div class="col-12 col-sm-12">
<input class="order-form-input" placeholder="FirstName MiddleName LastName">
</div>
</div>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next Step" />
</fieldset>
<fieldset>
<div class="form-card">
<h2 class="fs-title">Elementary</h2>
<div>
<div id="readroot" style="display: none">
<div class="row mx-4">
<div class="col-12 mb-2">
<label class="order-form-label">School</label>
</div>
<div class="col-12 col-sm-12">
<input class="order-form-input" placeholder="School Name">
</div>
</div>
<input class="btn"type="button" value="Remove School"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
</div>
<form method="post" action="/cgi-bin/show_params.cgi">
<span id="writeroot"></span>
<div style="flex:right">
<input class="btn" type="button" value="Add School" onclick="moreFields();"/>
</div>
</form>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next Step" />
</fieldset>
<fieldset>
<div class="form-card">
<h2 class="fs-title">Trainings</h2>
<div id="readroot6" style="display: none">
<div class="row mx-4">
<div class="col-12 mb-2">
<label class="order-form-label">Title</label>
</div>
<div class="col-12 col-sm-12">
<input class="order-form-input" placeholder="Trainings">
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
Your div with id readroot6 has no closing parameter, your fieldset should become
<fieldset>
<div class="form-card">
<h2 class="fs-title">Trainings</h2>
<div id="readroot6" style="display: none">
<div class="row mx-4">
<div class="col-12 mb-2">
<label class="order-form-label">Title</label>
</div>
<div class="col-12 col-sm-12">
<input class="order-form-input" placeholder="Trainings">
</div>
</div>
</div>
</div>
</fieldset>
I used the following code to output the interface as shown below.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title">Customer Profile Types</h2>
<div class="col-md-4 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label id="gridCheck"> Active</label>
</div>
</div>
</form>
</div>
</div>
</div>
But I need to get the output as shown below and align all the things in my interface.
The name also needs to be centered and textbox, and the checkbox also should be aligned.
I'm still a beginner can anyone help me.
There can be two solutions for the result you are trying to achieve.
Make use of bootstrap columns like you are using right now.
Use flexbox
Solution 1
Make a slight change to your code:
<div class="row">
<div class="col-md-6>
<h2 class="card-title">Customer Profile Types</h2>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
Solution 2
Without the bootstrap row and col, pure flexbox (using bootstrap classes).
<div class="d-flex justify-content-between align-items-center">
<h2 class="card-title">Customer Profile Types</h2>
<div>
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
If you want to use CSS, try to use flexbox with property "space-between" on this div (because is father):
<div class="card-header container-fluid">
It should make space between h2 and B's elements.
<div class="col-lg-12" style="padding: 10px">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title" style="padding: 10px">Customer Profile Types</h2>
<div align="right" class="col-md-8 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label" style="text-align: center"> Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input" type="checkbox" id="gridCheck" style="margin-left: 2px" >
<label id="gridCheck" style="margin-left: 15px"> Active </label>
</div>
</div>
</form>
</div>
</div>
<body>
<div class="navbar-collapse collapse inverse" id="navbar-header">
<div class="container-fluid">
<div class="about">
<h4>text</h4>
<p class="text</p>
<div class="imgWrapper">
<img id="photo" src="path/to/file"/>
</div>
</div>
<div class="social">
<p>text</p>
</div>
</div>
</div>
<div class="navbar navbar-static-top navbar-dark bg-inverse">
<div class="container-fluid">
<a id="logoutButton" href="logout.php" class="btn btn-lg btn-
primary">Logout</a>
<button id="navbar-button" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
Media Manager
</div>
</div>
<section class="jumbotron text-xs-center">
<div class="container">
<h1 class="jumbotron-heading">Album list</h1>
<p id="jumbotron-header-text" class="lead text-muted">text</p>
<p>
<div id="fakeButton" class="col-sm-4 col-xs-4">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
</p>
</div>
</section>
...
I'm trying to center the element with the id "fakeButton" on my Jumbotron, and I'm failing miserably. Things I've tried:
1) CSS Selector
#fakeButton {
margin: auto !important;
float: none !important;
}
2) Using bootstrap class text-center:
<div class="span7 text-center"></div>
I'm using Bootstrap 4. Most of the code is taken from this Bootstrap example:
http://v4-alpha.getbootstrap.com/examples/album/
I've made sure Bootstrap is installed correctly, but I can't seem to figure out how to center that element.
Use Bootstrap's text-center class with col-xs-12 on #fakeButton.
Use:
<div id="fakeButton" class="col-xs-12 text-center">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
Instead of:
<div id="fakeButton" class="col-sm-4 col-xs-4">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
Have a look at the snippet below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="navbar-collapse collapse inverse" id="navbar-header">
<div class="container-fluid">
<div class="about">
<h4>text</h4>
<p class="text"></p>
<div class="imgWrapper">
<img id="photo" src="path/to/file"/>
</div>
</div>
<div class="social">
<p>text</p>
</div>
</div>
</div>
<div class="navbar navbar-static-top navbar-dark bg-inverse">
<div class="container-fluid">
<a id="logoutButton" href="logout.php" class="btn btn-lg btn-
primary">Logout</a>
<button id="navbar-button" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
Media Manager
</div>
</div>
<section class="jumbotron text-xs-center">
<div class="container">
<h1 class="jumbotron-heading">Album list</h1>
<p id="jumbotron-header-text" class="lead text-muted">text</p>
<p>
<div id="fakeButton" class="col-xs-12 text-center">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
</p>
</div>
</section>
Hope this helps!
Your markup is incorrect, change the following:
This:
<p class="text</p>
To this:
<p class="text"></p>
And this:
<div id="fakeButton" class="col-sm-4 col-xs-4">
To this:
<div id="fakeButton" class="col-xs-12">
The class text-xs-center in your .jumbotron element is already centering the button.
The button has display: inline-block, that is why it is centered with text-align: center declared in its ancestor.
EDIT:
You actually have more things to correct:
Wrap your #fakeButton in a .row not in a <p> tag.
Change this:
<p>
<div id="fakeButton" class="col-xs-12">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
</p>
To this:
<div class="row">
<div id="fakeButton" class="col-xs-12">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
</div>
And then add this to your CSS:
input[type="file"] {
display: block;
}
input[type="file"] {
display: block;
}
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-collapse collapse inverse" id="navbar-header">
<div class="container-fluid">
<div class="about">
<h4>text</h4>
<p class="text"></p>
<div class="imgWrapper">
<img id="photo" src="path/to/file" />
</div>
</div>
<div class="social">
<p>text</p>
</div>
</div>
</div>
<div class="navbar navbar-static-top navbar-dark bg-inverse">
<div class="container-fluid">
<a id="logoutButton" href="logout.php" class="btn btn-lg btn-
primary">Logout</a>
<button id="navbar-button" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
Media Manager
</div>
</div>
<section class="jumbotron text-xs-center">
<div class="container">
<h1 class="jumbotron-heading">Album list</h1>
<p id="jumbotron-header-text" class="lead text-muted">text</p>
<div class="row">
<div id="fakeButton" class="col-xs-12">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
</div>
</div>
</section>
Try adding the text-center class to the button itself :
<label for="files" class="btn btn-primary btn-lg text-center">Select Image</label>
or change your html to this instead:
<div id="fakeButton" class="col-xs-12 text-center">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
I am trying to center my form of class well in the middle of the screen , could someone tell me how to modify this code to do so ?
<body>
<div class="container">
<div class="container">
<img class="myimg" src="img/logo.png" alt="my logo"/>
</div>
<div class="container">
<form class="well span4">
<input type="text" class="span3" placeholder="Username"/><br/>
<input type="password" class="span3" placeholder="Password"/><br/>
<button class="btn btn-primary span3">Sign in</button>
</form>
</div>
</div>
Try using
<div class="container text-center">
on the second .container that you have right there (the parent of the .well).
This should do it. Just offset your form by 4. This works because the 3 cols are of equal width
<div class="container">
<div class="container">
<img class="myimg" src="img/logo.png" alt="my logo"/>
</div>
<div class="container">
<form class="well offset4 span4">
<input type="text" class="span3" placeholder="Username"/><br/>
<input type="password" class="span3" placeholder="Password"/><br/>
<button class="btn btn-primary span3">Sign in</button>
</form>
</div>