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
Related
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>
Ok so I'm designing a Bootstrap accordion heading panel with multiple elements in it:
A big button
Some (shortish) text/title that could be multiple lines long
A small button group on the left
In theory that's working quite fine, at least if the title is not too long for the container. If it starts spilling into a second or third line, the whole concept falls apart. See my fiddle here.
What I want is that all elements are always 1. Next to each other, 2. Vertically centered.
So let me try and draw how it should look with bigger titles:
-----------------------------------------------------
| |
| ------- Text that spillls over ---------- |
| | BTN | into the next line and | | | | |
| ------- beyond! ---------- |
| |
-----------------------------------------------------
So basically, each of the three elements has it's well defined space and is vertically centered inside that.
How do I achieve this?
You can do this very simple with bootstrap grid system, read some information here: http://getbootstrap.com/css/
It should be something like:
<div class="row">
<div class="col-md-2">left content</div>
<div class="col-md-8">middle content</div>
<div class="col-md-2">right content</div>
</div>
You should read bootstrap documentation, there are more examples and more "how to", so you can find what you exactly need
Just some basics:
bootstrap grid has 12 "spaces" for columns. In example above, I created 3-column layout with middle column larger than the other (you can see 2-8-2 - and you can play wiht 3-6-3 or similar - sum must be always 12)
the "md" in col-md-... means that this column is visible only on Medium devices Desktops (≥992px), you can use "xs", or other for smaller device - it depends on what you need
Here is something that maybe what you're looking for, with vertical centering.
Here is a fiddle
And the code :
Css:
.cell {
display: table-cell;
vertical-align: middle;
float: none;
}
HTML:
<div id="panel-1" class="panel panel-default">
<div class="panel-heading clearfix">
<div class="row">
<div class="col-xs-2 cell">
<button type="button" class="btn btn-default some-button">button!</button>
</div>
<div class="col-xs-8 cell">
<h4 class="panel-title pull-left heading">
<a>Short</a>
</h4>
</div>
<div class="col-xs-2 cell" >
<div class="btn-group">
<button type="button" class="btn btn-default">a</button>
<button type="button" class="btn btn-default">b</button>
<button type="button" class="btn btn-default">c</button>
</div>
</div>
</div>
</div>
<div id="panel-2" class="panel panel-default">
<div class="panel-heading clearfix">
<div class="row">
<div class="col-xs-2 cell">
<button type="button" class="btn btn-default some-button">button!</button>
</div>
<div class="col-xs-8 cell">
<h4 class="panel-title pull-left heading">
<a>Some string that's really longish and stuff hehe right? (looooong long long)</a>
</h4>
</div>
<div class="col-xs-2 cell">
<div class="btn-group">
<button type="button" class="btn btn-default">a</button>
<button type="button" class="btn btn-default">b</button>
<button type="button" class="btn btn-default">c</button>
</div>
</div>
</div>
</div>
</div>
</div>
Why not put your button and button group into your h4 element? Also take the pull left off your div elements. Here is a fiddle with everything line up. I dont know if this is what you were looking for but I added a center align to the css class and removed the pull left from the panel title elements. I also threw the buttons into the header element
<h4 class="panel-title heading">
<div class="pull-left">
<button type="button" class="btn btn-default some-button">
button!
</button>
</div>
<a>
Some string (short)
</a>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default">a</button>
<button type="button" class="btn btn-default">b</button>
<button type="button" class="btn btn-default">c</button>
</div>
</h4>
This is they layout of the page
Here's the code for this
<div class="newsContent row">
<div class="newsDate col-md-2">05 August 2014</div>
<div class="newsSeparator col-md-1">
</div>
<div class="newsDescription col-md-7">
<div class="row">
some dummy news
<div class="newsImage"><img alt="news2" src="/Images/News/news2.jpg">
</div>
</div>
</div>
<div class="newsActions col-md-2">
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-default btn-lg edit-content" title="Edit the news" <span class="glyphicon glyphicon-pencil">
</span>
</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-default btn-lg delete-content" title="Delete the news">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
</div>
</div>
Now as you can see this green line is this part
<div class="newsSeparator col-md-1">
</div>
and the class is
.newsSeparator
{
background: url('my_1X1_pixel_image.png');
background-repeat: repeat-y;
}
But it is not repeating. I just see a 1px image instead of this desired green line. Something like this.
Why is it not repeating in y, after I've set background-repeat: repeat-y;. How do I make this like the desired line that repeats along y, and stretch/size accordingly as per the parent div and the news content?
EDIT
This is not a duplicate of that. I have background image that I need to repeat along y-axis.
You could wrap news description and image into a single <article> element
Then you may assign a border-left to the new inserted element. Doing so you avoid to use empty markup for styling purpose only and you also improve the semantic of the page.
<article>
<div class="newsDescription col-md-7">
<div class="row">
...
</div>
</div>
<div class="newsActions col-md-2">
<div class="row">
...
</div>
</div>
</article>
CSS
article {
border-left: 1px green solid;
padding-left: ... /* give some space between border and contents */
}
You can set height:inherit to set child div's height same as parent div.
I'm new to html and css so bear with me here. I have a row in bootstrap with two columns. I want to vertically align divs in the left column with divs in the right column. How can I do this?
Concretely, I want to have divs with text on the left that explain certain elements on the right. For example, imagine reading a book but on the left margin of the page there are callouts that define words aligned next to those words.
The content in the right column is dynamic. I know certain divs will be present, I just don't know exactly where they will be vertically.
Here is a jsfiddle: http://jsfiddle.net/dylanlingelbach/C73ap/. It should be a fairly minimal repro of what I am trying to do. In my actual case the breaks are html content that I don't know the size of.
I'm using bootstrap 2.
I'd prefer to do this without javascript if possible. I am sure I can do it dynamically by finding the location of the div in the right column and dynamically adjusting the absolute position of the div in the left column to it but I feel like a pure CSS solution would be more elegant.
HTML:
<div class="modal">
<div class="modal-header">
<button type="button" class="close cancel" aria-hidden="true">×</button>
<h2 id="invite-modal-label">Some text</h2>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span3">
<div class="one">
Align with #anchor1
</div>
<div class="two">
Align with #anchor2
</div>
</div>
<div class="span9 padded">
Content
<br/><br/><br/><br/><br/><br/>
<div id="anchor1">
#anchor1
</div>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<div id="anchor1">
#anchor2
</div>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
Text at the end
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success confirm">Send</button>
<button class="btn btn-danger cancel">Cancel</button>
</div>
</div>
CSS:
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.modal {
width: 60%;
left: 5%;
margin: auto auto auto auto;
}
.one {
border:1px solid black;
}
.two {
border:1px solid black;
}
UPDATE:
I don't want to reformat my html. The content in the right column is rendered separately. Essentially this data is displayed in several places not all of which will have the left column. I'd like to keep my code that renders the content of the right column separate from the rest of the markup.
For each item that you want to vertically align they need to be in their own rows:
<div class="row-fluid">
<div class="span6"></div>
<div class="span6">content content content content content content content content content content content content content content content content content content</div>
</div>
<div class="row-fluid">
<div class="span6">Align with #anchor1</div>
<div class="span6">#anchor1</div>
</div>
Here is the correct jsfiddle
You should probably rework your HTML to support more of the format you are trying to achieve.
I would suggest dividing up each anchor label and it's content into it's own row.
What I did was break up each section into it's own .fluid-row, like this:
<div class="modal">
<div class="modal-header">
<button type="button" class="close cancel" aria-hidden="true">×</button>
<h2 id="invite-modal-label">Some text</h2>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span3">
<div class="one">Align with #anchor1</div>
</div>
<div class="span9 padded">
Content for anchor 1
<br /><br /><br /><br /><br /><br />
</div>
</div><!-- end .row-fluid -->
<div class="row-fluid">
<div class="span3">
<div class="two">Align with #anchor2</div>
</div>
<div class="span9 padded">
Content for anchor 2
<br /><br /><br /><br /><br /><br />
</div>
</div><!-- end .row-fluid -->
</div>
<div class="modal-footer">
<button class="btn btn-success confirm">Send</button>
<button class="btn btn-danger cancel">Cancel</button>
</div>
</div>
You can see the results of this here: http://jsfiddle.net/C73ap/38/