Jumbotron text alignment in Bootstrap 3

I created a webpage using Bootstrap 3 that looks perfect on a computer screen. However, when viewed on a mobile screen, the text in the jumbotron is overflowing, causing a horizontal scroll bar to appear.

<div id="home">
    <div id="jumb" class="jumbotron">
        <div class="container text-center">
        <div class="row">
            <div class="col-lg-3">
                <img id="abc" src="images/abc.jpg" alt="logo" />
            </div>
            <div class="col-lg-9" >
                <font style="font-family: Times New Roman" size="20" color="white" id="headline">hello</font><br>
                <div class="collapse navbar-collapse" id="navbar-collapse">
            <a href="#btn1" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button1</b></font></a>
            <a href="#btn2" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button2</b></font></a>
            <a href="#btn3" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button3</b></font></a>
            <a href="#btn4" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button5</b></font></a></div>
                <div class="btn-group">
                    <!--<marquee width="1000px"><a href=""><font color="white"><h3>XYZ</h3></font></a></marquee>-->             
                </div>
                </div>
            </div>
        </div>
    </div>
    </div>
htmlcsstwitter-bootstrap

Answer №1

Behold, the solution to your CSS and HTML issue lies within the collapse class. Remember: "the javascript won't function in the snippet, test it out in your own file."

.navbar-toggle .icon-bar {
  background: #000; //or any color you desire
}

.my-nav-toggle {
  float: none !important;
}



//Feel free to customize as needed
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home">
      <div id="jumb" class="jumbotron">
         <div class="container text-center">
            <div class="row">
               <div class="col-lg-3">
                  <img id="abc" src="images/abc.jpg" alt="logo" />
               </div>
               <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed my-nav-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                  </button>
               </div>
               <div class="col-lg-9" >
                  <font style="font-family: Times New Roman" size="20" color="white" id="headline">hello</font><br>
                  <div  class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                     <a href="#btn1" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button1</b></font></a>
                     <a href="#btn2" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button2</b></font></a>
                     <a href="#btn3" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button3</b></font></a>
                     <a href="#btn4" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button5</b></font></a></div>
                     <div class="btn-group">
                        <!--<marquee width="1000px"><a href=""><font color="white"><h3>XYZ</h3></font></a></marquee>-->
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>

Alternatively, consider removing the navbar-collapse collapse class for a different approach.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div id="home">
      <div id="jumb" class="jumbotron">
         <div class="container text-center">
            <div class="row">
               <div class="col-lg-3">
                  <img id="abc" src="images/abc.jpg" alt="logo" />
               </div>
               <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed my-nav-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                  </button>
               </div>
               <div class="col-lg-9" >
                  <font style="font-family: Times New Roman" size="20" color="white" id="headline">hello</font><br>
                  <div id="bs-example-navbar-collapse-1">
                     <a href="#btn1" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button1</b></font></a>
                     <a href="#btn2" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button2</b></font></a>
                     <a href="#btn3" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button3</b></font></a>
                     <a href="#btn4" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button5</b></font></a></div>
                     <div class="btn-group">
                        <!--<marquee width="1000px"><a href=""><font color="white"><h3>XYZ</h3></font></a></marquee>-->
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensuring Consistency of Request Parameters in URL String and POST Requests

While exploring query parameters and POST requests, I came across a puzzling situation. Here is a snippet from index.jsp: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <ti ...

htmljsphttprequest

At what browser width does Bootstrap's container no longer display a border?

I'm in the process of creating a flexible website design. https://i.sstatic.net/68qW2.png Everything seems to be going well so far. Here's what I have: <div class="container"> <div class="products-block"> <h2>Prod ...

htmlcsstwitter-bootstrap

What are the steps to modify the text color in WKWebView?

I've customized my ViewController to include a WKWebView, where I load my content from both .html and .css files. The result resembles a controller for reading books within the Apple Books app. do { guard let filePath = Bundle.main.path(fo ...

htmlcssiosswiftwkwebview

Running code upon the activation of list elements

Here is the HTML code snippet that I am working with: <ul class="tabs"> <li id="taba" class="active"><a href="#a">A</a></li> <li><a id="tabb" href="#b">B</a></li> <li><a id="tabc" hre ...

jquerytwitter-bootstrap

Sweetalert not functioning properly when deleting records from Datatable

I am currently working on a CRM script and encountering an issue. The customers are stored in a data table, and I am trying to implement a delete function with confirmation from both the database and the data table. I have written some code and placed it w ...

