I have a question. I have a bootstrap (3) grid with 2 columns. insight the right column I am using 'center-block' to position elements in the center. For some reason it doesnt do nothing. What am I doing wrong? Thanks!!
https://jsfiddle.net/codingcodingcoding/mbw45xdh/1/
<section id="contact">
<div class="container-fluid">
<h2 class="section-heading text-center">Let's Get In Touch!</h2>
<div class="row">
<div class="col-md-6">
<div id="googleMap"></div>
</div>
<div class="col-md-6">
<div class="center-block">
<span class="glyphicon glyphicon-earphone phone-icon"></span>
<span class="glyphicon glyphicon-envelope email-icon"></span>
<p>
feedback#example.com
</p>
</div>
</div>
</div>
</div>
</section>
You have to use your text-center class in div element
like:
<section id="contact">
<div class="container-fluid">
<div class="text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
</div>
<div class="row">
<div class="col-md-6">
<div id="googleMap"></div>
</div>
<div class="col-md-6">
<div class="center-block">
<span class="glyphicon glyphicon-earphone phone-icon"></span>
<span class="glyphicon glyphicon-envelope email-icon">
</span>
<p>
<a href="mailto:your-email#your-
domain.com">feedback#example.com</a>
</p>
</div>
</div>
</div>
</div>
</section>
Related
so basically im doing this in angular and using bootstrap
I want the name and description on the left and img on the right but it isn't working , pls help
code link is below
here
<div class="row">
<div class="col-xs-12">
<button class='btn btn-success'>New bug</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix"
style="background:grey ; color:red;"
*ngFor="let bug of bugs">
<div class="pull-left">
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span> </div>
<div class="pull-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg"
alt="{{bug.name}}"
class="img-responsive"
style="max-height: 100px;">
</div>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
I'm guessing you want the text to wrap around the image. If that is the case then only put the float class on the image, and reorder the image to above the text.
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New bug</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix" style="background: grey; color: red" *ngFor="let bug of bugs">
<div class="float-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
</div>
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
</div>
If you want the text and image to be in 2 columns I would suggest using flexbox
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New bug</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item d-flex justify-content-between" style="background: grey; color: red" *ngFor="let bug of bugs">
<div>
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span>
</div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
</div>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
</div>
I have this template that is working fine.
But when I want to separate the single-course (or product) in a component, row-class not working fine and items are under each other...
This is my code:
<div class="col-lg-9">
<div class="row">
<app-single-course></app-single-course>
<app-single-course></app-single-course>
</div>
</div>
Update
this is the code without single component and its working fine if I copy it they appear side by side.
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-course-inner style-two">
<div class="thumb">
<img src="assets/img/course/2.png" alt="img">
<div class="rating">4.9/5 <i class="fa fa-star"></i></div>
<i class="fa fa-bookmark-o"></i>
</div>
<div class="details">
<div class="meta">
<div class="row">
<div class="col-6">
<p>5,957 students</p>
</div>
<div class="col-6 text-right">
<p>01h 49m</p>
</div>
</div>
</div>
<h5>Motion Graphics: Create a Nice Typography Animation</h5>
<div class="price-inner">
<div class="row">
<div class="col-6">
<p>$33.99</p>
</div>
<div class="col-6 text-right">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you might talk about the bootstrap grid system.
Well first of all the col class comes inside the row class or else you'll always have item "under each other".
Here is the documentation with examples : https://getbootstrap.com/docs/4.5/layout/grid/
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 must be missing something really simple here:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader center-block"></div>
</div>
</div>
I've used the bootstrap classes, including center-block. Yet it always looks like this:
Why isn't the spinner icon in the centre of the page?
There is a work around to your problem by changing some HTML as follows
<div class="row">
<div class="col-lg-12 text-center" ng-show="users.busy">
<span class="spinner-loader">Loading</span>
</div>
</div>
instead of <div> for spinner I took a <span> which will be centered horizontally because of text-center class to parent <div>.
You can try this:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<center>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader"></div>
</div>
</div>
</center>
Instead of using center-block, add text-center class
I ve been using the bootstrap col-md-offset css to center my divs. For example:
<div class=container>
<div class=row>
<div class=form-horizontal>
<div class="col-md-offset-4 col-md-4">
<div class="your div">
</div>
</div>
</div>
</div>
Your div will be responsive, thus as you resize the window the div will remain in the center of the window.
I'm using Bootstrap 2.3.2 for a website which contains an accordion element with one row within it. Accordion is span6 and I expected that the row will be able to contain two span3 elements but it can't. Here is my code simplified:
<div class="span6">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<p><h3>Some text here</h3></p>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="row">
<br />
<div class="span3 offer">
<div class="offer-wrap">
This one should be on the left
</div>
</div>
<div class="span3 offer">
<div class="offer-wrap">
This one should be on the right, but is BELOW
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I was able to make them appear next to each other, but only with some nasty CSS fiddling, which only works on my screen size.
Expected behaviour: http://imgur.com/O1z4mZN
Actual result: http://imgur.com/fP568Tl
If I put that row outside of accordion element everything looks perfect.
This has to do with the margins of both the accordion and the .span classes.
My tip: never use the .row class, always use the .row-fluid class. With .row-fluid, you can always split up the available width into 12 columns.
<div class="span6">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<p><h3>Some text here</h3></p>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<br />
<div class="row-fluid">
<div class="span6 offer">
<div class="offer-wrap">
This one should be on the left
</div>
</div>
<div class="span6 offer">
<div class="offer-wrap">
This one should be on the right, but is BELOW
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>