Though question is trivial and asked multiple time, but my difficulty arises from using Bootstrap 4 may be or some conflicts.
I want two divs up and down, fixed to bottom. Centered align with text
centered align too.
here is code:
<div class="row ">
<div class="myfooter text-center" style="display: inline-table;">
<div class="col-lg-12 col-md-12 ">
<div class="col-lg-6 col-md-6">
<span class='label label-default'>Copyright © 2018 Some Institute of Sciences, City, Country</span>
</div>
<div class="col-lg-6 col-md-6">
<span class='label label-default'>Developed By: Our Technologies (Pvt.) Ltd.</span>
</div>
</div>
</div>
</div>
And style is:
.myfooter {
position: fixed;
height: 30px;
bottom: 0;
width: 100%;
background-color: #21262929;
}
Issues:
If I change style="display: inline-table;" to anything else like block one of the div vanishes.
As I am not a designer so please give something ready to use. Thanks
Note: Bootstrap footer class is causing some issue, I can't trace.
You can simply do this:
.myfooter {
background-color: #21262929;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="myfooter container-fluid position-fixed fixed-bottom">
<div class="row text-center">
<div class="col-12">
<span class='label label-default'>Copyright © 2018 Some Institute of Sciences, City, Country</span>
</div>
<div class="col-12">
<span class='label label-default'>Developed By: Our Technologies (Pvt.) Ltd.</span>
</div>
</div>
</div>
And by best advice is to read more about how boostrap works and also check the utilities classes that will avoid you adding your own style.
Related
I have the following html code with own css and bootstrap classes:
<div class="d-flex">
<p class="table-string">91.86</p>
<span class="ml-2">(+61%)</span>
</div>
<div class="d-flex">
<p class="table-string">108.15</p>
<span class="ml-2">(+108%)</span>
</div>
<div class="d-flex">
<p class="table-string">329.93</p>
<span class="ml-2">(+593%)</span>
</div>
And CSS:
.table-string {
width: 100%;
text-align: end;
}
I need to recieve column like this:
But actually get this:
How to align values without percentages in a column so that they are strictly under each other: hundreds under hundreds, tens under tens, ones under ones? And also value and percentage must be aligned at the end of the field. Thanks for any help
As a temporary solution, you can use something like this. Just set the width: 50%; of your <p> and <span> tags.
.table-string {
width: 50%;
text-align: end;
}
span.ml-2 {
width: 50%;
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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="d-flex">
<p class="table-string">91.86</p>
<span class="ml-2">(+61%)</span>
</div>
<div class="d-flex">
<p class="table-string">108.15</p>
<span class="ml-2">(+108%)</span>
</div>
<div class="d-flex">
<p class="table-string">329.93</p>
<span class="ml-2">(+593%)</span>
</div>
You need to divide your row into 2 equal halves and align text depending
<div class="row" style="width:10rem">
<p class="col-6 p-1 text-end">91.86</p>
<span class="col-6 p-1 text-start">(+61%)</span>
</div>
and this is an example
Let me know if you need anything else
Remove d-flex from all the Div's and put d-inline onto all <p>'s and <span>'s instead. With this you most likely do not need the CSS for .table-string so remove that as well.
Eg
<p class="d-inline">91.86</p>
<span class="ml-2 d-inline">(+61%)</span>
Apparently you are using Bootstrap, and if I understood your question, you just need to add two classes to the flex item, flex-column align-items-end, in order to set the direction of flex items and change the alignment on the cross axis:
<div class="d-flex flex-column align-items-end">
[…]
</div>
So i'm trying to make a bootstrap row with a title and a badge to the right.
To see what's happening see the image at the bottom of this post.
The code is as follows:
<div class="box workoutscontent">
<div class="row">
<div class="col-xs-10 col-md-10">
<h1 class="workouttitle">#workout.WorkoutTitle</h1>
</div>
<div class="col-xs-2 col-md-2">
<h1>
#if (workout.Goal == "Afslanken")
{<span class="label label-primary workoutlabel">Afslanken</span>}
#if (workout.Goal == "Aankomen")
{<span class="label label-success workoutlabel">Aankomen</span>}
#if (workout.Goal == "Spiermassa opbouwen")
{<span class="label label-warning">Spiermassa opbouwen</span>}
</h1>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-12">
<p>#workout.DescriptionShort</p>
</div>
</div>
</div>
The css applied to it is
Title:
.workoutscontent h1 {
margin-top: 0;
font-family: 'Nunito', sans-serif;
}
Label:
.workoutlabel {
float: right;
}
The result looks like this:
Why does the label go outside of the box I put it in?
The main problem you're facing is that the right column definition is not large enough for it's content, so you need to take some away from the left column and add to the right. Remember to shoot for 12 columns per row.
Also you don't need the float on the h1, just use Bootstrap's text-right class on the div, to align in right in the column. Using a grid can help you eliminate using floats which can create extra styling work for you as it takes the elements out of the normal flow.
Below is an example showing your markup as is (structurally) and another version below it with a different column set up allowing room for the right hand column's content, as well as removing the float. I've put a grey background on the columns so you can see what's happening there.
In the column settings I changed it to:
XS Screens: 5/7
S Screens: 6/6
M+ Screens: 7/5
.workoutscontent h1 {
margin-top: 0;
font-family: 'Nunito', sans-serif;
}
.workoutlabel {
float: right;
}
/* for demonstration purposes only */
div.row div {
background: #cccccc;
border: 1px solid white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<code>Unmodified:</code>
<div class="box workoutscontent">
<div class="row">
<div class="col-xs-10 col-md-10">
<h1 class="workouttitle">Title</h1>
</div>
<div class="col-xs-2 col-md-2">
<h1>
<span class="label label-primary workoutlabel">Afslanken</span>
</h1>
</div>
</div>
</div>
<hr/>
<code>Fixed:</code>
<div class="box workoutscontent">
<div class="row">
<div class="col-xs-5 col-s-6 col-md-7">
<h1 class="workouttitle">Title</h1>
</div>
<div class="col-xs-7 col-s-6 col-md-5 text-right">
<h1>
<span class="label label-primary">Afslanken</span>
</h1>
</div>
</div>
</div>
BTW... <span> is perfectly acceptable markup within an h1 as it is an inline element, so don't worry about that despite comments saying otherwise. Bootstraps own documentation shows it done this way: https://getbootstrap.com/docs/3.3/components/#labels
instead of float:right on .workoutlabel class just simply add text-right class on
also replace col-xs-10 col-md-10 with col-xs-9 col-md-9 and col-2-xs col-2-md to col-xs-3 col-md-3
EDIT: As requested here is the jsfiddle
When the screen gets too small for the text to fit in the row, it just overlaps other rows, rather than extending the row height. Perhaps this is because I set row heights on every row as a percentage value, in order to lay out my html page with even spacing and vertical alignment. How do I correct this overlapping of text onto other rows? Should I be looking into somehow vertically aligning my rows without setting their height? Or can I keep it the way it is and add some kind of overflow property to each row to tell them to extend their height when necessary?
All relevant images and code:
screenshot of fullscreen (good - no problems yet)
screenshot of hovering over the middle row element on smaller screens (problems)
screenshot of hovering over the bottom row of smaller screens:
all my html for the page:
<div id="landing-page" class="text-uppercase">
<div class="row hidden-lg-up" style="height:20%;overflow-y:auto;">
<div class="col-xs-3 flex-xs-middle">
<img width="100" src="images/monster2.png" />
</div>
<div class="col-xs-3 offset-xs-6 flex-xs-middle">
<img class="pull-xs-right" width="100" src="images/monster4.png" />
</div>
</div>
<div class="row" style="height:95%;overflow-y:auto;">
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
<img width="80%" src="images/monster2.png" />
</div>
<div class="col-md-12 col-lg-6 flex-xs-middle ">
<div id="motto-text" style="text-align: center;">
<h5 class="text-muted display-6">the vegan repository</h5>
<h1 class="display-3">
find vegan stuff* near you.
</h1>
<a id="try-now-button" class="with-border clickable" href="#search-filter-page">
<h5 class="text-center medium-text">try now</h5>
</a>
</div>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
<img class="pull-xs-right" width="80%" src="images/monster4.png" />
</div>
</div>
<div class="row" style="height:5%;overflow-y:auto;">
<h4 class="display-6 flex-xs-bottom">
*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!
</h4>
</div>
</div>
all my css for the page:
div#landing-page {
background-color: #696969;
height: 100%;
padding: 110px 40px 0px 40px;
overflow-y: auto;
min-height:470px;
}
EDIT: As requested here is the jsfiddle
Alright. Now the question is clear. The problem was easy to fix.
The problem is in the following div. You have specified it to have col-md-12 but you didn't force it when the screen is xs
<div class="col-md-12 col-lg-6 flex-xs-middle ">
<div id="motto-text" style="text-align: center;">
<h5 class="text-muted display-6">the vegan repository</h5>
<h1 class="display-3">
find vegan stuff* near you.
</h1>
<a id="try-now-button" class="with-border clickable" href="#search-filter-page">
<h5 class="text-center medium-text">try now</h5>
</a>
</div>
</div>
so the simplest thing is to add col-xs-12 class to prevent overlapping
See example
I'm trying to build a company intranet page, with a "grid" style layout. In the past I've used tables, however I know that these are extremely problematic when used for layouts, hence I am attempting to construct the layout using bootstrap and Divs - however it's proving problematic.
Ultimately what I'm trying to achieve in the top right hand corner of the page is:
However what I'm ACTUALLY rendering is the following:
Ignoring the fact that the weather data is a little more expanded, I'm struggling to get the desired result and am really tempted to revert back to tables to get this thing to line up!
Here is the code that I am using on the main template page:
<div class="row">
<div class="col-sm-3">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-5">
<img src="~/Content/Images/companylogo.png" style="float: right; padding-right: 15px; padding-bottom:25px;"/>
<div style="padding-top:25px; border-bottom: 1px solid black;">
<div id="weatherDiv" style="float:left;"></div>
<div id="dateDiv" style="float:right; padding-right:10px; vertical-align: bottom;"></div>
</div>
</div>
</div>
And then upon page load, the two DIVs (weatherDiv & dateDiv) are filled in using AJAX:
WeatherDiv:
<div id="weatherDiv" style="float:left;">
<link href="/Content/css/weather-icons.css" rel="stylesheet">
<link href="/Content/css/weather-icons-wind.css" rel="stylesheet">
<div>
<ul style="list-style: none; margin-left: 0px; padding-left:0px;">
<li>Brisbane - Hot and sunny - 32c <i class="wi wi-day-sunny"></i></li>
<li>Melbourne - Early shower or two - 17c <i class="wi wi-showers"></i></li>
</ul>
</div>
</div>
DateDiv:
<div id="dateDiv" style="float:right; padding-right:10px; vertical-align: bottom;">
<h4>Friday, 20 November 2015</h4>
</div>
I understand totally that my use of CSS, Bootstrap & Divs are almost laughable, however the above is a result of hours of trying and trying!
Any help is much appreciated.
It's hard to be exactly sure how you want this layout to work on mobile. But here is a jsfiddle I've created that could help.
https://jsfiddle.net/2dqqajs1/
body {
min-width: 320px;
}
.text-right img{
display: inline-block;
}
/*extra small screens only*/
#media (max-width: 767px) {
#weatherDiv{
text-align: right;
}
}
hr {
margin: 0;
border-top: solid 2px #e0e0e0;
}
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-12 text-right">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=CompanyLogo&w=400&h=100" class="img-responsive" />
</div>
</div>
<div class="row">
<div id="dateDiv" class="col-xs-12 col-sm-5 col-sm-push-7 text-right">
<h4>Friday</span>, 20 Nov<span class="hidden-xs hidden-sm">ember</span> 2015</h4>
</div>
<div id="weatherDiv" class="col-xs-12 col-sm-7 col-sm-pull-5">
<ul style="list-style: none; margin-left: 0px; padding-left:0px;">
<li>Bris<span class="hidden-sm">bane</span> <span class="hidden-xs">- Hot and sunny </span>- 32c <i class="fa fa-sun-o"></i></li>
<li>Melb<span class="hidden-sm">ourne</span> <span class="hidden-xs">- Early shower or two </span>- 17c <i class="fa fa-cloud"></i></li>
</ul>
</div>
<div class="col-xs-12"><hr/></div>
</div>
</div>
</div>
</div>
The site is bestofhemingway.com, and I am obviously just getting my feet wet with this whole thing. The site looks okay on Chrome, but the row is not lining up correctly in Explorer. I have been researching and fiddling and it looks to be a problem with .container or .row or the column class in bootstrap.css.
.row {
margin-right: -15px;
margin-left: -15px;
}
That's all in the .row class. One row in the wordpress page looks like this:
<div class="row">
<div class="col-md-4"><h2 class="box-title">The Sun Also Rises
<div class="col-md-8"> </div></div></div>
<div class="row">
<div class="col-md-4"><h2 class="box-title"><a href="link" ></a></div>
<div class="col-md-8"><h7 class="box-lang">Text</div></div>
Why .row is not working in IE?
Properly indented, your code is:
<div class="row">
<div class="col-md-4">
<h2 class="box-title">
The Sun Also Rises
<div class="col-md-8"> </div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2 class="box-title">
<a href="link" ></a>
</div>
<div class="col-md-8">
<h7 class="box-lang">Text
</div>
</div>
This reveals several issues.
Your first col-md-8 is within your first col-md-4 rather than being a sibling element.
You're using the non-existent h7 tag.
You're not closing your h tags, leaving the browser to do its own interpretation.