I need to align 3 element with bootstrap. I use angular 8 so in install bootstrap, i need only css (I need only the col-md, col etc) so I do:
"styles": [
"src/styles.sass",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
in my style.sass i do :
#import "~bootstrap/dist/css/bootstrap.css";
so in my header component i do this:
<div id="test" class="container">
<div class="row">
<div class="col-12">
<div class="col-3">
<img id="iconn" src="assets/img/iconf.png" />
</div>
<div class="col-5">
<h1 id="home">HOME</h1>
</div>
<div class="col-3 offset-2">
<img id="log" src="assets/img/logo_f.png" class="img-responsive" />
</div>
</div>
</div>
</div>
The problem is the two images and the text are in the different rows but i want their in the same row.
Anyone can help?
you have added extra col-12 in your code. offset should be 1
<div class="row">
<div class="col-3">
<img id="iconn" src="assets/img/iconf.png" />
</div>
<div class="col-5">
<h1 id="home">HOME</h1>
</div>
<div class="col-3 offset-1">
<img id="log" src="assets/img/logo_f.png" class="img-responsive" />
</div>
</div>
Related
How to create a grid of images using bootstrap?
Thats what i got when i try the next codes
<div class="row">
<div class="col">
<div class="thumbnail">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg">
</div>
</div>
</div>
Im still in the very first steps learning phase started with HTML CSS and bootstrap as it give us achievements to feel the process.
im expecting to get thumbnail of grids as the following image
try it like this...
<div class="row">
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
Then when adding extra pics, put them in columns too.
<div class="row">
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
It may then work even better if you add widths to those columns using col-* where * is any number between 1 and 12.
<div class="row">
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
I am trying to learn Bulma and I want to show a simple page with this layout:
<header>
<hero>
<section>
<footer>
I don't understand why they overlap with each other instead of being clearly one below the other.
There is a dummy container that is obviously misplaced and hidden by the header.
The overlapping is also obvious by the search bar that is both over part of the footer and the hero.
https://codepen.io/anon/pen/bLgOWb
<nav class="navbar is-primary is-fixed-top has-text-white">
<div class="container">
<div class="navbar-brand">
<img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div id="navItem" class="navbar-item">Primo</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container dummy">
</div>
</section>
<div class="hero ">
<div class="container has-text-centered is-size-1">
<h1 class="title"> Explore and use libraries and software</h1>
</div>
</div>
<div id="search" class="container">
<div class="columns searchBlock ">
<div class="column is-paddingless">
<form>
<input class="input searchInput" type="text" placeholder="Search">
</form>
</div>
<div class='column is-3 is-paddingless'>
</div>
<div class='column is-2 is-paddingless'>
<a class='button is-primary searchButton'>Search</a>
</div>
</div>
</div>
<footer class="footer">
<div class="container is-text-centered">
<p> Footer </p>
</div>
</footer>
<script src="old.js"></script>
.hero-body is missing
<div class="hero">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title"> Explore and use libraries and software </h1>
</div>
</div>
</div>
Bulma - Hero
I think problem with column . change column margin follow this
.columns {
marign:0;
}
I'm working on a template and my code looks something like this. It looks how I want to looks, but I don't know if it's ok technical talking.. Need some tips:
<div class="row">
<div class="col-xs-5 padding-box-product-image margin-image-product">
<div class="pic-box-product">
<img class="img-upload img-responsive" src="srcimg.png" />
</div>
</div>
<div class="col-xs-7 width-content-product">
<div class="col-xs-12 no-padding-left">
<h2 class="col-xs-7 no-margin no-padding line-height-product title-product">Ttesta</h2>
<p class="col-xs-5 no-margin dots-product-page line-height-product ">● ● ●</p>
<p class="col-xs-12 no-margin no-padding line-height-product subtitle-product">Xytzadwa </p>
<p class="col-xs-12 no-margin no-padding line-height-product date-product">My test</p>
<div class="col-xs-12 decoration decoration-margins-product-first"></div>
<img class="col-xs-4 img-responsive" src="/images/icon.png" />
</div>
</div>
</div>
It looks ok, except all of the no-padding will elimnate the normal Bootstrap gutter (space between columns). Also, the nested columns should be wrapped in another row. From the Bootstrap docs
Content should be placed within columns, and only columns may be
immediate children of rows.
The last img shouldn't have col-xs-4. Place it inside a column instead. In general the grid col-* is for block elements like the DIV html tag. It shouldn't be for other elements that have other styles (h2, p, etc..)
<div class="row">
<div class="col-xs-5 padding-box-product-image margin-image-product">
<div class="pic-box-product">
<img class="img-upload img-responsive" src="//placehold.it/900x500">
</div>
</div>
<div class="col-xs-7 width-content-product">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-7"><h2 class="line-height-product title-product">Ttesta</h2></div>
<div class="col-xs-5"><p class="dots-product-page line-height-product ">● ● ●</p></div>
<div class="col-xs-12"><p class="line-height-product subtitle-product">Xytzadwa </p></div>
<div class="col-xs-12"><p class="line-height-product date-product">My test</p></div>
<div class="col-xs-12 decoration decoration-margins-product-first"></div>
<div class="col-xs-4"><img class="img-responsive" src="//placehold.it/70"></div>
</div>
</div>
</div>
</div>
</div>
http://www.codeply.com/go/hOXVBXdb5B
I am new to bootstrap.I want to place an image tag and two elements inside a div so that image tag and elements should be in side by side.
code:
<div class="container">
<div class="row">
<div class="col-xs-2">
<img class="img-responsive" src="../Content/Images/App/image1.png" style="height:50px; float:left" />
<p>Employee ID</p>
<p>EmployeeName</p>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
</div>
</div>
Expected Output:
I want Image and employee details parallely.(Employee id and Employee Name one below the other)
can anyone help?
Thanks in advance!
Hope this helps:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="../Content/Images/App/image1.png" style="height:50px;"/>
</div>
<div class="col-xs-4">
<p>Employee ID</p>
</div>
<div class="col-xs-4">
<p>EmployeeName</p>
</div>
</div>
What would be the best / correct method to replicate the following using bootstrap. There are four colum, each of which is 25% wide, and I would like to add an image inbetween. The columns remain 25% all the way from mobile to desktop.
Simple
<div class="row">
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
</div>
</div>
</div>
PS: You may use text or content for + sign ... its upto you !! I prefer text/content because it will render faster then image.
This seems to do the job, though it's a bit convoluted. The 15-column layout is tricky.
.row.shift-left {
margin-left: -20px;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row shift-left">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-9">Words words words.</div>
<div class="col-xs-3">
<img src="http://placehold.it/300x800" class="img-responsive" />
</div>
</div>
</div>
...
Demo