javascriptphphtmldatatablesweetalert2

Identifying a span element and appending to its classList

I am currently working on code that generates spans, and my objective is to adjust the color of specific spans based on their text content. I have identified a section where I need assistance with the syntax of the code I should input. My aim is to locate ...

javascripthtmlcss

Utilize the HTML canvas to sketch on an image that has been inserted

I have a HTML canvas element within my Ionic application. <canvas id="canvas" color="{{ color }}" width="800" height="600" style="position:relative;"></canvas> Within this canvas, I am loading an image. Below is the code snippet from the con ...

javascripthtmlangularjsionic-frameworkhtml5-canvas

What is the best way to add or delete data when specific radio buttons are chosen?

Hey there, I'm facing an issue where the data is being appended regardless of which radio button is selected. Can someone help me with a solution on how to properly add and remove data based on the selected radio button? $( document ).ready(functio ...

javascriptjqueryhtmlswitch-statement

The issue of React hover style malfunctioning in conjunction with Radium and Material-UI

I am currently utilizing the Radium library for inline styling in my React project. I have encountered an issue where the styling does not apply properly to Material-UI components, specifically when hovering over a Paper element. The color should change ...

cssreactjsreact-reduxmaterial-uiradium

Organizing Checkbox Groups for Validation in Bootstrap

My form consists of 2 checkboxes and I only want to submit the form if at least one checkbox is checked. The current code requires both checkboxes to be checked, but I tried grouping them using the name attribute without success. How can I group checkbox ...

javascripthtmlvalidationcheckboxbootstrap-4

The spreading of personalized events

I am expecting my CustomEvent to be propagated from the document to all the DOM elements. However, for some unknown reason, it is not happening. Can you point out what mistake I might be making? <html> <script> function onLoad() { var myDi ...

javascripthtmldomevent-propagationcustom-event

Having difficulty positioning text within a div with a fixed height

I'm facing a challenge in aligning text at the center of a div. My goal is to horizontally center it, but position it slightly higher than the vertical center. The div has a fixed height of 45%. How can I achieve this layout? .galf { width : 100%; he ...

htmlcss

Creating a customized design for a React application with the use of Scss and JavaScript variables

Is there a method to incorporate JavaScript variables into an SCSS file? For instance, I have a JavaScript file containing the following code: // sky blue const PRIMARY_COLOR = '#489FEF' export { PRIMARY_COLOR} and I would like to utilize it ...

javascripthtmlcssreactjssass

Blank datepicker displays as NaN when no selection is made

I've customized the bootstrap datepicker in a form by adding input fields, and everything is functioning correctly. However, the issue arises when the default date is displayed and if no date is selected, the month field shows 'NaN'. Is th ...

javascripthtmljquery

Issues with Yii: Loading of Javascript and CSS not happening post-Ajax requests

I have set up a view with tabs, each containing a form with an ajax submit and gridview. I am using renderpartial in the tabs widget to display the form and gridview. Everything looks good within the tab until I click the submit button. Upon clicking submi ...

javascriptphpcssajaxyii

Sharing information linked to dynamically generated HTML elements in MVC5

Currently, I am working on developing an MVC5 application. Within a view, I am dynamically creating HTML elements such as textboxes and dropdown lists using a JSON result returned from the server and jQuery. Now, my goal is to submit the selected data IDs ...

jqueryhtmlasp.net-mvc-5

Tips for creating responsive elements with a z-index of 1 in CSS

I have implemented the code provided in a codepen tutorial, but I replaced the world map image with a USA map. However, the dots are not responsive due to the z-index=1 specified on them. I experimented with vh, vw, and percentages, yet when I resize my s ...

javascripthtmlcsssass

Generating dynamic divs in parallel

Despite encountering numerous posts related to the issue at hand, none of them have solved my specific problem. I am aiming for 3 divs to display in each row, but the current code is causing each div to show up on a new line vertically: JQuery ...

javascriptjqueryhtmlcss

hiding an "input type="file" element by using a button to conceal it

Is it possible to create a button that triggers file upload functionality? I couldn't find any solutions on Google. I've heard it can be done with labels, but I specifically need to use a button for better UX/UI. <button style="position:fixe ...

jqueryhtmlcssbuttoninput

Is it possible to transfer data to the next page by clicking on a table row?

I'm facing an issue with a non-clickable table. When a row is clicked, I want to navigate to a detail page from the table while passing the id value in the process. I know that I need to create an href attribute on the table row and somehow transfer ...

phphtml