If I have a Bootstrap 3 list-group of <a> elements. I would like one of them split in half so that within the group it looks similar to a button group as shown in the snippet.
How can I do this?
.container {
width: 75%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="list-group">
Left Side
Right Side
Dapibus ac facilisis in
Vestibulum at eros
</div>
<p>How to divide list-group-items .left-side and .right-side so they appear on the same line but seperated similar to this:
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<a type="button" class="btn btn-default">Left Side</a>
<a type="button" class="btn btn-default">Right Side</a>
</div>
</div>
Class your special case so we can target the items with the correct specificity
Notice the .clearfix that will put the floats back where they should be once finished.
.container {
width: 75%;
}
.list-group-item.left-side,
.list-group-item.right-side {
margin: 0 0 -1px;
float: left;
width: 50%;
border-bottom-width:0px;
}
.split-items .list-group-item.left-side{
border-top-right-radius:0px;
border-bottom-right-radius:0px;
}
.split-items .list-group-item.right-side{
border-top-left-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-top-right-radius:4px;
border-left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br>
<div class="container">
<div class="list-group">
<div class="clearfix split-items">
Left Side
Right Side
</div>
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
</div>
</div>
Why don't you just float the a tags?
Add float:left and width:50% to your .list-group-item CSS:
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
width: 50%;
float: left }
Related
I am developing a website and I dont know why, my left divs with ease-out blinks always, but the right not! I dont want them to blink and I cant resolve this insue.
I saw, that this changes with the page size, like on full screen happens, when we reduce a little bit its fine, and reduce more happens again! I think its a bug.
Code from divs:
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop-code"></i>
</div>
<div class="service-text">
<h3>Web Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
.service {
position: relative;
width: 100%;
padding: 45px 0 15px 0;
}
.service .service-item {
position: relative;
margin-bottom: 30px;
display: flex;
align-items: center;
box-shadow: inset 0 0 0 0 transparent;
transition: ease-out 0.5s;
}
.service .service-item:hover {
box-shadow: inset 800px 0 0 0 #EF233C;
}
.service .service-icon {
position: relative;
width: 150px;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #EF233C;
background: #ffffff;
}
.service .service-icon i {
position: relative;
font-size: 60px;
color: #EF233C;
transition: .3s;
}
.service .service-item:hover i {
font-size: 75px;
}
.service .service-text {
position: relative;
width: calc(100% - 120px);
padding: 0 30px;
}
.service .service-text h3 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
transition: 1s;
}
.service .service-text p {
margin: 0;
font-size: 16px;
transition: 1s;
}
.service .service-item:hover .service-text h3,
.service .service-item:hover .service-text p {
color: #ffffff;
}
#media (max-width: 575.98px) {
.service .service-text h3 {
font-size: 16px;
margin-bottom: 5px;
}
.service .service-text p {
font-size: 14px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DevFolio - Developer Portfolio Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Free Website Template" name="keywords">
<meta content="Free Website Template" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<!-- CSS Libraries -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<!-- Service Start -->
<div class="service" id="service">
<div class="container">
<div class="section-header text-center wow zoomIn" data-wow-delay="0.1s">
<p>What I do</p>
<h2>Awesome Quality Services</h2>
</div>
<div class="row">
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.0s">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop"></i>
</div>
<div class="service-text">
<h3>Web Design</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop-code"></i>
</div>
<div class="service-text">
<h3>Web Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.4s">
<div class="service-item">
<div class="service-icon">
<i class="fab fa-android"></i>
</div>
<div class="service-text">
<h3>Apps Design</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.6s">
<div class="service-item">
<div class="service-icon">
<i class="fab fa-apple"></i>
</div>
<div class="service-text">
<h3>Apps Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Service End -->
</body>
</html>
There you have my code html just with services and css! Now all are blinking when they are under each other! And I dont know why
Gif of what happens:
I want my labels display left up in the text-fields, here is the screenshot where i want them exactly http://s20.postimg.org/p8h11xrot/label_1.png.
I don't know really how to do that i tried with text-align or float: left.
this is my css file:
body {
}
#container{
background-color:#ccccff;
width:100%;
margin-left:auto;
margin-right:auto;
}
.content {
padding: 5px;
width:100%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
label {
text-align: center;
}
article p{
text-align:center;
}
header{
width: auto;
height: 100px;
background-color: #ffffff;
background: url(image.png) center center no-repeat;
text-align:center;
}
footer{
text-align:center;
background-color: #999999;
}
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Intes - Register</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header> Header Image </header>
<section id="container">
<article><p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed eget vehicula sapien.
Donec vitae quam id dolor pretium viverra.
Nulla viverra quam eget fringilla ultrices.</article>
<label>First Name</label>
<br />
<div class="content">
<input type="text" name="first_name" size="50">
<br />
</div>
<label>Last Name</label>
<br />
<div class="content">
<input type="text" name="last_name" size="50">
<br />
</div>
<label>E-mail Address</label>
<br />
<div class="content">
<input type="text" name="email_address" size="50">
<br />
</div>
<div class="content">
<input type="submit" value="Register">
</div>
</section>
<footer>copyright stuff</footer>
</body>
</html>
To have your desired visual effect you need to figure out to center the form and
get the labels to show above the inputs.
#container{
text-align: center;
}
/* FORMS */
#my_form {
display: inline-block;
text-align: left;
line-height: 1.5;
}
#my_form label {
display: block;
}
#my_form input {
margin: 0.25em 0 0.5em;
}
http://fiddle.jshell.net/g4yzZ/13/
http://fiddle.jshell.net/g4yzZ/13/show
Float your .labels and input elements to the left {float:left} and use {clear:right} on the labels.
Give the label or container a width, and then use text-align: left. It should work.
label {
width: 100px;
text-align: center;
}
You can accomplish this with width.
The trick is to wrap the input and label tags in wrapper divs. You almost got there, but the nesting in your code was off.
Once that's done, you can set the content class to the width of your inputs, 333px and align it center with margin, then text-align left the labels, which are now flush with the inputs.
The working code is here: http://jsfiddle.net/bronzehedwick/xpB3v/
And the relevant css:
.content {
padding: 5px;
width:333px;
margin: 0 auto;
}
label {
text-align: left;
display: block;
}
I need to customize BS carousel, to make images size responsive corectly.
I need the carousel to adapt to the height of the active slides images initiel height.
When the viewport is wider than the image, the image/slide should scale up, but keep ratio.
When viewport is smaller the image should scale down but keep ratio.
I have tried many variations but cannot find the right solution.
I hope some css/js expert can help me out here.
Here's my current markup:
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-pause="true">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><!--data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide"-->
<img src="MediaContent/Images/Unika%20kobbertryk%201.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item"> <!--data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" -->
<img src="MediaContent/Images/Unika%20kobbertryk%202.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item"><!--data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide"-->
<img src="MediaContent/Images/Unika%20kobbertryk%203.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
And heres my currently css, that does not function like desciped. This version gives me a fixed 500px height, and an image that looses aspect ratio when viewport is smaller than image width.
/* GLOBAL STYLES
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
padding-left: 0;
padding-right: 0;
}
.navbar-wrapper .navbar {
padding-left: 15px;
padding-right: 15px;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
min-height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
min-height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 500px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Pad the edges of the mobile views a bit */
.marketing {
padding-left: 15px;
padding-right: 15px;
}
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
text-align: center;
margin-bottom: 20px;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-left: 10px;
margin-right: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 768px) {
/* Remove the edge padding needed for mobile */
.marketing {
padding-left: 0;
padding-right: 0;
}
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container {
padding-left: 15px;
padding-right: 15px;
}
.navbar-wrapper .navbar {
padding-left: 0;
padding-right: 0;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
#media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
}
Any help appreciated.
In the CSS selector .carousel-inner > .item > img, replace min-width with width: 100%;
.carousel-inner > .item > img {
min-width: 100%;
width: 100%;
}
I fixed it adding a class to the images in the carousel, for example :
<img class="fixed-height">
and in the css:
.fixed-height {
max-height: 400px;
}
I will refer you just to add the class "img-responsive" in the image tags. And Bootstrap will do the rest for you.
This class tells the Bootstrap that you want to scale the images according to the screen size.
<div class="carousel slide" id="theCarousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
<li data-target="#theCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://www.ansupalake.in/gallery/tapan%20kumar%201.JPG" alt="1" class="img-responsive" />
<div class="carousel-caption">
<h4 class="text-left">Resting In Style</h4>
<p class="text-left">Hi Everybody what's going on.....</p>
</div>
</div>
<div class="item ">
<img src="http://www.ansupalake.in/gallery/tapan%20kumar%202.JPG" alt="2" class="img-responsive" />
<div class="carousel-caption">
<h4 class="text-left">The Dude Look</h4>
<p class="text-left">Hi Everybody what's going on.....</p>
</div>
</div>
<div class="item ">
<img src="http://www.ansupalake.in/gallery/tapan%20kumar.JPG" alt="3" class="img-responsive" />
<div class="carousel-caption">
<h4 class="text-left">How z It??</h4>
<p class="text-left">Hi Everybody what's going on.....</p>
</div>
</div>
</div>
</div>
For more details Here I have an article regrading this, You can take a look if you want
Carousel Image Slider In Bootstrap 3
I was having the same problem as above. Here's my solution. I changed a few lines of CSS:
.carousel {
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
min-width: 100%;
background-color: #fff;
}
.carousel-inner > .item > img {
min-width: 100%;
height: 100%;
}
I hope this helps.
define for every devices such as
#media (min-width: 360px) {
.carousel {
min-height: 140px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
min-height: 140px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 140px;
}
}
To use images on Bootstrap carousel of different sizes and to do the followings, all at the same time,
Image's width on carousael = 100%
Carousel image slide height = fixed
Maintain the image ratio
Remove the img tag & add a new class instead, say slide1
<div class="item slide1">
<div class="container">
<div class="carousel-caption">
<h1>Slide1 headline.</h1>
<p>Slide content.</p>
</div>
</div>
</div>
then add the following CSS code for slide1 class,
.slide1{
height: 500px; /* your desired height for this slide */
background: url(/img/your-img.jpg) no-repeat center center;
background-size: cover;
}
You may also configure this heights for different window sizes.
I had the same problem adding the class "img-responsive" in the image tags made images responsive
<div class="carousel-inner">
<div class="item active">
<img src="/imahes/my-image.jpg" alt="1" class="img-responsive" />
<div class="carousel-caption">
<h4 class="text-left">My caption</h4>
</div>
</div>
but the problem was with the slider height so I need to add a media query to resize the control div
#media (max-width: 800px) {
.carousel-control{
height:350px;
}
}
this media query is just an example, customize it to suit your needs, I hope that will help
I am working on getting a two column layout that extends to the bottom of my page.
However, my sidebar cuts off at the container-fluid height even though I am trying to get it to extend to the whole page.
What is weird is that my content column works fine.
HTML:
<div class="container-fluid">
<div class="row-fluid columns no-margin fill">
<div id="sidebar" class="span2 columns no-margin right-edge"></div>
<div id="contentWrapper" class="span10 columns no-margin pull-right"></div>
</div>
</div>
CSS:
html, body, form {
height: 100%;
min-height: 100%;
background-image:url("../../images/lightGreyBackground.png");
background-repeat: repeat;
font-family:"Segoe UI", Helvetica, Arial, Sans-Serif;
}
.container-fluid {
margin: 0 auto;
height: auto;
padding: 0px;
}
.columns {
height: 100%;
min-height:100%;
margin: 0px;
width: 100%;
}
.fill {
position: absolute;
height: 100%;
min-height: 100%;
}
.no-margin {
margin-left: 0%;
width: 100%;
}
.right-edge {
border-right: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#sidebar {
background-color: White;
padding-top:15px;
}
For have 2 column :
<html>
<head>
<style type="text/css">
.container-fluid { width: 100%;}
.float {
float: left;
width: 50%; /* Size colonne */
margin: 1em 0; /* Margin colonne */
}
.spacer { clear: both; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="float">Colonne 1</div>
<div class="float">Colonne 2</div>
<div class="spacer"></div>
</div>
</body>
</html>
Use the framework bootstrap or 960.gs, powerful front-end framework for faster and easier web development.
With bootstrap 3 :
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
</div>
</div>
I'm trying to center a Div that will have varying width's (based on content of a website).
I read about a relative positioning technique here:
http://www.tightcss.com/centering/center_variable_width.htm
But I thought there has to be an easier way to do it?
That's a pretty solid method that should work well in most browsers. It's not really that complex when you break it down. Here's a basic example:
<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>
<div id="hideoverflow">
<div id="outer">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo libero, commodo ut iaculis in, placerat vel purus.
</div>
</div>
</div>
#Talon; you can do it like this http://jsfiddle.net/sandeep/7PXQF/
CSS:
.container{
background-color:red;
text-align:center;
}
.center{
background-color:yellow;
display:inline-block;
text-align:left;}
HTML:
<div class="container">
<div class="center">
<p>This is a div with an much wider width, to make the yellow div go off the page to the right. We'll type a bit more to be sure.</p>
<p>Most people will see a horizontal scroll bar on the bottom, unless their screen is very wide.</p>
</div>
</div>
Well, it can't get any simpler than this and has full support on all browsers; doesn't even need a container:
.centered {
display:table;
margin:0 auto;
}
<div class="centered">
content
</div>
Here is a working fiddle: https://jsfiddle.net/1tnprnoz/
Now with flex-box you can easily achieve this with justify-content: center;.
#container{
background: gray;
display: flex;
justify-content: center;
}
<div id="container">
<div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
This is a centered div This is a centered div This is a centered div This is a centered div
</div>
</div>
This can also be achieved by applying margin: auto to the containers child selector #container>*.
#container{
background: #c7c7c7;
}
#container>*{
margin: auto;
}
<div id="container">
<div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
This is a centered div This is a centered div This is a centered div This is a centered div
</div>
</div>
Note: content div is styled inline as these styles are generated styles and are out of the scope of this question.