I am developing a website for my high school's robotics team. I have 2 jumbotron elements but I need to modify one of the jumbotron elements without changing the other. How do I do this?
The site is www.robotichive3774.com
<!DOCTYPE html>
<html>
<head>
<title>Robotics Team 3774 Home</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-------------------- UNIFORM CODE ------------------------->
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/Home">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
<!-- Banner -->
<div class="jumbotron">
<img src="/Images/Banner.png" class="img-responsive" alt="Responsive image">
</div>
<!----------------------------------------------------------->
<div class="jumbotron">
<h1>Team 3774 Member Bio</h1>
<p>Here you can find links to every member with some information on each of them.</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Abanoub Boules</h2>
<p>Team Captain, Engineer, Coder</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Andre Bernardo</h2>
<p>Head Engineer, Assistant Captain</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Leo Scarano</h2>
<p>Head Coder, Head Web-master</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Andrew Wojtkowski</h2>
<p>Coder, Web-master, Engineer</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Mina Hanna</h2>
<p>Engineer, Coder</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Kenneth Rebbecke</h2>
<p>Engineer, Documenter</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Kristen Kaldas</h2>
<p>Coder, Head Documenter</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Melanie Aguilar</h2>
<p>Secretary, Mascot</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Anish Patel</h2>
<p>Engineer, Head 3D Modelling</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Furhan Ashraf</h2>
<p>Financial Advisor, Engineer</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
</div>
</div>
</body>
</html>
I need to have the jumbotron element on the top of the website to contain these elements but I can't have these elements applied to the second jumbotron.
.padding
{
padding-left:0;
padding-right:0;
padding-bottom:0;
}
Add an id selector to the one you wish you single out, such as id="top-jumbotron"
<!-- Banner -->
<div id="top-jumbotron" class="jumbotron">
<img src="/Images/Banner.png" class="img-responsive" alt="Responsive image">
</div>
Then apply the CSS using an ID selector, :
#top-jumbotron {
padding-left:0;
padding-right:0;
padding-bottom:0;
}
Keep in mind that an ID must be unique on the page, meaning you can only have one #top-jumbotron, one #bottom-jumbotron etc. They are useful for singling out unique elements that need specific styles or other methods applied to them.
ID selectors are denoted by a hashtag # and must be unique to the page
Example: #top-jumbotron
Class selectors are denoted by a period . and can be applied to one or more elements on the page
Example: .jumbotron
Alternatively, you can single out the first .jumbotron class on the page by using the :first-child pseudo selector like this:
.jumbotron:first-child
{
padding-left:0;
padding-right:0;
padding-bottom:0;
}
However for your case I would recommend using a specific targeted ID so you know it's always being applied to the correct jumbotron.
Related
I have what I call a tricky problem. I want to align two buttons with the panel-title and have them justified right. However, when I put them in I get this:
https://jsfiddle.net/mwoods98/fo58qswn/3/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Order Summary Details</strong></h3><span class="pull-right" style="position: relative;top: -110%;"><button class="btn btn-primary pull-right" type="button"><span class="pull-right" style="position: relative;top: -110%;">Print Summary</span> <button class="btn btn-primary" type="button">Print Label</button></button></span>
</div>
</div>
</div>
</div>
</body>
</html>
The result I want is the buttons aligned on the same line as the title.
Thanks!
You can set the position of buttons absolute :
<span class="pull-right" style="position: absolute;top: 2px;right: 21px;">
<button type="button" class="btn btn-primary pull-right">Print Summary</button>
<button type="button" class="btn btn-primary">Print Label</button>
</span>
https://jsfiddle.net/xewLs6t2/
Another solution can be something like that:
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="height: 40px;">
<h3 class="panel-title"><strong>Order Summary Details</strong></h3>
<div style="margin-top: -25px;" class="pull-right">
<button type="button" class="btn btn-primary">Print Summary</button>
Print Label
</div>
</div>
</div>
</div>
</div>
Buttons are inputs fields are not getting displayed on modal inside .aspx page but labels are visible
<div class="modal inmodal" id="mdl_filter" tabindex="-1" role="dialog" aria-hidden="true" style="position: absolute;">
<div class="modal-dialog modal-lg">
<div class="modal-content animated bounceInRight">
<div class="modal-header" style="height: 55px; padding-top: 10px">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Filter</h4>
</div>
<div class="modal-body">
<div class="tab-content">
<div class="space-10"></div>
<div id="filter_form" class="wizard-big filter_form">
<div class="step-content">
<div class="row">
<div class="col-lg-8">
<div class="form-group">
<label>By Number</label>
<input id="txt_filter_number" name="txt_filter_number" type="text" class="form-control" runat="server" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>
</div>
</div>
</div>
</div>
</div>
Output (missing buttons and input fields):
It looks like your .modal-footer div is inside the .modal-body div. The bootstrap documentation has an example that shows the footer div outside of the body div
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I tried the same html for the modal popup that you reported and its working perfectly. I think you are missing css or other css are hiding your modal elements. have a look here:
function showModal()
{
$('#mdl_filter').modal('show');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<input type="button" id="btnShow" onclick="showModal();" value="Show Modal"/>
<div class="modal inmodal" id="mdl_filter" tabindex="-1" role="dialog" aria-hidden="true" style="position: absolute;">
<div class="modal-dialog modal-lg">
<div class="modal-content animated bounceInRight">
<div class="modal-header" style="height: 55px; padding-top: 10px">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Filter</h4>
</div>
<div class="modal-body">
<div class="tab-content">
<div class="space-10"></div>
<div id="filter_form" class="wizard-big filter_form">
<div class="step-content">
<div class="row">
<div class="col-lg-8">
<div class="form-group">
<label>By Number</label>
<input id="txt_filter_number" name="txt_filter_number" type="text" class="form-control" runat="server" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
I'm using bootstrap 4 and I can't manage to center a button/link properly - no matter how I try to use text-center class (surround it with div or on the link)
<div class="row text-center">
<a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
</div>
codepen here:
https://codepen.io/anon/pen/GdbPyr
Just add: justify-content-center to the parent component. The code will look like this:
<!-- ******Key Features****** -->
<section class="key-features ">
<div class="container pt-4">
<div class="row justify-content-center"style="background: red">
<a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
</div>
</div>
</section>
working pen: https://codepen.io/manAbl/pen/bMPOJM?editors=1000 ;
-- I added the background just to have a hint, that's something that really help me and allow me to have some perspective from time to time --
Hope helps :)
You can replace the text-center on your btn with mx-auto to force even left/right margins:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<section class="key-features ">
<div class="container pt-4">
<div class="row">
<a class="btn btn-primary mx-auto" href="{% url "users:postcode" %}">Get Started</a>
</div>
</div>
</section>
I was working on a sample where I had to align a button group to the right.
I found the css class .pull-right.
While it correctly moved the button group, I was unable to reset the next section.
I've used the clearfix mixin on several objects, I cannot clear the way section intersects with the button group.
The sample on bootply (link below):
<div class="container foo">
<div class="btn-group pull-right" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<section class="debug text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</section>
</div>
And the css
.foo
{
.clearfix();
}
.foo::before,
.foo::after {
content: " "; // 1
display: table; // 2
}
.foo::after {
clear: both;
}
Due to missing less mixin support I manually implemented the mixin
Here is a runnable example: http://www.bootply.com/8GgDsWc8kZ
I've been googling this and I put foo into every div there, no place cleared the section from intersecting.
Any hints appreciated.
Just add a div between the buttons and the box with the clearfix class from Bootstrap applied to it.
BOOTPLY
HTML:
<div class="container foo">
<div class="btn-group pull-right" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="clearfix"></div>
<section class="debug text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</section>
</div>
You appear to be missing some tags. That's what's causing Bootstrap to not function the way you expect.
BOOTPLY
<div class="container foo">
<div class="row">
<div class="col-md-3 pull-right">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<section class="debug text-center row">
<div class="col-md-12">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</section>
</div>
I'd suggest that you take some time to read over the grid system documentation on the Bootstrap website.
Here you go, I added a boostrap "row" and "col-xs-12" around your 3 buttons, as well as around your section.
<div class="container foo">
<div class="row">
<div class="col-xs-12">
<div class="btn-group pull-right" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<section class="debug text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</section>
</div>
</div>
</div>
http://www.bootply.com/0TSYSI4T8b
I've tried playing with putting the indents and placement in different places but it still appear underneath the navigation button. I want it on the same line across the top.
I might of made it a bit messy trying to get it on the same line, if so just take out whenever isn't necessary.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap For Beginners</title>
<meta name="description" content="Hello World">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<style>
.nav {
}
.nav container-fluid {
}
.nav li {
display: inline;
padding: 20px;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
.jumbotron {
}
.jumbotron container-fluid {
}
.jumbotron h1 {
.footer {
}
.footer container-fluid {
}
.footer p {
}
</style>
</head>
<body>
<div class="nav">
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form>
</div>
</div>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<h1>Student</h1>
<h1>Business</h1>
</div>
</div>
</div>
<div class="footer">
<div class="container-fluid">
<p>By:</p>
<p>For:</p>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
The input bar doesn't seem to be responsive on really really small windows, is that normal?
I also want the footer to be the same size as the nav header and the jumbotron to fill up the rest of the space in between, everything fits in the window with no scrolling.
Thanks in advance.
Your code looks great, all you have to do is wrap the form and nav in a wrapper / container then separate the sections with col-md-6. I built an example for you here http://www.bootply.com/P7VmPZOfXp.
/* CSS used here will be applied after bootstrap.css */
.footer {
height: 58px;
background: #ccc;
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="container-fluid">
<div class="col-md-6 col-lg-6">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?" type="email">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form><!-- .form-horizontal -->
</div><!-- .col-6 -->
<div class="col-md-6 col-lg-6">
<div class="nav">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
</div><!-- .nav -->
</div><!-- .col-6 -->
</div><!-- .fluid container -->
</div><!-- .row -->
</div><!-- .container-->
</div><!-- .wrapper-->
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<h1>Student</h1>
<h1>Business</h1>
</div>
</div>
</div><!-- .jumbotron -->
<div class="footer">
<div class="container-fluid">
<p>By:</p>
<p>For:</p>
</div>
</div><!-- .footer -->
To address part of your issue, try putting the sections you would like to be side-by-side in the same div.row, then wrap a div.col-xx-x around each. For example:
<div class="nav">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I'm really not sure why you're not using the <navbar> class. It's there and ready to accomplish exactly what you're looking for. See this Bootply for example:
Bootply - Navbar
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" placeholder="Have Feedback?" type="text">
</div>
<button type="submit" class="btn btn-default">Submit Feedback</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
There is a way to do it like you have it, but I'm not sure how to get the <form> to align perfectly with the <nav> class, since there's padding on it and moves it down from the top a bit. You may need some custom CSS to handle that.
Bootply - Original
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<form class="form-horizontal">
<input class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?" type="email">
</form>
</div>
<div class="col-xs-2">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
<div class="col-xs-6">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
</div>
</div>
</div>
Give them both a look and see if either works for you.
Hope that helps!