I can not order my different div as I wish.
First, I would like the card to be the same height as my title.
Then, I want the bottom of my 2 buttons are at the same height as the bottom of my card.
I guess this is possible but I'm stuck ... Could you help me?
<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
<div class="5" style="margin-top:2%"><h3>Change your user profile</h3></div>
<div class="card border-primary md-5 col-6" style="width: auto; margin-left:51%">
<div class="card-header" style="font-size:22px">Attention</div>
<div class="card-body">
<p class="card-text">
The modified data must first be validated. <br /><br />
A request will be sent as soon as you click on "Submit". <br /><br />
It is normal that the old data is still displayed, it means that the validation has not been done yet.
</p>
</div>
</div>
<div>
<button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
<button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
</div>
</div>
[
You should remove the margin-left:51% given to your card as you do not need margins when working with bootstrap grid. Also, you should move the buttons into the same first column container in order to align them along with the title.
<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
<div class="col-5" style="margin-top:2%">
<h3>Change your user profile</h3>
<div>
<button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
<button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
</div>
</div>
<div class="card border-primary md-5 col-6" style="width: auto;">
<div class="card-header" style="font-size:22px">Attention</div>
<div class="card-body">
<p class="card-text">
The modified data must first be validated. <br /><br />
A request will be sent as soon as you click on "Submit". <br /><br />
It is normal that the old data is still displayed, it means that the validation has not been done yet.
</p>
</div>
</div>
</div>
Also, I would highly recommend removing inline styles and using CSS classes instead.
Working fiddle here: http://jsfiddle.net/omxahu46/
Hope this helps.
Related
I have a bootstrap grid system on my page and want two elements pulled to the right, but placed one below the other. This is the code I have right now. I want "Active" and "Primary" button place one below the other, but also pulled right. As of now, it looks like this:
If I were to add this to the button, then it aligns properly, but on mobile, it messes up.
<button type="button" class="btn btn-w-m btn-primary" style="margin-left: 261px;">Primary</button>
This is what I have so far. What can I do to achieve the desired result?
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row border-bottom white-bg dashboard-header">
<div class="col-md-3">
<h4>Dummy Name</h4>
<small>Dummy Street</small><br>
<small>Dummy Apt, Some City, Some State</small><br>
<small>United States</small><br>
</div>
<div class="col-md-3">
<h5>123-456-7890</h5>
</div>
<div class="col-md-3">
<h5>some_name#somecompany.com</h5>
</div>
<div class="col-md-3">
<h2 class="pull-right" style="margin-top: -5px">Active</h2><br>
<button type="button" class="btn btn-w-m btn-primary">Primary</button>
</div>
</div>
</div>
You do not need pull-right at all - all you need to right align the text of the heading and the button is text-align:right in the css or the text-right class on the parent div. Note that you need to open this snippet in "full screen mode due to the small size of the preview window.
I would also suggest that you put the css in its own style sheet rather than inline style rules. If you use text-align: right as a style rule then you can use a media query to apply it or left align on certain screen sizes as required.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row border-bottom white-bg dashboard-header">
<div class="col-xs-3 col-md-3">
<h4>Dummy Name</h4>
<small>Dummy Street</small><br>
<small>Dummy Apt, Some City, Some State</small><br>
<small>United States</small><br>
</div>
<div class="col-xs-3 col-md-3">
<h5>123-456-7890</h5>
</div>
<div class="col-xs-3 col-md-3">
<h5>some_name#somecompany.com</h5>
</div>
<div class="col-xs-3 col-md-3 text-right">
<h2>Active</h2><br>
<button type="button" class="btn btn-w-m btn-primary">Primary</button>
</div>
</div>
</div>
</div>
I have a footer that is set up as follows:
<hr>
<footer>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-primary" onclick="window.location.href='Glossary.html'">Glossary</button>
<button type="button" class="btn btn-primary" onclick="window.location.href='Bibliography.html'">Bibliography</button>
<button type="button" class="btn btn-primary" onclick="window.location.href='For_Help.html'">Where To Go For Help</button>
</div>
<div class="col-md-6 col-md-offset-6" style="padding-top: 5px">
<div class="panel panel-default">
<div class="panel-body col-xl-1">
<p> For questions or concerns regarding this webpage, contact: <strong>checkeredflags#gmail.com</strong></p>
<p>© 2017 Checkered Flags</p>
</div>
</div>
</div>
</div>
</footer>
How could I set it up such that the buttons are on the left, and the 2 paragraph tags are aligned with the buttons, however pulled to the right side of the screen? Currently the div with the paragraphs sits underneath the buttons. Ideally they would only go underneath when the screen size was small enough
Try This
<div class="panel-body col-xl-1">
<div class="pull-right">
<p> For questions or concerns regarding this webpage, contact:
<strong>checkeredflags#gmail.com</strong></p>
<p>© 2017 Checkered Flags</p>
</div>
</div>
Looks like the col-md-offset-6 class is pushing it down as well as the padding-top: 5px;.
See: https://codepen.io/anon/pen/ZJaJwe
I am usually able to do this. But for some reason everything I've tried just isn't working.
I've tried
<div class="row">
<div class="col-md-8">
<button>Toronto</button>
<button>Markham</button>
<button>Petawawa</button>
</div>
<div class="col-md-4">
<p>date</p>
<p>date</p>
<p>date</p>
</div>
</div>
And similar variations, but I can't seem to get the date and the event location to line up.
The code where the issue is occuring:
<div id="Location">
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12 aboutCopyContainer">
<p class="copyHeader" style="font-family: testFont;">Locations</p>
<p class="faqContent">Fall for the FEAST at an event near you!</p>
<div class="row">
<div class="col-md-6">
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Toronto.html'">Toronto</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">14</p>
<hr style="margin:0px;" />
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Petawawa.html'">Petawawa</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">7</p>
<hr style="margin:0px;"/>
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Markham.html'">Markham</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">22</p>
<hr style="margin:0px;"/>
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the JS Fiddle of what's happening:
JSFiddle
and this is the website (under Locations section) to give you a better idea of what I'm trying to do (css styling etc applied).
Oktoberfeast Locations
Any suggestions are greatly appreciated! thank you for your time
You added fixed width inside bootstrap column child. And that width together with other element width exeeded bootsrap column width, so the class locationDateCont appeared underneath:
So, in your CSS file, remove that width from that class, and add this:
.btnLocationCont {
width: auto;
}
Hope this helps!
You probably don't want to do this that way. Reason being is on mobile devices they won't match up.
To keep them together and display on desktop and mobile you could do something like this:
<div class="row">
<div class="col-md-4">
<button>Toronto</button>
<p>date</p>
</div>
<div class="col-md-4">
<button>Markham</button>
<p>date</p>
</div>
<div class="col-md-4">
<button>Petawawa</button>
<p>date</p>
</div>
</div>
Fiddle:
https://jsfiddle.net/8t5mjhf8/4/
EDIT: To make sure the p's stay next to the buttons you need the following CSS. You will want to assign a class to the p's as to no interfere with other paragraphs.
p {
display: inline;
}
Hi guys using bootstrap and struggling to understand how to get a my main div box to have other divs inside of it
For example i am trying to make this:
This big box is just a div.
What i got so far:
<div class="container">
<div class="MainBox">
<div class="Leftbox">
<h3>Box</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-responsive">P</button>
<button type="button" class="btn btn-success btn-responsive">B</button>
<button type="button" class="btn btn-success btn-responsive">L</button>
<button type="button" class="btn btn-success btn-responsive">R</button>
<button type="button" class="btn btn-success btn-responsive">T</button>
<button type="button" class="btn btn-success btn-responsive">F</button>
</div>
</div>
<div class="CentreBox">
</div>
</div>
</div>
I am not so sure how to do the boxes on the right hand side , i have tried different methods but it mucks up the whole div. Any help would be great. Thanks xx
You really want to look into Bootstraps grid system, as suggested by #Sringland in his comments, found here: Bootstrap Docs
The grid system creates 12 columns on any screen size (from xtra small - large), and can be defined as a class by col-(screensize)-(span). For example - if you want 12 columns spanning a large sized screen add the class: col-lg-12 to your div.
These columns are "embeddable", and will create a new 12-column layout inside one another. So if you want to split up an 8 column layout into two equal sized containers within it, it would like like this:
<div class="col-md-8">
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
</div>
So remember, each time you "open" a column regardless of its size, that container will have another 12 columns to work with.
After all this is said, your layout will look something like this:
<div class="row height-500px">
<div class="container">
<div class="col-md-3 border height-500px">
<!-- Content goes here -->
</div>
<div class="col-md-7 border height-500px">
<!-- CONTENT GOES HERE -->
</div>
<div class="col-md-2 height-500px">
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
</div>
</div>
</div>
Here is a link to a Bootply to see it in action. Please see the bootply for a better understanding of the height classes and border classes. I created these simply to represent your layout.
Now, gutters (the space between the columns) are not working as intended, and I hope someone help there. But, hopefully this will be a good starting point for you.
Jus try using bootstrap grid system. I used buttons for the right column, but you can use whatever you need.
<div class="container MainBox border-on">
<div class="col-md-2 left border-on">
<h3>Box</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-responsive">P</button>
<button type="button" class="btn btn-success btn-responsive">B</button>
<button type="button" class="btn btn-success btn-responsive">L</button>
<button type="button" class="btn btn-success btn-responsive">R</button>
<button type="button" class="btn btn-success btn-responsive">T</button>
<button type="button" class="btn btn-success btn-responsive">F</button>
</div>
</div>
<div class="col-md-8 CentreBox border-on">
<h3>
center
</h3>
</div>
<div class="col-md-2 right border-on">
<h3>
right
</h3>
<div class="col-md-12">
One
</div>
<div class="col-md-12">
Two
</div>
<div class="col-md-12">
Three
</div>
<div class="col-md-12">
Four
</div>
</div>
</div>
So I have a major style change whereas when all my views were originally setup I had used Bootstrap and relied on the container class to adjust for media queries at breakpoints of 1200px, 992px, and 768px. All my form input and other content work their padding and all off of the container for paddings, margins, etc... Now, it is requested that the width be 100%, but all the content to stay where it is so that the background colors styling fills the width of display.
I was trying to think of how I can add another container class to make this work over all of the views. What are some recommendations on this with keeping the constraints of content to the 1200px and so on (for media queries and such), but make the other areas spread to that 100%?
Here is an image capture of it now. It is just the tan and dark gray area with the topo image that would expand 100% while all else stays within constraints of container class.
And my code is structured as so you can see where my delima is with over-riding bootstraps container class:
<div class="container">
<form role="form">
<div class="naviaHead col-md-12">
<div class="naviaHeader">
<div class="inner">
<div class="col-md-6 loginArea">
<h1 class="col-md-8">Login</h1>
<div class="form-group">
<div class="form-group col-md-8 naviaInp">
<input type="text" name="userName" class="form-control" placeholder="username" data-ng-model="loginData.userName"autofocus>
</div>
<div class="form-group col-md-8 naviaInp">
<input type="password" name="passWord" class="form-control" placeholder="password" data-ng-model="loginData.password">
</div>
<div style="clear: both;">
<input type="button" class="naviaBtn naviaBlue" data-ng-click="login()" value="login">
<div data-ng-hide="message == ''" class="alert alert-danger">
{{message}}
</div>
</div>
<div class="loginForget">
<span><a class="naviaLink" href="#/logreg/forgotUser">forgot username</a> or <a class="naviaLink" href="#/logreg/forgotPass">forgot password</a></span>
</div>
<div class="sowLogin">
<img class="col-md-3" src="ppt/assets/images/login/sowIcon.svg">
<p class="col-md-9"><a class="naviaLink" href="https://pebb.flex-plan.com/part/PortalRegistration.aspx">PEBB eligible State of Washington employees please click here to access the portal</a></p>
</div>
</div>
</div>
<div class="col-md-6">
<img style="padding-left: 25%;" src="ppt/assets/images/login/naviaLogo.png">
</div>
</div>
</div>
</div>
</form>
<div class="loginLearn">
<div id="area1" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage1-full.png">
<div class="learnText">
<h3 class="teaserTitle">Online Account Access</h3>
<p class="teaserText">24/7 Access to balances, claim submissions and all things Navia!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
<div id="area2" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage2-full.png">
<div class="learnText">
<h3 style="margin-top: 0;" class="teaserTitle">Navia Benefits Card</h3>
<p class="teaserText">Don't wait for reimbursement!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
<div id="area3" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage3-full.png">
<div class="learnText">
<h3 style="margin-top: 0;" class="teaserTitle">FlexConnect</h3>
<p class="teaserText">Link your FSA to your insurnace and file claims instantly!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
</div>
<div style="background-color: #ede8e2; height: 150px; clear: both;">
<!-- intentionally blank -->
</div>
</div>
This will solve your purpose
<div class="container-fluid" style="background-color:red;">//This will be 100% width
<div class="container">//Inside this put your content as it was to make it indent as previous
//Your page HTML here
</div>
</div>