The label and button are not vertical aligned. The button floats up. I've searched and tried those solutions but they did not work. Head thoroughly banged against wall.
Here's the fiddle. http://www.bootply.com/5877LkksdX
<div class="row ">
<div class="col-xs-2 ">
<h3><label class="label label-primary">
Student Information</label></h3>
</div>
<div class="col-xs-2 ">
<input id="Button3" type="button" value="Add Student" class="btn btn-success btn-sm">
</div>
</div>
The "Student Information" text is wrapped in an H3 tag which has margin-top: 20px; and margin-bottom: 10px; I suggest you take it out of the H3 and create a custom CSS class for it.
HTML
<div class="mytitle">
<label class="label label-primary">Student Information</label>
</div>
CSS
.mytitle {
font-size: 24px;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
Related
I'm practising bootstrap responsive web development, I've managed to make my webpage fairly responsive when I change the width however my middle columns overlap if I resize vertically. Here's the code:
<div class="container-fluid con">
<div class="row">
<div class="col-md-2 d-none d-md-block col1">
</div>
<div class="col-md-6 col2">
<p id="header-p">Full stack developer specialising in responsive website design and smooth user experience. Practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture</p>
<hr id="hr1">
<p id="header-tag">Web Developer - User Experience Designer - Graphic Artist
</p>
</div>
<div class="col-md-2 pic-col">
<img class="img-responsive rounded-circle img-thumbnail" src="#">
</div>
<div class="col-md-2 d-none d-md-block col1">
</div>
</div>
</div>
<div class="container-fluid con2">
<div class="row">
<div class="col-md-2 d-none d-md-block col1"></div>
<div class="col-md-8 port-col"><h2 id="portfolio-header">Portfolio</h2>
<hr id="hr2">
</div>
<div class="col-md-2 d-none d-md-block col1">
</div>
</div>
</div>
And the CSS:
#header-p{
margin-top: 10%;
text-align: center;
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:20px;
}
#header-tag{
padding-top: 1rem;
text-align: center;
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:20px;
}
.con{
margin: 4rem auto 2rem auto;
}
.col1, .col3{
border: 1px solid #bfbfbf;
background-color: #bfbfbf;
height: 100vh;
}
.col2{
background-color: #cccccc;
height: 60vh;
}
.pic-col{
background-color: #cccccc;
height: 60vh;
}
#portfolio-header{
text-align: center;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 60px;
letter-spacing: 5px;
/*line-height: 90px;*/
max-width: 100%;
color: #b3b3b3;
}
.port-col{
max-height: 100vh;
}
.con2{
margin: 2rem auto 2rem auto;!important
}
the full code is here if I'm missing anything https://codepen.io/Seaplush/pen/rKVLmX
I want to add search box to my navbar but not as the traditional way as appears in the picture , I want to add a search icon button in the navbar only and when user click on it the search box appears under the search icon .
How can i do this any one can help me please ?
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact US</li>
<li class="dropdown">
Who we are <b class="caret"></b>
<ul class="dropdown-menu">
<li>About</li>
<li> Mession</li>
<li> Vision</li>
<li class="divider"></li>
<li>Goals</li>
</ul>
</li>
<li>Publications</li>
<li>Media</li>
<li>Partners</li>
</ul>
There are lot of things on the net e.g https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search
Run below code:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('https://www.w3schools.com/howto/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<p>Animated search form:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
You can try these snippets.
Solutuion with CSS Only:
.hide
{
opacity: 0;
max-height: 0;
}
#trigger {
position: absolute;
left: -999em;
}
#container input[type="checkbox"]:checked + div
{
max-height: 99em;
opacity: 1;
height: auto;
overflow: hidden;
}
<div id="container">
<label for="trigger">click me for Search</label>
<input type="checkbox" id="trigger">
<div class="hide">
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div>
Solution with JS:
function myFunction() {
if (document.getElementById("form").style.display === "none") {
document.getElementById("form").style.display = "block";
} else {
document.getElementById("form").style.display = "none";
}
}
button {
width: 50px;
height: 50px;
}
<p>show and hide search</p>
<button onclick="myFunction()"></button>
<form id="form">
<input type="text" name="search" placeholder="Search..">
</form>
enter image description hereI'm trying to have an information panel with three different columns using bootstrap 3. I've nested the columns properly, I think, but the panels are hidden beneath the main row and I can't find a way to reveal it.
it's showing that the container is there, but you can't see it
<div class="row creative_line">
<div class="col-md-12">
<h2 class="text-center">Smart & Creative<br><p>This is why you will use it</p></h2>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-4 multi">
<div class="img-circle">
</div>
</div>
<div class="col-md-4 ui">
<div class="img-circle">
</div>
</div>
<div class="col-md-4 design">
<div class="img-circle">
</div>
</div>
</div>
</div>
</div>
This is my current css
.creative_line {
background: yellow;
min-height: 300px;
color: $primary-color;
font-family: $font-stack;
}
.creative_line p {
color: $primary-color;
font-family: $font-stack2;
font-size: 35%;
margin-top: 10px;
}
h2 {
font-size: 40px;
}
.img-circle {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
background: red;
}
.multi,
.ui,
.design {
min-height: 300px;
color: blue;
z-index: 1;
}
Im trying to get a bootstrap column to span 2 rows. I have been been looking at How can I get a Bootstrap column to span multiple rows? and it doesnt seem to work in the context of my project.
Could someone tell me what I need to do in order to make the column on the right span 2 rows?
<div class="container" style="background-color: #fff">
<div class="row" style="background-color: #fff">
<div class="col-md-4">
<img src="public/img/index/Hola_Sevila.png" style="width:180px">
<h6>Hola Sevilla!</h6>
<p>I recently had the pleaseure and the privilege of travelling to the ...</p>
<p>Read More</p>
</div>
<div class="col-md-4">
<img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
<h6>Translation helps children</h6>
<p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises ...</p>
<p>Read More</p>
</div>
<div class="col-md-4 two_row_column">
<div class="index-b-right-1"></div>
<div class="index-b-right-1">
<h3>Videos</h3>
</div>
<div class="index-b-right-1">
<h3>Be a Friend</h3>
</div>
<div class="index-b-right-2">
<h4>You can show your appreciation and support future development by becoming a friend of the Rosetta</h4>
</div>
<div class="index-b-right-3">
<h3>Donate</h3>
</div>
<div class="index-b-right-1"></div>
</div>
</div>
CSS
.index-b-right-1 {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding-bottom: 10px;
}
.index-b-right-2 {
background-color: #000;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding: 30px 40px 30px 40px;
}
.index-b-right-3 {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
text-align: center;
padding-bottom: 10px;
}
.index-b-right-3 a {
color: #CC9900;
}
I guess this is what you wanted to do?
Simple way i would explain it is you create the top most row, create the columns in the row, then in the other column, create another row which you then divide up into individual columns.
Hope it helps!
<div class="container" style="background-color: #fff">
<div class="row" style="background-color: #fff">
<div class="col-md-4">
<img src="public/img/index/Hola_Sevila.png" style="width:180px">
<h6>Hola Sevilla!</h6>
<p>I recently had the pleaseure and the privilege of travelling to the ...</p>
<p>Read More</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
<img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
<h6>Translation helps children</h6>
<p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises
...</p>
<p>Read More</p>
</div>
<div class="col-md-4 two_row_column">
<div class="index-b-right-1"></div>
<div class="index-b-right-1">
<h3>Videos</h3>
</div>
<div class="index-b-right-1">
<h3>Be a Friend</h3>
</div>
<div class="index-b-right-2">
<h4>You can show your appreciation and support future development by becoming a friend of the
Rosetta</h4>
</div>
<div class="index-b-right-3">
<h3>Donate</h3>
</div>
<div class="index-b-right-1"></div>
</div>
</div>
</div>
</div>
I'm trying to set a navigation menu at the top of the screen with two rows:
The former one will contain the Brand, and when the resolution is small enough it will also contain the special bootstrap button menu that displays the collapsed menu items stacked.
The second will contain the categories and will be visible only if the resolution is large enough.
This is what I want to achieve:
When the resolution is big enough
When the resolution is small, the second menu row is collapsed
I have used this code without success (The second row never appears):
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li>Cat1</li>
<li>Cat2</li>
<li>Cat3</li>
</ul>
</div>
</div>
</div>
<div class="container">
<p>some text</p>
</div>
</body>
</html>
Any idea?
I have updated your html code..and after changing a little bit of bootstrap styles you may get what you want..
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Cat1</li>
<li>Cat2</li>
<li>Cat3</li>
</ul>
</div>
</div>
</div>
Now set
.navbar-header {
float: none;
}
Now you will get all links below brand name
In bootstrap we can use media queries to set when to display toggle button in navigation menu.Here we can see toggle button when browser size is 500 px or lesser than 500 px(by default toggle button appears when browser size is lesser than 767 px)..
#media (min-width: 500px) {
.navbar-collapse {
width: auto;
border-top: 0;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
navbar-collapse.collapse {
display: block!important;
}
.navbar-toggle {
display: none;
}
.navbar-nav > li {
float: left;
}
}
#media (max-width: 500px) {
.navbar-toggle {
display: block;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block!important;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav > li {
float: none;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Hope this helps you!!!!!