<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>
Related
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>
I am trying to move antoine-barres.jpg background image all the way to the back, then the clouds.png, then the login container all the way to the front. How do I do it, I have tried z-index but not sure how it works, I have tried but ran out of ideas, please help.
<body>
<div class="wrapper">
<div class="page-header" style="background-image: url('../assets/img/antoine-barres.jpg');">
<div class="container">
<div class="row" style="z-index:9999;">
<div class="col-lg-4 ml-auto mr-auto">
<div class="card card-register">
<h3 class="title">Welcome</h3>
<form class="register-form">
<label>Email</label>
<input type="text" class="form-control" placeholder="Email">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
<button class="btn btn-danger btn-block btn-round">Register</button>
</form>
<div class="forgot">
Forgot password?
</div>
</div>
</div>
</div>
<div class="footer register-footer text-center">
<h6>© <script>document.write(new Date().getFullYear())</script>, made with <i class="fa fa-heart heart"></i> by Creative Tim</h6>
</div>
</div>
</div>
<div class="moving-clouds" style="background-image: url('../assets/img/clouds.png');">
</div>
</body>
You have to use the moving cloud image before the container
<div class="wrapper">
<div class="page-header" style="background-image: url('../assets/img/login-image.jpg');">
<div class="filter"></div>
<div class="moving-clouds" style="background-image: url('http://demos.creative-tim.com/paper-kit-2/assets/img/clouds.png');">
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 ml-auto mr-auto">
<div class="card card-register">
<h3 class="title">Welcome</h3>
<div class="social-line text-center">
<a href="#pablo" class="btn btn-neutral btn-facebook btn-just-icon">
<i class="fa fa-facebook-square"></i>
</a>
<a href="#pablo" class="btn btn-neutral btn-google btn-just-icon">
<i class="fa fa-google-plus"></i>
</a>
<a href="#pablo" class="btn btn-neutral btn-twitter btn-just-icon">
<i class="fa fa-twitter"></i>
</a>
</div>
<form class="register-form">
<label>Email</label>
<input type="text" class="form-control" placeholder="Email">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
<button class="btn btn-danger btn-block btn-round">Register</button>
</form>
<div class="forgot">
Forgot password?
</div>
</div>
</div>
</div>
<div class="footer register-footer text-center">
<h6>© <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script>document.write(new Date().getFullYear())</script>2018, made with <i class="fa fa-heart heart"></i> by Creative Tim</h6>
</div>
</div>
</div>
</div>
Try this:
.page-header {
background: url(../assets/img/clouds.png);
}
or
.wrapper {
background: url(../assets/img/clouds.png);
}
I'm not really understand your problem, can you explain it more?
.wrapper {
background: url('https://upload.wikimedia.org/wikipedia/commons/4/46/WP_SOPA_asset_Radial_Gradient.jpg'); // i change url
}
.row {
z-index: 999;
}
.moving-clouds {
background: url('http://eskipaper.com/images/simple-cloud-wallpaper-1.jpg');
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrapper">
<div class="page-header">
<div class="container">
<div class="row">
<div class="col-lg-4 ml-auto mr-auto">
<div class="card card-register">
<h3 class="title">Welcome</h3>
<form class="register-form">
<label>Email</label>
<input type="text" class="form-control" placeholder="Email">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
<button class="btn btn-danger btn-block btn-round">Register</button>
</form>
<div class="forgot">
Forgot password?
<div class="footer register-footer text-center">
<h6>© <script>document.write(new Date().getFullYear())</script>, made with <i class="fa fa-heart heart"></i> by Creative Tim</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="moving-clouds"></div>
</div>
JSFiddle Demo
You can see in my Demo that the buttons aren't aligned correctly :-(
Is it possible to:
1) have a space between the input field and the buttons &
2) have the buttons vertically aligned correctly?
Demo: https://jsfiddle.net/xg69pkt0/
Code:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-4 control-label">Postcode</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" id="concept" name="concept">
<div class="input-group-btn">
<button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue" align="top" type="submit" style="margin-bottom:10px">Find Address</button>
<button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue" align="top" type="submit">Change</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/a3xnqy33/
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-4 control-label">Postcode</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" id="concept" name="concept">
<div class="input-group-btn inup-group-addon">
<button class="btn btn-default">Find Address</button>
<button class="btn btn-default" name="Continue" id="Continue" align="top" type="submit">Change</button>
</div>
</div>
</div>
</div>
please see the modified fiddle
Hey You can check the following also. In your code you have not closed your divs properly.
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-3 control-label">Postcode</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="concept" name="concept">
</div>
<div class="col-sm-4">
<div class="input-group-btn">
<button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Find Address</button>
<button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Change</button>
</div>
</div>
</div>
</div>
</div>
</div>
Im having some problems with layout of bootstrap.
I have looked at the link below to find some details about the situation.
How can I get a Bootstrap column to span multiple rows?
However, i couldnt figure out how to fix this issue:
----------What i have----------
Picture current
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- First row, directions -->
<div class="row top-buffer">
<div class="col-md-12">
<br><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-2">
<a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
<br>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
<div class="col-md-1">
</div>
<div class="row">
<div class="col-md-4">
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<br>
<div class="form-group">
<label for="search">Search</label>
<input type="text" class="form-control" id="search">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-1"></div>
<div class="col-md-4">
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
</div>
<div class="col-md-1">
</div>
</div>
</div>
</body>
</html>
----------What i want----------
picture wanted
*Note, the extended box (left) should fill the entire row
You cannot span rows or columns as if them were tabe's. You should change your markup a little
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.row { border: 1px solid #f00;}
[class*="col-"] { border: 1px solid #0f0; }
</style>
<div class="container">
<div class="row top-buffer">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-xs-2">
<a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
<br>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
<div class="col-xs-1">
</div>
<div class="col-xs-4">
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<br>
<div class="form-group">
<label for="search">Search</label>
<input type="text" class="form-control" id="search">
</div>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
</div>
</div>
I changed the columns from md to xs just to prevent them from going responsive inside the snippet frame.
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>