I'm learning Bootstrap, and I can't get the height attribute in v4 (e.g.: "row h-25") to work.
I've tried to add another CSS which sets the height of "container-fluid" as well as html and body to 100%, which someone proposed as a solution in another answer. Still doesn't work, I'm afraid. I'm using Visual Studio, and when I open "NuGet - Solution", it says that the bootstrap version is 'v4.0.0-alpha'.
Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/custom.css" rel="stylesheet" />
<script src="scripts/angular.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color: #e7fdd6">
<div class="row h-25" style="background-color: #eee">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Customer</p><!-- These are just rough drafts while I learn the grid system. --></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Power</p></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Panels</p></div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Projects</p></div>
</div>
<div class="row h-25" style="background-color: #eee">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Customer-slider</p></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Power amount</p></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Panels</p></div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Projects-slider</p></div>
</div>
<div class="row h-25">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><img src="Content/picture.jpg" alt="Park" align="middle" /> <!-- Bilde --></div>
</div>
<div class="row h-25">
<div class="col-lg-6 col-md-6-col-sm-12 col-xs-12"><!-- Graph 1 --></div>
<div class="col-lg-6 col-md-6 hidden-sm hidden-xs"><!-- Graph 2 --></div>
</div>
</div>
</body>
</html>
custom.css:
.container-fluid {
height: 100%;
}
html, body {
height: 100%;
}
Bootstrap 4 alpha works well with h-25 class.You have to set the height for the parent element i.e.,container-fluid in px,rem or em.Do not add parent height in percentage.
.container-fluid {
min-height: 200px ;
}
Best practise is to add styles to custom class in the parent element rather than applying the styles for bootstrap core classes.
The h- (like h-25) classes were introduced in Bootstrap Alpha v6, so you need to upgrade your Bootstrap version to use these.
It looks like your NuGet reference is an older alpha version of Bootstrap 4. The latest version, as of right now, is 4.0.0-beta2.
In the VS NuGet Package Manager (right-click the solution and choose "Manage NuGet Packages for Solution..."), you should see that there are updates to the package. If not, make sure the "Include prerelease" checkbox is checked.
Related
I am using Bootstrap v2.3.0 to design footer content. I am trying to use the bootstrap grid to order my columns. In v2.3.0 by using span(adding up to 12 cols), my columns are not covering the entire row.
Only in 980px screen, it's covering the entire row. But when screen size gets larger than 980px, some space is getting left or uncovered on the right side. I want the 3rd span part to be in the extreme right of the screen.
Please refer to the image for the output of my code.
(https://i.stack.imgur.com/SlfyQ.png)
Actually I want my output like below code:
[Required or Expected output][1]
<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap.css" rel="stylesheet" />
<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
<div style="float:right;">.col-sm-6_Part-2</div>
<div style="float:right; padding-right: 100px">.col-sm-6_Part-1</div>
</div>
</div>
</div>
What should I use to get it correct? Please help. Thanks in advance !!
Below is the current/wrong code.
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="span4" style="background-color:lavender;">span4</div>
<div class="span4" style="background-color:lavenderblush;">span4</div>
<div class="span4" style="background-color:lavender;">span4</div>
</div>
</div>
</body>
Replace row class with row-fluid:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row-fluid">
<div class="span4" style="background-color:lavender;">span4</div>
<div class="span4" style="background-color:lavenderblush;">span4</div>
<div class="span4" style="background-color:lavender;">span4</div>
</div>
</div>
Here. I know you are using bootstrap v2 and I understand why but do this.
Do this
<div class="row" style="display: flex; justify-content: space-between">
I did inline style to not destroy other parts of code because bootstrap v2 is really old and I don't know how it will work if you put this CSS globally for every row element
It will put first span to left second span to center and third span to right of the screen.
Is this what you want to do? If not then post in comments.
UPDATE
If you only want to push the third element to the right and leave other two on their current places you can do this
<div class="span4" style="background-color:lavender; float: right">span4</div>
It will float that element to the far right of its parent
UPDATE 2
Based on new info I got from comment here is the solution
<div class="row">
You need
<div class="row-fluid">
row-fluid will take the whole width of parent and spans will stretch
This is a bootstrap 2 feature. Read more about it here
check this:
minimum amount of code:
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavenderblush;">span4</div>
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
</div>
</div>
check :https://jsfiddle.net/sugandhnikhil/ut8d0j3m/
I am using bootstrap 4 and i have a list of items that i display like this :
<div class="container">
<div class="row">
<div class="card col-md-4 col-sm-6 col-12 item-wr" *ngFor="let item of items">
...
</div>
</div>
</div>
In my desktop view with Google Chrome i can see 3 items by row but the problem is there is no space between columns. so i add a class item-wr
.item-wr {
margin: 10px;
}
But here also the line breaks and i see just 2 items, with some space on the right of the row.
So how can i keep my 3 items per row col-md-4 with space between them ?
P.S i want no space in the beginning or the ending of each row. the first col of each row must not have some margin-left and the last col of each row must not have some margin-right
You have to give card class inside col-md-4 col-sm-4 col-12. because col-md-4 col-sm-4 col-12 this class taking itself padding and give space so you can apply design related class inside column class.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-12">
<div class="card item-wr">
...
</div>
</div>
<div class="col-md-4 col-sm-4 col-12">
<div class="card item-wr">
...
</div>
</div>
<div class="col-md-4 col-sm-4 col-12">
<div class="card item-wr">
...
</div>
</div>
</div>
</div>
Use padding utility classes available with bootstrap 4 like pr-2 for padding right by 2 spacing units. Refer here
P.S. margin will add space outside of the box-model and hence you should use padding to prevent line breaks. For more info refer here
I try to make design responsive to all web and devices. try to keep first link button all the way to the left(annoucing document stuff button) and other button to all the way right. it gets break for small device. try also wrapping anchor text but not working. please advice.is it possible to achieve it though bootstrap only? if not what custom style i need to make please advice. i can't use jquery.
plunker link
html
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
One way
<div class="panel panel-body col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding pull-left">
<a class="btn btn-default">Annoucing Notification document(anc)</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding pull-right">
<a class="btn btn-default">Remove stuff</a>
</div>
</div><br />
another issue when it has image <br/>
<div class="well col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 no-padding">
<a class="btn btn-default">Annoucing Notification document(anc)</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 no-padding col-lg-push-3">
<a class="btn btn-default"><img id = "img_and" class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGvUXEzMLx4-3F37e89TwVwdRt7wE1F79nMiT_Z7sPOZdk6RzC" style = "width:15pt">Remove stuff</a>
</div>
</div>
</body>
</html>
css
anch{
word-wrap : break-word;
}
#img_and{
width:5pt;
height : 15pt;
vertical-align:top;
}
This is how i would like to make it:
Try adding class="text-right" to the remove button container, something like this:
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding pull-right text-right">
<a class="btn btn-default">Remove stuff</a>
</div>
And also use the break points of each class, when the two buttons are collapsing u could add a "col-xs-12" on the buttons containers so they start in a diferent line.
If you can add a simple draw of the layout you want it's going to be easier to help... difficult to visualize without a draw :/
UPDATE
For the icon inside the button, it's always a better practice to use a background image instead on an image on the html.
HERE YOU CAN SEE A LIVE EXAMPLE. You will have to use media queries for your responsive buttons.
Hope it helps.
how to achieve the following using bootstrap:
Desktop View
[col-md-9(number 1)][col-md-3(number 3)]
[col-md-12(number 2)]
Mobile view
[col-xs-12(number 1)]
[col-xs-12(number 2)]
[col-xs-12(number 3)]
thanks in advance
in this case you not use the col pull and col push . You use visible and hidden class.
<div class="row visible-xs visible-sm">
<div class="col-xs-12" style="background-color:red">1</div>
<div class="col-xs-12" style="background-color:blue">2</div>
<div class="col-xs-12" style="background-color:green">3</div>
</div>
<div class="row visible-md visible-lg">
<div class="col-xs-9" style="background-color:red">1</div>
<div class="col-xs-3" style="background-color:green">3</div>
<div class="col-xs-12" style="background-color:blue">2</div>
</div>
div {
color: #fff;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-md-6" style="background-color:red">1</div>
<div class="col-xs-12 col-md-6 hidden-xs hiddem-sm" style="background-color:green">3 (visible in desktop and above)</div>
<div class="col-xs-12 col-md-12" style="background-color:blue">2</div>
<div class="col-xs-12 col-md-6 visible-xs visible-sm" style="background-color:green">3 (visible in tabs and mobile)</div>
</div>
You can't directly achieve that order, for atleast one case, you'll need to replicate your content and toggle its visible in Desktop or mobile view.
I'm using Bootstrap v3.3.4.
I want to implement a footer in my web page. But, it doesn't work.
The code of my page:
<!DOCTYPE html>
<html>
<head>
<title>Web site</title>
<link href='css/main.css' rel='stylesheet'>
<!-- Library -->
<link rel="stylesheet" href="Bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="Bootstrap/bootstrap-theme.min.css">
<script src="Script/jquery.min.js"></script>
<script src="Script/bootstrap.min.js"></script>
</head>
<body>
<div class='container'>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 text-center">
<h2><b> My first web site!</b></h2>
<div style="padding-bottom: 10px;"></div>
</div>
</div>
<div class="row well">
<div class="col-md-6 col-sm-6 col-xs-6">
<p>This is my first web site, I'm trying to learn Bootstrap.</p>
<button type='button'>Take the Tour</button>
<button type='button'>Book Tickets Now</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<img src="Images/universe.jpg" alt="Blasting Off"/>
</div>
</div>
<div class="row well">
<div class="col-md-4 col-sm-4 col-xs-4">
<h3><b>I am 20 years old!</b></h3>
<p>I was born in 1994.</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<h3><b>I live in Rome!</b></h3>
<p>Rome is a beautiful city.</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<h3><b>I am a programmer!</b></h3>
<p>I am a front-end developer, I started to do this work recently.</p>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
</body>
NetBeans says Class footer not found
I have included bootstrap.min.css and bootstrap-theme.min.css
If I open the page with a browser (Chrome, im my case) the footer doesn't work..
Why? Thanks.
I'm assuming you're trying to import a footer from the twitter-bootstrap library. Unfortunately twitter-Bootstrap does not include a default CSS for a footer class. (It might do for the HTML-tag , but there is no class).
Depending on what kind footer you want to display there are some examples over at http://www.getbootstrap.com
For example:
http://getbootstrap.com/examples/sticky-footer/
Hope that helped you.
I don't know exactly what you are asking for but this may help.
If you want the footer to be fixed at bottom, then try adding this to your CSS code.
CSS:
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
I hope this will help you?