I have the following bootstrap jumbotron, but its not working as desired.
div class="jumbotron" style="color:#ffffff">
<div>
<div style="display:inline-block;">
<img src="~/Content/Images/3.png" height="10%" width="10%" />
</div>
<div style="display:inline-block;">
<h1 class="display-3">Welcome to My Site!</h1>
</div>
</div>
<div>
<p class="lead">
● brag about something good
</br>
● brag about another good thing
</br>
● make same vague promise
</p>
</div>
<hr class="my-4">
<p>
insert some fake aspirations and use the phrase 'we strive to'
</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Visit</a>
</p>
</div>
I want it to look like this-ish
Help, please.
Here is an example which may help you:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="jumbotron bg-dark text-white">
<div class="media">
<img class="mr-3" src="http://rs882.pbsrc.com/albums/ac23/Silllyghostfreak/My%20Fakegees/Seelzplz.png~c200" height=64>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p class="lead mb-0">● brag about something good</p>
<p class="lead mb-0">● brag about another good thing</p>
<p class="lead mb-0">● make same vague promise</p>
</div>
</div>
</div>
Related
Trying to select the first img. I have tried using .flex-projext > img:first-child but it will not work
<section id="work">
<h2 class="projects">These are some of my projects</h2>
<div class="grid-class">
<div class="flex-project first">
<img src="picsforportfolio1/landing.jpg">
<p class="project">Landing Page</p>
</div>
<div class="flex-project">
<img src="picsforportfolio1/survey.jpg">
<p class="project">Survey Form</p>
</div>
<div class="flex-project">
<img src="picsforportfolio1/tribute.jpg">
<p class="project">Tribute page</p>
</div>
<div class="flex-project">
<img src="picsforportfolio1/tingdog.jpg"> `enter code here`
<p class="project">TingDog</p>
</div>
</div>
</section>
This worked with me:
.flex-project:first-child img
Here is the output:
And here is the output with object-fit applied to first child only:
With the reference to the subject, I cannot put each object which should be bracketed by the i tag. I would like to align it side by side. However I used a li tag and float:left and right on CSS, it was not changed. Does anyone know how to change the position?
<section id="mypassion-section" class="bg-light text-muted py-5">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="img/logo.png" width="100px" height="100px" alt="" class="img-fluid mb-3 rounded-circle">
<h3>生徒さんの成長</h3>
<p>OOOOO様 <br>受講前</p>
<i class="fa fa-play icon-left" aria-hidden="true"></i>
<p>受講後</p>
<i class="fa fa-play icon-right" aria-hidden="true"></i>
</div>
I used bootstrap classes to align items without changing much in DOM. Please check on the link to get more knowledge on Bootstrap Classes.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section id="mypassion-section" class="bg-light text-muted py-5">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="https://via.placeholder.com/100x100.png?text=Logo" width="100px" height="100px" alt="" class="img-fluid mb-3 rounded-circle">
<h3>生徒さんの成長</h3>
<p>OOOOO様 <br>受講前</p>
<div class="d-flex align-items-center justify-content-center">
<i class="fa fa-play fa-rotate-180 icon-left" style="margin-right: 1rem;" aria-hidden="false"></i>
<p class="mb-0">受講後</p>
<i class="fa fa-play icon-right" style="margin-left: 1rem;" aria-hidden="false"></i>
</div>
</div>
</div>
</div>
</section>
Was there a reason you didn’t want to put the icons in the p tag?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section id="mypassion-section" class="bg-light text-muted py-5">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="https://via.placeholder.com/100x100.png?text=Logo" width="100px" height="100px" alt="" class="img-fluid mb-3 rounded-circle">
<h3>生徒さんの成長</h3>
<p>OOOOO様 <br>受講前</p>
<p><i class="fa fa-play fa-rotate-180 icon-left" style="margin-right: 1rem;" aria-hidden="false"></i>
受講後
<i class="fa fa-play icon-right" style="margin-left: 1rem;" aria-hidden="false"></i></p>
</div>
</div>
</div>
</section>
It was good that you included some code in your question, but it's better to use the snippet tool to include things like the Bootstrap and Font Awesome CSS files and to provide a running example of what you have so far.
I am new to bootstrap and trying to complete my website which include a section something like this . Please help me to achieve this.
here is my code (if that helps)
<div class="row mfoo">
<div class="col-5 illus col-xs-12">
<img src="./images/illustration-features.svg" />
</div>
<div class="col-md-7 col-xs-12 text-right">
<div class="row">
<div class="col-7 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
<div class="col-5 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
</div>
<br />
<div class="row">
<div class="col-7 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
<div class="col-5 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
</div>
</div>
</div>
You use col-xs-* but xs size does not exsit in bootstrap-4
So use only col-md-5/7
See working code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.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.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row mfoo">
<div class="col-md-5 illus">
<img src="./images/illustration-features.svg" />
</div>
<div class="col-md-7">
<div class="row">
<div class="col-7 col-sm-12">
<p class="features_title"> dsf</p>
<p class="features_desc"> df</p>
</div>
<div class="col-5 col-sm-12">
<p class="features_title"> df</p>
<p class="features_desc"> df</p>
</div>
</div>
<br />
<div class="row">
<div class="col-7 col-sm-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
<div class="col-5 col-sm-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
</div>
</div>
</div>
</div>
to create your desired layout,
I've reproduce your code here with the solution
<div class="row mfoo">
<div class="col-lg-5 col-sm-12 illus col-xs-12">
<img src="https://cdn.pixabay.com/photo/2018/11/29/21/19/hamburg-3846525_1280.jpg" />
</div>
You can see complete code here: https://jsfiddle.net/wlum/kva1g5mp/7/
I have changed the col-5 into col-lg-5, so when small screen it will call the col-xs-12.
Bootstrap Grid System
In Bootstrap 4, There are two classes that are used for defining mobile devices. For smaller devices they use.col-sm- and for extra smaller devices they use .col-.
i have made the website mobile responsive.All are done.
This is the website which i made responsive.
alpha.dubaiexporters.com
what is happening is that when its of desktop size,the footer links are clickable but when i resize it to small screen,footer links shows unclickable.
i used the inspect element to know the issue and i found that its because of <div class="clearfix"> . So i removed it from my coding but the problem still persists.I dont have any idea.Even i tried removing .clearfix before and after from bootstrap.cs but its not working.[
i dont know why clearfix div is displaying even after removing it from code.
code:
<div class="footer-wrapper">
<div class="footer-container vc_row wpb_row vc_row-fluid ">
<%-- <img src="//cohhe.com/demo/sky/sky-directory/wp-content/uploads/2015/01/skydirectory-footer-logo.png" class="footer-logo " alt="Sky Directory" />--%>
<div class="footer-content" style="padding-top:60px;">
<div class="footer-links-container columns_count_2">
<div id="first" class="widget-area footer-links vc_col-sm-6 " role="complementary">
<div id="sky-directory-useful-links-20" class=" sky-usefullinks widget widget_sky-directory-useful-links row-fluid" style="width: 50%;float:left;">
<div class="useful-links-title">
About DubaiExporters
</div>About Us<br />Member Benefits<br />Link Us<br />Media Partners<br />Contact Us<br /><%--<div class="clearfix"></div>--%></div><div id="sky-directory-useful-links-21" class=" sky-usefullinks widget widget_sky-directory-useful-links row-fluid" style="width: 50%;float:left;">
<div class="useful-links-title">
Information
</div>News<br />Upcoming Exhibitions<br />Advertise<br />Add Your Event<br /><br /><%--<div class="clearfix"></div>--%></div> </div>
<div id="second" class="widget-area footer-links vc_col-sm-6 last" role="complementary">
<div id="sky-directory-contact-us-11" class=" sky-contactus widget widget_sky-directory-contact-us row-fluid">
<div class="contact-us-widget-main">
<div class="contact-us-phone">
<span class="phone-icon fa fa-mobile"></span>
<div class="phone-info-container">
<span class="phone-text">Call us:</span>
<span class="phone-number">+971 4 3050755</span>
</div>
<%--<div class="clearfix"></div>--%>
</div>
<div class="contact-us-lower">
<div class="contact-us-social">
<%--<div class="clearfix"></div>--%>
</div>
<div class="contact-us-email">
<a href="mailto:info#skydirectory.com" class="email-address">
<span class="email-text">Or send an email to:</span>info#dubaiexporters.com</a>
</div>
</div>
<%--<div class="clearfix"></div>--%>
</div>
<%-- <div class="clearfix"></div>--%>
</div> </div>
<%--<div class="clearfix"></div>--%>
</div>
</div>
<%--<div class="scroll-to-top-container">
<div class="scroll-to-top"><span>To Top</span></div>
</div>--%>
<div class="footer-inner">
<div class="footer_info">
<div class="copyright">© 2018, Dubai Exporters</div>
<%--<div class="clearfix"></div>--%>
</div>
</div>
<div class="footer-cloud-container">
<%--<img src="http://cohhe.com/demo/sky/sky-directory/wp-content/themes/sky/images/bottom-cloud.png" width="266" height="116" alt="Footer cloud"/>--%>
<%-- <div class="clearfix"></div>--%>
</div>
</div>
</div>
When using a "Link Item", begun with <div class="ui divided link items">, in Semantic UI (as per the manual: http://semantic-ui.com/views/item.html), where should I specify the URL of the page I would like the item to link to?
I tried wrapping the whole <div class="item"> within <a>, but doing so breaks the formatting of the item such that the content appears below the picture.
You can sub your div.item with a.item like in this fiddle or HTML below:
<div class="ui divided link items">
<a class="item" href="http://www.google.com" target="_blank">
<div class="ui tiny image">
<img src="http://www.semantic-ui.com/images/avatar/large/stevie.jpg">
</div>
<div class="content">
<div class="header">Google</div>
<div class="description">
<p></p>
</div>
</div>
</a>
<a class="item" href="http://www.yahoo.com" target="_blank">
<div class="ui tiny image">
<img src="http://www.semantic-ui.com/images/avatar/large/veronika.jpg">
</div>
<div class="content">
<div class="header">Yahoo!</div>
<div class="description">
<p></p>
</div>
</div>
</a>
<a class="item" href="http://duckduckgo.com/" target="_blank">
<div class="ui tiny image">
<img src="http://www.semantic-ui.com/images/avatar/large/jenny.jpg">
</div>
<div class="content">
<div class="header">DuckDuckGo</div>
<div class="description">
<p></p>
</div>
</div>
</a>
</div>