This is the code , so can anyone help me why im not seeing bootstrap alert when i click the button , it wont show on the page !
<!DOCTYPE html><html lang="en"><head><script type="text/javascript">$(document).ready(function(){
$('button').click(function(){
$('.alert').show()
}) });</script><title>Bootstrap Example</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
.alert{display: none;}
</div>
<div class="col-md-6">
<div style="border: 1px solid black; height: 100px;">
</div>
<div style="border: 1px solid black; height: 100px;">
</div>
</div>
<div class="container">
<button>Send Message</button>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Success! message sent successfully.
</div>
</div>
its really hard when you dont provide your actual code, but... here goes an idea to achieve something similar to what is in the picture using classes from bootstrap:
<div class="container">
<div class="row">
<div class="col-md-5" style="border: 1px solid black; height: 600px;">
content here -->
</div>
<div class="col-md-7">
<div class="row">
<div class="col-md-12" style="border: 1px solid black; height: 300px;">
content here -->
</div>
</div>
<div class="row">
<div class="col-md-12" style="border: 1px solid black; height: 300px;">
content here -->
</div>
</div>
</div>
</div>
</div>
try this code in an ambient where you are pointing to bootstrap files or it will be totally wrong.
Related
I have some css selectors to style every even and every odd occurance but for whatever reason the odd even selection is switch for a particular set of elements which are inside a div
As you can see "How Often should have a turquoise border but it doesn't, If anyone knows why this is happening it would be much appreciated if you could give me an answer
here is an example of the CSS & HTML
.profile-container .input-container:nth-of-type(even){
border: 2px solid gold;
}
.profile-container .input-container:nth-of-type(odd){
border: 2px solid turquoise;
}
<div class="page-title">
<h1>Customer</h1>
<button class="" tabindex="0" type="button">
Delete
</button>
</div>
<div class="profile-container">
<div class="input-container"><label>First Name</label></div>
<div class="input-container"><label>Last Name</label></div>
<div class="input-container"><label>Email</label></div>
<div class="input-container"><label>Phone</label></div>
<div class="input-container"><label>Customer Id</label></div>
<div class="input-container"><label>Sub Id</label></div>
<div style="margin-top: 20px; border-top: 1px dashed grey; padding-top: 20px;">
<div class="page-title" style="max-width: unset; margin-left: 0px;">
<h1>Subscription</h1>
<button class="" tabindex="0" type="button">
Cancel Subscription
</button>
</div>
<div class="input-container"><label>How Often</label></div>
<div class="input-container"><label>Inside Cleaning</label></div>
<div class="input-container"><label>intro price</label></div>
<div class="input-container"><label>Price</label></div>
</div>
<div style="margin-top: 20px; border-top: 1px dashed grey; padding-top: 20px;">
<div class="input-container"><label>Address</label></div>
<div class="input-container"><label>Postal Code</label></div>
<div class="input-container"><label>City</label></div>
<div class="input-container"><label>Size(m<sup>2</sup>)</label></div>
<div class="input-container"><label>Stories</label></div>
<div class="input-container"><label>type</label></div>
</div>
</div>
EDIT: When i remove this (The Subscription page title) it actually works as expected
<div class="page-title" style="max-width: unset; margin-left: 0px;">
<h1>Subscription</h1>
<button class="" tabindex="0" type="button">
Cancel Subscription
</button>
</div>
.profile-container .input-container:nth-of-type(even){
border: 2px solid gold;
}
.profile-container .input-container:nth-of-type(odd){
border: 2px solid turquoise;
}
<div class="page-title">
<h1>Customer</h1>
<button class="" tabindex="0" type="button">
Delete
</button>
</div>
<div class="profile-container">
<div class="input-container"><label>First Name</label></div>
<div class="input-container"><label>Last Name</label></div>
<div class="input-container"><label>Email</label></div>
<div class="input-container"><label>Phone</label></div>
<div class="input-container"><label>Customer Id</label></div>
<div class="input-container"><label>Sub Id</label></div>
<div style="margin-top: 20px; border-top: 1px dashed grey; padding-top: 20px;">
<div class="page-title" style="max-width: unset; margin-left: 0px;">
<h1>Subscription</h1>
<button class="" tabindex="0" type="button">
Cancel Subscription
</button>
</div>
<div class="input-container"><label>How Often</label></div>
<div class="input-container"><label>Inside Cleaning</label></div>
<div class="input-container"><label>intro price</label></div>
<div class="input-container"><label>Price</label></div>
</div>
<div style="margin-top: 20px; border-top: 1px dashed grey; padding-top: 20px;">
<div class="input-container"><label>Address</label></div>
<div class="input-container"><label>Postal Code</label></div>
<div class="input-container"><label>City</label></div>
<div class="input-container"><label>Size(m<sup>2</sup>)</label></div>
<div class="input-container"><label>Stories</label></div>
<div class="input-container"><label>type</label></div>
</div>
</div>
From the MDN :nth-of-type() reference: "The :nth-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name)." You may be expecting it only to look for matching siblings with your selector class of .input-container, but in fact it is looking for siblings with the same tag, which is <div>, and shared among several other elements in the section, not just those with the .input-container class.
It works as expected when you remove the subscription title because those div's are being counted in the nth-of-type declared as even and odd declarations in your stylesheet.
You're saying odd and even nth-of-type children of .profile-container which selects all divs of that type including <div style="margin-top: 20px; border-top: 1px dashed grey; padding-top: 20px;">.
I would nest all input-container's in their own respective divs and use the nth-of-type odd and even declaration on those new parents. In this example, I called it .more-inputs. This way the odd and even are only targeting the divs with the class input-container and not other divs nested within .profile-container.
See below:
.more-inputs .input-container:nth-of-type(even) {
border: 2px solid gold;
}
.more-inputs .input-container:nth-of-type(odd) {
border: 2px solid turquoise;
}
<div class="page-title">
<h1>Customer</h1>
<button class="" tabindex="0" type="button">Delete</button>
</div>
<div class="profile-container">
<div class="more-inputs">
<div class="input-container"><label>First Name</label></div>
<div class="input-container"><label>Last Name</label></div>
<div class="input-container"><label>Email</label></div>
<div class="input-container"><label>Phone</label></div>
<div class="input-container"><label>Customer Id</label></div>
<div class="input-container"><label>Sub Id</label></div>
</div>
<div class="page-title" style="max-width: unset; margin-left: 0px; margin-top: 20px; border-top: 1px dashed grey; padding-top: 20px;">
<h1>Subscription</h1>
<button class="" tabindex="0" type="button">Cancel Subscription</button>
</div>
<div class="more-inputs">
<div class="input-container"><label>How Often</label></div>
<div class="input-container"><label>Inside Cleaning</label></div>
<div class="input-container"><label>intro price</label></div>
<div class="input-container"><label>Price</label></div>
</div>
<div style="margin-top: 20px; border-top: 1px dashed grey; padding-top: 20px;" class="more-inputs">
<div class="input-container"><label>Address</label></div>
<div class="input-container"><label>Postal Code</label></div>
<div class="input-container"><label>City</label></div>
<div class="input-container"><label>Size(m<sup>2</sup>)</label></div>
<div class="input-container"><label>Stories</label></div>
<div class="input-container"><label>type</label></div>
</div>
</div>
I wanted to implement the design below , but I am having trouble on the positions , can anyone give a basic css example and implementation of the sample image below ? Help would really be appreciated. Thank you. are we going to use col for that ? how do we seperate text based on the design ?
Really simple example using bootstrap:
.col {
background-color: red;
}
#icon {
background-color: green;
}
hr {
border-top-width: 3px !important;
}
.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row">
<div class="col m-2">
<div class="row">
<div id="icon" class="col-4">
ICON
</div>
<div class="col-8">
<h3>
Unmuted
<span class="arrow-up"></span>
</h3>
<hr>
<p>
Panacast
</p>
</div>
</div>
</div>
<div class="col m-2">
<div class="row">
<div id="icon" class="col-4">
ICON
</div>
<div class="col-8">
<h3>
Unmuted
<span class="arrow-up"></span>
</h3>
<hr>
<p>
Panacast
</p>
</div>
</div>
</div>
</div>
I am trying to put 5 div elements next to each other and also center them. However, I cant make it work. Here is my code
<div style="width:200px;margin-right:20px;">
<div class="panel panel-default text-center" style="border: 1px solid #fab05d;border-radius:0px;">
<div class="panel-heading" style="background-color:#fab05d;color:#ffffff !important;border-radius:0px;">
<h1>2017</h1>
<p style="line-height: 14pt; margin-top:3px;margin-right:25px;">EARLY BIRD*</p>
<p style="clear:both;line-height: 16pt;">GOLD PACKAGE <br>REGISTRATION**</p>
</div>
<div class="panel-body" style="padding-top:5px;">
<p style="color:#929393;font-size:15px;"><strong>$x.00 TICKET</strong></p>
<div style="display:inline-block;margin:auto;padding-top:1px;margin-top:1px;" class="text-center">
<input type="image" src="http://localhost/wordpress/wp-content/uploads/2017/03/gold_remove.png" id="gold_r" style="">
<input type="text" class="text-center" id='goldval' name="quantity" size="5" onchange="gold_change()" style="vertical-align:top;font-weight:bold;border-radius:5px;border:1px solid #929393;">
<input type="image" src="http://localhost" id="gold_a" style="">
</div>
</div>
</div>
I have 5 of them. They are basically the same, only the content is different. All 5 divs are inside container-fluid (I am using bootsrap). I have tried to add display:inline-block to my container but it doesn't work. Also, I used float:left but in that case, I can't properly align my divs when the screen size changes. I tried to use the extended version of Bootstrap grid when you can create equal 5 columns but in that case, my div's content gets messed up. Can anyone please give me some solution that will work for all screen sizes? Thanks
Try this in a larger screen, I think this will work. The snippet's screen is very small that's why it does not align together. Use Media Queries to adjust the div's size so that it can accommodate smaller screen size
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2">
</div>
<div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2">
</div>
<div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2">
</div>
<div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2">
</div>
<div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2">
</div>
</div>
</div>
This may help you!
.col-xs-2{
background:green;
color:#FFF;
}
.col-half-offset{
margin-left:4.166666667%
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="border: 1px solid black">
<div class="col-xs-2" id="p1">One</div>
<div class="col-xs-2 col-half-offset" id="p2">Two</div>
<div class="col-xs-2 col-half-offset" id="p3">Three</div>
<div class="col-xs-2 col-half-offset" id="p4">Four</div>
<div class="col-xs-2 col-half-offset" id="p5">Five</div>
<div>lorem</div>
</div>
</div>
I have a layout with Bootstrap. MY problem is that I cannot get the same output on every monitor. In a portable pc the output is different than on a regular monitor.
I have already changed from container to container-fluid but still cannot get the same output on every monitor. Is it possible to read the screen resolution and adjust the code to it?
This is my code:
<body style="overflow: hidden; height: 100%;">
<?php
include ($_SERVER['DOCUMENT_ROOT']."/include/Menu.php");
?>
<div class="jumbotron" style="border-bottom: solid 3px rgb(132, 177, 161);">
<div class="container-fluid">
<div class="row">
<div class="col-md-1" style="padding-left:0px">
<button id="New" type="button" class="btn btn-default btn-sm ButtonEWG">
<img id="ButtonIcon" src="/img/icons/plus.png" style="padding-right: 10px;">
New
</button>
</div>
<div class="col-md-1">
<button id="New" type="button" class="btn btn-default btn-sm ButtonEWG">
<img id="ButtonIcon" src="/img/icons/excel.png" style="padding-right: 10px;">
Export
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid viewport" style="padding: 0px;">
<div class="row thick" style="border-bottom: solid 3px rgb(132, 177, 161); margin: 0px; padding: 0px;">
<div class="col-md-6" style="height: 100%; padding: 0px; border-right: solid 3px rgb(132, 177, 161); border-left: solid 3px rgb(132, 177, 161)">
<div id="OccurrencesGrid" style="border: none"></div>
</div>
<div class="col-md-6">
<div id='DetailsTabs'style="margin-top:10px; border:none">
<ul>
<li style="margin-left: 30px;">Occurrence Details</li>
<li>Occurrence status overview</li>
</ul>
<div style="padding-top:20px; background-color:#F5F5F5;">
<div id='OccurrenceDetails'></div>
</div>
<div style="padding-top:20px; background-color:#F5F5F5">
<div class = "row">
<div class = "col-md-4"><div class="alert alert-info" role="alert" style="background-color: #F5F5F5;">Opening</div></div>
<div class = "col-md-2" align="center"><div class="alert alert-info" role="alert">N/A</div></div>
<div class = "col-md-2" align="center"><div class="alert alert-success" role="alert"><?php echo $StatusGrid[0];?></div></div>
<div class = "col-md-2" align="center"><div class="alert alert-warning" role="alert">N/A</div></div>
<div class = "col-md-2" align="center"><div class="alert alert-danger" role="alert"><?php echo $StatusGrid[1];?></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid thin" style="padding-top: 10px;">
<div class="col-md-2">
<div id="LeftDonut" style="height:250px;"></div>
</div>
</div>
</div> <!-- /container -->
I just gave another guy some Mark Up / CSS to keep his site fluid I think this will also help you.padding causes overlap, fluid design?If you need further assistance let me know :D
I'm trying to show two divs next to each other using Bootstrap, but there is a distance between them. How can i place them exactly next to each other.
The code:
<div class="col-lg-8 col-lg-offset-2 centered">
<div style="float: left; border: 1px solid; width: 227px; height: 50px;"></div>
<div style="float: right; border: 1px solid;width: 227px; height: 50px;"></div>
</div>
Image illustration:
Look into grids in Bootstrap.
You could do something like this:
<div class="row">
<div class="col-xs-6">div 1</div>
<div class="col-xs-6">div 2</div>
</div>
Adding to Lschessinger's answer you could use offset to center the blocks. Look here under Offsetting columns
Maybe this is what you're looking for?
<style>
.border {border: 1px solid #CCC;}
</style>
<div class="row">
<div class="col-xs-2 border col-xs-offset-4">div 1</div>
<div class="col-xs-2 border">div 2</div>
</div>
Or if you have to stick to your code with the inline styles and specific widths then maybe this, you can increase the width between by increasing the width 454px to 464px for a 10px gap, and so on:
<div class="col-lg-12">
<div style="width: 454px;" class="center-block">
<div style="border: 1px solid; width: 227px; height: 50px;" class="pull-left"></div>
<div style="border: 1px solid; width: 227px; height: 50px;" class="pull-right"></div>
</div>
</div>
One approach is to have a row containing two div elements. The elements will seemingly stack next to each other due to the fact that Bootstrap is built with flexbox.
In the following example I'm using the class justify-content-center to center both elements. And col-auto that will size columns based on the natural width of their content.
div{border:1px solid blue}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row justify-content-center p-3">
<div class="col-auto">
content one
</div>
<div class="col-auto">
content two
</div>
</div>
</div>
Align the elements to the left by using justify-content-start
div{border:1px solid blue}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row justify-content-start p-3">
<div class="col-auto">
content one
</div>
<div class="col-auto">
content two
</div>
</div>
</div>
Align the elements to the right by using justify-content-end
div{border:1px solid blue}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row justify-content-end p-3">
<div class="col-auto">
content one
</div>
<div class="col-auto">
content two
</div>
</div>
</div>
Note: This codes do not have breakpoints. If you want to add breakpoints use this format: col-{breakpoint}-auto or/and justify-content-{breakpoint}-auto