I am making a custom template in which i have two divs and both have title .
I wanted to detect if there is less then 15px left between two divs then break the content into another line for both divs . Is this possible ? I have made a fiddle with css and html
#content .title
{
display:inline-block;
float:left;
text-align:left;
}
#content .sub-title {
display:inline-block;
float:right;
text-align:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content" class="full">
<div class="full">
<div class="title">
<h2>Roberts Roberts & Patrirty Smith</h2>
</div>
<div class="sub-title"><h2>THE EXAMPLE ON THE FLY</h2></div>
</div>
</div>
If you know the size of the elements you can do this with CSS media queries:
*
{
padding: 0;
margin: 0;
}
#content .title
{
display:inline-block;
float:left;
text-align:left;
border: solid 1px;
margin-right: 15px;
width: 400px;
}
#content .sub-title
{
display:inline-block;
float:right;
text-align:right;
border: solid 1px;
width: 400px;
}
#media (max-width: 815px)
{
#content .sub-title
{
float: left;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content" class="full">
<div class="full">
<div class="title">
<h2>Roberts Roberts & Patrirty Smith</h2>
</div>
<div class="sub-title"><h2>THE EXAMPLE ON THE FLY</h2></div>
</div>
</div>
Try using a little Bootstrap with your custom CSS.
Have a look at this Fiddle, I have two options for you to test.
In the Result Fiddle window, try resizing the frame on the left side to see how it works.
When using the Bootstrap cdn link please make sure you place the link above your custom CSS, so that your css has priority.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" > <div class="container col-xs-12 block">
<div class="block-first bg-info col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-9 col-xs-offset-1">
Roberts Roberts & Patrirty Smith
</div>
<div class="block-second bg-success col-lg-4 col-lg-push-1 col-md-4 col-md-offset-1 col-md-push-1 col-sm-4 col-sm-offset-1 col-sm-push-1 col-xs-9 col-xs-offset-1 col-xs-push-0">
THE EXAMPLE ON THE FLY
</div>
</div>
<div class="container col-xs-12 bg-primary space-around"><br></div>
<div class="container col-xs-12 block">
<div class="block-first2 bg-primary col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-9 col-xs-offset-1">
Roberts Roberts & Patrirty Smith
</div>
<div class="block-second bg-danger col-lg-4 col-md-4 col-sm-4 col-xs-9 col-xs-offset-1">
THE EXAMPLE ON THE FLY
</div>
</div>
Related
I have posted the same question two days earlier but didn't get any
answer so I'm posting again this question. May be I get lucky this time.
My slider buttons are working fine with static data, but they don't
work with the dynamic data. And unable to show the next or previous
slide.
My HTML Code
<section class="browse-cat u-line section-padding">
<div class="container">
<div class="row">
<div class="col-12">
<div class="swiper-wrapper">
<div class="swiper-slide myreward-slider-item col-md-4" *ngFor="let reward of readableRewards; let i = index">
<a href="javascript:void(0);">
<div class="myreward-slider-img">
<img
src="{{reward?.Image}}"
class=""
alt="rewards">
</div>
</a>
<div class="row">
<div class="col-md-6 text-left padding-20">
<span class="text-light-black cat-name"><b>{{reward?.Title}}</b></span>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</section>
My CCS Code
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 14px;
font-weight: 900;
color: #ff0018;
background: #ff0018;
}
.swiper-button-next {
right: 10px;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-disabled {
display: none;
}
I know this has been asked many times but I've tried pretty much anything I've read so far.
I want to align both horizontally and vertically an img inside a div.
The container div is inside a modal showing the picture, once clicked its preview. Then it will contain pictures with any size.
I can align horizontally OR vertically but not both.
HTML code: https://pastebin.com/7dCQ1aJg
<div id="mypicmodal" class="col-lg-12 col-md-12 col-sm-12 content">
<div class="row content">
<div class="col-lg-1 col-md-1"></div>
<div class="col-lg-10 col-md-10 col-sm-12 content">
<div class="row content">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="col-lg-12 col-md-12 col-sm-12 modal-content">
<div class="row content">
<div id="modalpiccontainer" class="col-lg-8 col-md-8 col-sm-12 content" style="background-color:black">
<div class="row content">
<!-- pic here -->
<img id="pic" src="">
</div>
</div>
<div id="modalpicdata" class="col-lg-4 col-md-4 col-sm-12 content">
<div class="row content">
<div id="modaluserdata" class="col-lg-12">
<div class="row content">
<div id="modaluserpic" class="col-lg-3 col-md-3 col-sm-3 content" style="background-color:yellow">
</div>
<div id="modaluserpicinfo" class="col-lg-9 col-md-3 col-sm-3 content" style="backround-color:green">
</div>
</div>
</div>
<div id="modalsocial" class="col-lg-12">
<div class="row content">
</div>
</div>
<div id="modalcomments" class="col-lg-12">
<div class="row content">
</div>
</div>
<div id="modaltypecomment" class="col-lg-12">
<div class="row content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Modal example (with img not aligned vertically): https://ibb.co/j4nJ1Q
(.content only contains "height: inherit" and the modal is 550px)
Thank you!
Easy with Flexbox :
div.container{
width: 500px;
height: 400px;
border: red dashed 2px;
display: flex;
justify-content: center;
align-items : center;
}
<div class="container">
<img src="http://lorempixel.com/300/200/"/>
</div>
what is the best way to make in bootstrap a hide/show element like in the picture??
I started with something like this:
<div class="container-fluid no-padding-left">
<div class="row">
<div class="col-md-4 no-padding-left">
<div class="row">
<div class="col-md-12 background-azul-claro">
<div class="col-md-2 text-left">
<img src="assets/images/ic_close_white_36dp_1x.png" alt="">
</div>
<div class="col-md-8 text-center" style="">
<h3>Nueva incidencia</h3> </div>
<div class="col-md-2 text-right">
<img src="assets/images/ic_done_white_36dp_1x.png" alt="">
</div>
</div>
</div>
<div class="col-md-12 no-padding-left"> <img src="assets/images/default-image.jpg" alt="" class="img-responsive"> </div>
<div class="col-md-12 no-padding-left background-azul-oscuro"> <img src="" alt=""> </div>
<!-- form div with form field -->
<!-- checkbox Mostrar otras incidencias -->
</div>
</div>
</div>
styles.css
.background-azul-oscuro {
background-color: #009688;
}
.background-azul-claro {
background-color: #00BFA5;
}
.no-padding-left {
padding-left: 0px;
}
h3 {
color: white;
}
It´s nested columns the best way to do it ???
Im using angular in the front end, should i use normal bootstrap or angular ui bootstrap???
I would like totally responsible element with the hide and show functionality..
Since you would have to use custom width, margin and padding for the default bootstrap col's, there isn't much sense in using them.
You could have something like this in my opinion:
<div class="container">
<div class="background-azul-claro">
// position:relative;
width: calc(100% - 40px);
margin-right: 40px;
float: left;
</div
<div class=" background-azul-oscuro">
// position: relative;
width: 40px;
float: right;
</div>
</div>
*In case you would want one div to hover above the other, you should use position: absolute;
I need some help with a complex CSS layout problem. If it can be done with just CSS and not javascript that would be ideal.
I need a grid of products with varying heights
There is also a "featured product" that is 2x the height of one of the regular products
The layout on different viewports needs to match the images below
What I have tried so far:
Here is an example of the code I have now:
<div class="container">
<div class="row">
<div class="l-product large col-xs-6 col-sm-6 col5-md-2 ">
1
<br>This div should be double the height of one tile without fixing the height with CSS
</div>
<div class="l-product taller col-xs-6 col-sm-3 col5-md-1">
2
<br><span>If one div is taller the whole grid breaks</span>
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
3
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
4
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
5
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
6
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
7
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
8
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
9
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
10
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
11
</div>
</div>
http://codepen.io/anon/pen/pJBbPN
I am using bootstrap so I tried nesting the rows like this Nested rows with bootstrap grid system? My problem is I could not figure out how to make items move from one row to another in different viewports and it caused the grid to break
Desktop:
Tablet:
Small Tablet:
Mobile:
I'm not sure you can do that with basic bootstrap. I'd recommend using a more advanced technique like Masonry. When you go to the example link, change the browser width. It also adds some nice animation effects.
// external js: masonry.pkgd.js
$(document).ready(function() {
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 130
});
});
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: #EEE;
}
/* clearfix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- grid-item ---- */
.grid-item {
width: 120px;
height: 120px;
float: left;
background: #D26;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 5px;
margin: 5px;
}
.grid-item--width2 { width: 250px; }
.grid-item--height2 { height: 250px; }
<h1>Masonry - columnWidth</h1>
<div class="grid">
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
if you are using columns u need to divide the columns by 12. so we want to have an even amount, 5 does not break down to 12 columns.
Try below to see results. i have added 6 boxes to smaller boxes.
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="big-box">image</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4"><div class="mini-box">1</div></div>
<div class="col-xs-4"><div class="mini-box">2</div></div>
<div class="col-xs-4"><div class="mini-box">3</div></div>
</div>
<div class="row">
<div class="col-xs-4"><div class="mini-box">1</div></div>
<div class="col-xs-4"><div class="mini-box">2</div></div>
<div class="col-xs-4"><div class="mini-box">3</div></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2"><div class="mini-box">1</div></div>
<div class="col-xs-2"><div class="mini-box">2</div></div>
<div class="col-xs-2"><div class="mini-box">3</div></div>
<div class="col-xs-2"><div class="mini-box">4</div></div>
<div class="col-xs-2"><div class="mini-box">5</div></div>
<div class="col-xs-2"><div class="mini-box">6</div></div>
</div>
<div class="row">
<div class="col-xs-2"><div class="mini-box">1</div></div>
<div class="col-xs-2"><div class="mini-box">2</div></div>
<div class="col-xs-2"><div class="mini-box">3</div></div>
<div class="col-xs-2"><div class="mini-box">4</div></div>
<div class="col-xs-2"><div class="mini-box">5</div></div>
<div class="col-xs-2"><div class="mini-box">6</div></div>
</div>
</div>
Here is a jsfiddle
Or you can use the grid system with jQuery
i have a problem to center the content in a "row", the buttons in the example are always on the left side and i have too much space on the right side.
Is there a way to center this buttons?
thx
tomas
<div class="abc">
<div class="row red show-grid">
<div class="span2 btn">a</div>
<div class="span2 btn">b</div>
<div class="span2 btn">c</div>
<div class="span2 btn">d</div>
<div class="span2 btn">e</div>
</div>
The class span2 has property float:left:
<div class="block">
<div class="row show-grid">
<div class="span2 btn">a</div>
<div class="span2 btn">b</div>
<div class="span2 btn">c</div>
<div class="span2 btn">d</div>
<div class="span2 btn">e</div>
</div>
</div>
CSS:
.block {
max-width: 500px;
}
.block > div {
text-align:center;
}
.block > div > div {
float:none;
}
I would consider not using span2 (layout and grid class) with btn (button style class) together.
http://jsfiddle.net/sTwj7/10/
HTML
<div class="abc">
<div class="row red show-grid">
<div class="btn">a</div>
<div class="btn">b</div>
<div class="btn">c</div>
<div class="btn">d</div>
<div class="btn">e</div>
</div>
</div>
CSS
.red {
background-color: red;
}
.abc {
max-width: 500px;
}
.red .btn {
width: 160px;
margin: 0 auto;
display: block;
}
Updated 2018
Bootstrap 4
Use the auto-layout columns and text-center
<div class="row text-center">
<div class="col-sm border">a</div>
<div class="col-sm border">b</div>
<div class="col-sm border">c</div>
<div class="col-sm border">d</div>
<div class="col-sm border">e</div>
</div>
https://www.codeply.com/go/2fDFPSB5A4
Bootstrap 3
Use column offset and text-center
<div class="row red show-grid text-center">
<div class="col-md-2 col-md-offset-1 btn btn-default">a</div>
<div class="col-md-2 btn btn-default">b</div>
<div class="col-md-2 btn btn-default">c</div>
<div class="col-md-2 btn btn-default">d</div>
<div class="col-md-2 btn btn-default">e</div>
</div>
https://www.bootply.com/zEYom4EJUF
Bootstrap 2 (original answer)
You could add CSS to center your spans like this:
http://jsfiddle.net/sTwj7/9/
<div class="span2 pull-center">
<h1>a</h1>
</div>
CSS class:
.pull-center {text-align:center;margin:0 auto !important;float:none !important;}