I've tried to use bootstrap template but it doesn't work correctly on Safari and iOS gadgets, my navbar is going outside to the window border. But it excellent works on another browsers.
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-8">
<div class="hd-lft">
<ul>
<li><i class="fa fa-phone"></i>(888) 010203-4567</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="hd-rgt">
example#mail.com
</div>
</div>
</div>
</div>
It looks like that:
How could I solve that issue?
All working, u have 1 extra div and check ur resolution
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="hd-lft">
<ul>
<li><i class="fa fa-phone"></i>(888) 010203-4567</li>
</ul>
</div>
</div>
<div class="col-xs-6">
<div class="hd-rgt">
example#mail.com
</div>
</div>
</div>
</div>
Related
img
please see this image, you can see there is a small logo on the left, I want to increase its size how to do that? The code is in the image and in text format here too. Please help me fix it.
<div class="topbar-wrapper">
<header class="header2">
<div class="top-wrappers">
<nav class="top-gridnav">
<div id="breakingnews"><span class="breakhead"><i class="fa fa-circle-o-notch fa-spin"></i> Trending</span>
<div id="adbreakingnews"><span>No result!</span></div></div>
<div class="top-navigation-right">
<div class="top-social-wrapper">
<div class="social-icon"><i class="fa fa-youtube-play"></i></div>
</div>
</div>
<div class="clear"></div>
</nav>
</div>
</header>
</div>
Use font-size property in style attribute or change it by css.
I have added as 20px.
Hope that Helps.
<div class="topbar-wrapper">
<header class="header2">
<div class="top-wrappers">
<nav class="top-gridnav">
<div id="breakingnews"><span class="breakhead"><i class="fa fa-circle-o-notch fa-spin"></i> Trending</span>
<div id="adbreakingnews"><span>No result!</span></div></div>
<div class="top-navigation-right">
<div class="top-social-wrapper">
<div class="social-icon"><i style="font-size:20px" class="fa fa-youtube-play"></i></div>
</div>
</div>
<div class="clear"></div>
</nav>
</div>
</header>
</div>
I'm using a template that uses and I used it to implement a multi-language select. Problem is: when i switch to mobile view the top-header disappears and only the navbar stays. Does anyone have an idea how i can keep the top-header? Template uses Bootstrap 3
<body>
<div class="box-layout">
<header class="header-style-1">
<div class="bg-header-top">
<div class="container">
<div class="row">
<div class="header-top">
<div class="row">
<div class="col-md-3">
<img src="../assets/images/index/logo.png" alt="logo" class="img-responsive" />
</div>
<div class="col-md-9">
<div class="header-top-right pull-right">
<ul class="header-contact">
<li>
<i class="flaticon-vibrating-phone"></i>
<div class="h-adress-content">
<h6>Telefon</h6>
<p>XXXXXXXXX</p>
</div>
<!-- .h-adress-content -->
</li>
<li>
<i class="flaticon-placeholder"></i>
<div class="h-adress-content">
<h6>Adresse</h6>
<p>XXXXXXXXXX</p>
</div>
<!-- .h-adress-content -->
</li>
<li>
<div class="h-adress-content">
<p><img src="../assets/images/index/de.png"> DE</p>
<p><img src="../assets/images/index/pl.png"> PL</p>
</div>
<!-- .h-adress-content -->
</li> `
I was attempting to float right a few items in a row
I want layout to look like this, even with reducing the browser size
Essentially this image layout is a bit different, but it shows a Create new User and Actions, so Action is like my "Manage bulk users"
I just want the items to align or float to the right, so that if the browser size is reduced it is not easily stacking on top of each other
<div class="container">
<div class="row">
<div class="col-md-4">
Choose your preferred criteria values and click Search
</div>
<div class="col-md-8 margin-top-bottom-8">
<div class="col-md-6 float-right">
<img src="assets/images/addIcon.svg" (click)="createNewUser()" />
<span (click)="createNewUser()">Create New User</span>
</div>
<div class="col-md-6 float-right">
<img src="assets/images/bulkUploadIcon.svg" (click)="openEditPopup(role)" />
<span (click)="openEditPopup(role)">Manage Bulk Users</span>
</div>
</div>
</div>
</div>
Here is a fiddle of my code pasted below
https://jsfiddle.net/03vxqed9/
you need to use pull-left and pull-right instead of float. See snippet bellow.
use a clearfix class to reset the floated elements.
Hope this will work for you!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 pull-left">
Choose your preferred criteria values and click Search
</div>
<div class="col-md-8 margin-top-bottom-8 pull-right">
<div class="col-md-6 pull-right">
<img src="assets/images/addIcon.svg" (click)="createNewUser()" />
<span (click)="createNewUser()">Create New User</span>
</div>
<div class="col-md-6 pull-right">
<img src="assets/images/bulkUploadIcon.svg" (click)="openEditPopup(role)" />
<span (click)="openEditPopup(role)">Manage Bulk Users</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
Try This:
HTML Code
<div class="container">
<div class="row top-bar">
<div class="col-md-6 panel-left">
Choose your preferred criteria values and click Search
</div>
<div class="col-md-6 panel-right">
<div class="col-md-8 pull-right">
<img class="iconx" src="assets/images/addIcon.svg" onClick="createNewUser()" />
<span onClick="createNewUser()">Create New User</span>
</div>
<div class="col-md-6 pull-right">
<img class="iconx" src="assets/images/bulkUploadIcon.svg" onClick="openEditPopup(role)" />
<span onClick="openEditPopup(role)">Manage Bulk Users</span>
</div>
</div>
</div>
</div>
STYLES
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.top-bar {
display:flex;width:100%;
}
.panel-right { display:flex;}
.iconx { clear:right;}
Use col-xs-6 that mean all sizes(from smallest to biggest)
and use pull-right/ pull-left instead float
float does NOT work with flex(row is flexable)
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-4 pull-left">
Choose your preferred criteria values and click Search
</div>
<div class="col-xs-8 margin-top-bottom-8 pull-right">
<div class="col-xs-6 pull-right">
<img src="assets/images/addIcon.svg" (click)="createNewUser()" />
<span (click)="createNewUser()">Create New User</span>
</div>
<div class="col-xs-6 pull-right">
<img src="assets/images/bulkUploadIcon.svg" (click)="openEditPopup(role)" />
<span (click)="openEditPopup(role)">Manage Bulk Users</span>
</div>
</div>
</div>
</div>
I hope this is what you want.
<div class="container">
<div class="row">
<div class="col-md-6 pull-left">
Choose your preferred criteria values and click Search
</div>
<div class="col-md-6 pull-right">
<div class="row">
<div class="col-md-6 pull-right">
<img src="assets/images/addIcon.svg" (click)="createNewUser()" />
<span (click)="createNewUser()">Create New User</span>
</div>
<div class="col-md-6 pull-right">
<img src="assets/images/bulkUploadIcon.svg" (click)="openEditPopup(role)" />
<span (click)="openEditPopup(role)">Manage Bulk Users</span>
</div>
</div>
</div>
</div>
</div>
Good day. Tell me please. Taught django, and took the template html, css, js. There is used bootstrap. Few adapted it for myself. He worked on a 17 '' monitor. Actually, when the 21 'monitor began to look, the blocks ran over each other. Besides, on 15'6, through the phone everything is in order. Tried to attribute in addition to col-sm as col-lg - the result did not. Tell me, please, how can I solve this problem.
It should be - https://i.stack.imgur.com/usEMI.png
How it happened - https://i.stack.imgur.com/UvUfX.png
Right-sidebar code:
<div class="col-md-9 col-lg-9">
<div class="col-md-12 col-lg-12 page-body">
<div class="row">
<div class="sub-title">
<h2>Some Notes</h2>
<i class="icon-envelope"></i>
</div>
<div class="col-md-12 col-lg-12 content-page">
<div class="col-md-12 col-lg-12 blog-post">
<div class="post-title">
<h1>джанго код</h1>
</div>
<div class="post-info">
<span>джанго код / by джанго код</span>
</div>
<p style="word-break: break-all"> джанго код</p>
<span>Read More</span>
</div>
<div class="col-md-12 col-lg-12 text-center">
Load
<div id="post-end-message"></div>
</div>
</div>
</div>
Left-sidebar code:
<div id="main">
<!-- about(left sidebar) -->
<div class ="col-md-3 col-lg-3">
<div class="about-fixed">
<div class="my-pic">
<img src="{% static 'images/pic/av-pic.png' %}" alt="av-pic">
</div>
<div class="my-detail">
<div class="white-spacing">
<h1></h1>
<span>Learning Web Development</span>
</div>
<ul class="social-icon">
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-vk"></i></li>
</ul>
</div>
P.S. Sorry for english.
I am trying to create a top header with HTML using div row. There should be one word on the left, and the other 3 words on the left; all within the row. However, result turns out to be all four words are on different rows stacked together. I can't find nothing wrong from my codes.
<div class="container-fluid">
<div class="row" style="background-color:orange; margin:-8px; margin-top:-20px">
<div class="col-md-1">
</div>
<div class="col-md-1">
<h3>stark</h3>
</div>
<div class="col-md-6">
</div>
<div class="col-md-1">
<h3>about</h3>
</div>
<div class="col-md-1">
<h3>portfolio</h3>
</div>
<div class="col-md-1">
<h3>contact</h3>
</div>
<div class="col-md-1">
</div>
The Bootstrap .row class is defining a left and right margin of -15px.
But you overwrite this with your margin: -8px; and that's why the columns don't fit anymore into the row.
Remove margin:-8px; margin-top:-20px and it will work.
I am assuming from the classes you are using, you are using Bootstrap. Ensure the bootstrap css and javascript files are referenced. Your html seems to work properly in this fiddle:
https://jsfiddle.net/e29aju5c/
<div class="container-fluid">
<div class="row" style="background-color:orange; margin:-8px; margin-top:-20px">
<div class="col-md-1">
</div>
<div class="col-md-1">
<h3>stark</h3>
</div>
<div class="col-md-6">
</div>
<div class="col-md-1">
<h3>about</h3>
</div>
<div class="col-md-1">
<h3>portfolio</h3>
</div>
<div class="col-md-1">
<h3>contact</h3>
</div>
<div class="col-md-1">
</div>
You should have the following code (or the equivalent code pointing to your bootstrap files) somewhere on the page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">