I am new to bootstrap and now making a website with it.
I want to align small images in one row for my mobile view. The code is used for it is below
<div class="mobile">
<div class="container">
<div class="row">
<div class="col-sm-1 col-xs-1">
<img src="assets/img/icon/birthday.png" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p>
</div>
<div class="col-sm-1 col-xs-1">
<img src="assets/img/icon/birthday.png" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p>
</div>
</div>
</div>
</div>
with this, the result is below
Not in one row
All I want is that it appear side to side and not stacked. Please help me
Thanks in advance
col-sm-1 is too small and the width doesn't fit the content that the reason it broke line.
so set col-sm->1
Also in bootstrap 4 there is no xs size. so remove it
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="mobile">
<div class="container">
<div class="row">
<div class="col-sm-2">
<img src="https://i.stack.imgur.com/3mG2d.jpg" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p>
</div>
<div class="col-sm-2">
<img src="https://i.stack.imgur.com/3mG2d.jpg" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p>
</div>
</div>
</div>
</div>
Related
im trying to split row (col-md-12 = full width of row) for 3 parts - col-md-8 + col-md-2 + col-md-2, but bootstrap class col doesn't work as it shoud and im getting 3x columns sticked 2 each other :(
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Body -->
<body style="background-color:gray; margin: 0">
<div class="container-fluid" style="height: 5%; background-color: green;">
<div>
<div class="row form-inline">
<div class="col-md-8" style="display: inline-block">something</div>
<div class="col-md-2" style="display: inline-block">something2</div>
<div class="col-md-2" style="display: inline-block">something3</div>
</div>
</div>
</div>
</body>
What I'm getting:
What I want to get:
PS:
I know that i can use style width 70% + 15% + 15% but i think it s not the point of using bootstrap :/
Assuming based on your screenshot, it looks like your device width is less than 768px. If that is, therefore it works as expected in your screenshot since you're using col-md - Read more about bootstrap's responsive breakpoints here
If you do not want to make it responsive, then you should just use col-{n}. Read more about Bootstrap 4 grid options
E.g.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<h5> Current approach </h5>
<div class="container-fluid" style="height: 5%; background-color: #cfcfcf;">
<div>
<div class="row form-inline">
<div class="col-md-8" style="display: inline-block">col-md-8</div>
<div class="col-md-2" style="display: inline-block">col-md-2</div>
<div class="col-md-2" style="display: inline-block">col-md-2</div>
</div>
</div>
</div>
<br />
<br />
<h5> Expected approach </h5>
<div class="container-fluid" style="height: 5%; background-color: #a0a0a0;">
<div>
<div class="row form-inline">
<div class="col-8" style="display: inline-block">col-8</div>
<div class="col-2" style="display: inline-block">col-2</div>
<div class="col-2" style="display: inline-block">col-2</div>
</div>
</div>
</div>
I am using bootstrap and I am trying to create the following layout:
I tried
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-2 text-left">
<div class="card card-primary">
<div class="card-body p-2">
<img class="tv-symbol-icon tv-symbol-icon--size-auto" src="https://s3-symbol-logo.tradingview.com/apple--big.svg" alt="Apple Inc icon">
<div>APPLE INC (AAPL)</div>
<div>NASDAQ</div>
<div><img class="tv-flag-country tv-flag-country--us tv-flag-country--size_sub_title" src="https://www.tradingview.com/static/images/svg/common/flags/flag-square-us.svg" alt="US Flag"></div>
</div>
</div>
</div>
I tried flexboxes, however my layout does not arrange.
How to arrange the text next to the image?
Any suggestions what I am doing wrong?
You were 95% the way there. I have finished it off for you.
Really all you were missing was some nested bootstrap to make a col-10 that contains the company details sitting alongside the logo.
.name {
font-size: 2rem;
}
.tv-symbol-icon {
border-radius: 50%;
width: 100%;
}
.tv-flag-country {
margin: 0 0.5em;
border-radius: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-2 text-left">
<div class="card card-primary">
<div class="card-body p-2">
<div class="row">
<div class="col-sm-2">
<img class="tv-symbol-icon tv-symbol-icon--size-auto" src="https://s3-symbol-logo.tradingview.com/apple--big.svg" alt="Apple Inc icon">
</div>
<div class="col-sm-10">
<div class="row">
<div class="name">APPLE INC</div>
</div>
<div class="row">
<div>NASDAQ</div>
<div><img class="tv-flag-country tv-flag-country--us tv-flag-country--size_sub_title" src="https://www.tradingview.com/static/images/svg/common/flags/flag-square-us.svg" alt="US Flag"></div>
<div>(AAPL)</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm coding a page that uses nested bootstrap columns. I am using push/pull to have the columns switch places on mobile, and it's working great. However, on desktop I've got some odd spacing issues. The nested columns are offset to the right of the parent column.
I've set up a fiddle that shows this behavior. In this example, col-md-9 is the parent div. I've given it a gold background to show the behavior. When you resize the output, the nested divs flow into place as expected. Any insight to this issue would be greatly appreciated.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-12 col-md-8 col-md-push-8" id="lgXbtvA">
<script src="http://cdnapi.kaltura.com/p/1982211/sp/198221100/embedIframeJs/uiconf_id/40685101/partner_id/1982211"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="kaltura_player_1507831819" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text</p>
</div>
<!--Videos Small -->
<div class="col-xs-12 col-md-4 col-md-pull-4 e" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="" />
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="" />
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
Edit: The columns appear in the proper order on the desktop view, they are just offset for reasons I can't explain.
When you used pull and push class in bootstrap used alternate column for that So that you need to used:
col-xs-8 col-md-8 col-md-push-4 instead of col-xs-12 col-md-8 col-md-push-8
and
col-xs-4 col-md-4 col-md-pull-8 instead of col-xs-12 col-md-4 col-md-pull-4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-8 col-md-8 col-md-push-4" id="lgXbtvA">
<script src="http://"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text text </p>
</div>
<!--Videos Small -->
<div class="col-xs-4 col-md-4 col-md-pull-8" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="">
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="">
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
Update Demo Link
Your large video should be
class="col-xs-12 col-md-8 col-md-push-4"
and your small video should be
class="col-xs-12 col-md-4 col-md-pull-8"
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-12 col-md-8 col-md-push-4" id="lgXbtvA">
<script src="http://"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text text </p>
</div>
<!--Videos Small -->
<div class="col-xs-12 col-md-4 col-md-pull-8" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="">
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="">
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
I want to know the proper way to put an image in the center of the page, and then beside the image vertical align 2 lines of text. should I put the image and text in one bootstrap coloumn or should i have the image in one coloumn and the text in a seperate coloumn. I know there are a few ways to do this, i just want to know the proper method.
<div class="row">
<div class="col-xs-9">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-xs-3">
<span style="font-size:48px;">Test</span>
<span style="font-size:24px;">Test second line. </span>
</div>
</div>
https://jsfiddle.net/k90s5fec/
This is the right way to do this
div{
display: inline-block;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-8">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-xs-4">
<p style="font-size:48px;">Test</p>
<p style="font-size:24px;">Test second line. </p>
</div>
</div>
This is the fiddle
NOTE : Use https:// when importing external resources,
use p tag instead of span if you want to use block texts.
use this
<div class="row">
<div class="col-xs-9">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" class="displa`enter code here`yed" />
</div>
<div class="col-xs-3">
<span style="font-size:48px;">Test</span>
<span style="vertical-align:middle; line-height: 30px;">Test second line. </span>
</div>
</div>
img.displayed
{
display: block;
margin-left: auto;
margin-right: auto
}
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-8">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div style="font-size:48px;">Test</div>
<div style="font-size:24px;">Test second line. </div>
</div>
</div>
I am using Skeleton Framework, and the layout I made using the grid system is like this:
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="three columns">
<br>
</div>
<div class="six columns" style="margin-top: 25px">
<img src="img/okay.jpg" width="50px" style="display:inline"/>
<p id="title" style="display:inline">{{title}}</p>
<p id="excerpt" style="display:inline">{{description}}</p>
<div id="describe me" style="display:inline"><span style="display:inline">{{name}}</span><span style="display:inline">{{date}}</span></div>
</div>
<div class="three columns">
<br>
</div>
</div>
</div>
It shows something like this:
But what I want is something like this:
How can this be achieved?
Result:
Responding to your code, although there are many alternate solutions for this, maybe even in their documentation.
First, try to avoid using inline styles.
Wrap your content inside a
class.
Vetical align the image to the top.
Remove the default margin
on the paragraph items.
.desc {
display: inline-block;
}
.desc p {
margin-bottom: 0;
}
.six img {
vertical-align: top;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="three columns">
<br>
</div>
<div class="six columns">
<img src="http://placehold.it/50x75" width="50px" />
<div class="desc">
<p id="title">{{title}}</p>
<p id="excerpt">{{description}}</p>
<div id="describe me"><span>{{name}}</span><span>{{date}}</span>
</div>
</div>
</div>
<div class="three columns">
<br>
</div>
</div>
</div>